Update app.py

app.py

@@ -1,4 +1,3 @@
-
 from flask import Flask, render_template_string, request, redirect, url_for, flash, send_file
 import json
 import os
@@ -17,7 +16,7 @@ app = Flask(__name__)
 app.secret_key = os.getenv("FLASK_SECRET_KEY", "zzirix_secret_key_for_cart")
 DATA_FILE = 'data_zzirix.json'
 
-REPO_ID = "Kgshop/clients" # Using REPO_ID from app (2) (4).py for consistency with image paths in JSON
+REPO_ID = "Kgshop/clients"
 HF_TOKEN_WRITE = os.getenv("HF_TOKEN")
 HF_TOKEN_READ = os.getenv("HF_TOKEN_READ") or HF_TOKEN_WRITE
 
@@ -33,7 +32,6 @@ def initialize_data_structure(data):
     data.setdefault('products', [])
     data.setdefault('orders', {})
 
-    # Ensure "Без категории" exists if there are products with it
     if any(p.get('category') == 'Без категории' for p in data['products']) and 'Без категории' not in data['categories']:
         data['categories'].append('Без категории')
 
@@ -47,20 +45,16 @@ def initialize_data_structure(data):
         product.setdefault('price', 0.0)
         product.setdefault('colors', [])
         product.setdefault('models', [])
-        product.setdefault('photos', []) # Use 'photos' as per the provided JSON structure
-        product.setdefault('in_stock', True) # From provided JSON
-        product.setdefault('is_top', False) # From provided JSON
+        product.setdefault('photos', [])
+        product.setdefault('in_stock', True)
+        product.setdefault('is_top', False)
         
-        # For compatibility, if 'media' was used, convert it to 'photos' for new system
-        # Or if 'photos' is empty, try to populate from 'media'
         if not product['photos'] and 'media' in product and product['media']:
             product['photos'] = [m['filename'] for m in product['media'] if m['type'] == 'photo']
         
-        # Remove old 'media' field if it exists, as 'photos' is now canonical
         if 'media' in product:
             del product['media']
 
-    # Sort categories to ensure "Без категории" is usually first or consistently placed
     data['categories'] = sorted(list(set(data['categories'])), key=lambda x: (x != 'Без категории', x))
     
     return data
@@ -175,8 +169,8 @@ BASE_STYLE = '''
     --accent-dark-color: #059669;
     --danger-color: #ef4444;
     --danger-dark-color: #dc2626;
-    --background-light: linear-gradient(135deg, #f8f9fa, #e9ecef);
-    --background-dark: linear-gradient(135deg, #1a202c, #2d3748);
+    --background-light: linear-gradient(135deg, #f0f2f5, #e0e5ec);
+    --background-dark: linear-gradient(135deg, #1f2937, #374151);
     --card-background-light: #ffffff;
     --card-background-dark: #2d3748;
     --text-color-light: #2d3748;
@@ -185,10 +179,13 @@ BASE_STYLE = '''
     --secondary-text-color-dark: #a0aec0;
     --border-color-light: #e2e8f0;
     --border-color-dark: #4a5568;
-    --shadow-light: 0 6px 20px rgba(0, 0, 0, 0.08);
-    --shadow-hover-light: 0 10px 30px rgba(0, 0, 0, 0.15);
-    --shadow-dark: 0 6px 20px rgba(0, 0, 0, 0.25);
-    --shadow-hover-dark: 0 10px 30px rgba(0, 0, 0, 0.4);
+    --shadow-light: 0 8px 25px rgba(0, 0, 0, 0.1);
+    --shadow-hover-light: 0 12px 35px rgba(0, 0, 0, 0.18);
+    --shadow-dark: 0 8px 25px rgba(0, 0, 0, 0.35);
+    --shadow-hover-dark: 0 12px 35px rgba(0, 0, 0, 0.5);
+    --border-radius-large: 22px;
+    --border-radius-medium: 12px;
+    --border-radius-small: 8px;
 }
 * {
     margin: 0;
@@ -210,47 +207,53 @@ body.dark-mode {
     color: var(--text-color-dark);
 }
 .container {
-    max-width: 1300px;
+    max-width: 1400px;
     margin: 0 auto;
-    padding: 20px;
+    padding: 30px;
     flex-grow: 1;
 }
 .header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 15px 0;
-    border-bottom: 1px solid var(--border-color-light);
-    margin-bottom: 20px;
+    padding: 20px 30px;
+    border-bottom: none;
+    margin-bottom: 30px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+    border-radius: var(--border-radius-large);
+    background: var(--card-background-light);
 }
 body.dark-mode .header {
     border-bottom-color: var(--border-color-dark);
+    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+    background: var(--card-background-dark);
 }
 .header-info {
     display: flex;
     align-items: center;
 }
 .header-logo {
-    width: 50px;
-    height: 50px;
+    width: 60px;
+    height: 60px;
     border-radius: 50%;
     object-fit: cover;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
+    margin-right: 15px;
 }
 .header-logo:hover {
-    transform: scale(1.05);
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    transform: scale(1.08);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
 }
 .header h1 {
-    font-size: 1.7rem;
-    font-weight: 700;
-    margin-left: 15px;
+    font-size: 2rem;
+    font-weight: 800;
+    color: var(--primary-color);
 }
 .theme-toggle {
     background: none;
     border: none;
-    font-size: 1.6rem;
+    font-size: 1.8rem;
     cursor: pointer;
     color: var(--secondary-text-color-light);
     transition: color 0.3s ease, transform 0.2s ease;
@@ -260,16 +263,17 @@ body.dark-mode .theme-toggle {
     color: var(--secondary-text-color-dark);
 }
 .theme-toggle:hover {
-    color: var(--primary-color);
-    transform: rotate(15deg);
+    color: var(--accent-color);
+    transform: rotate(30deg);
 }
 
 .flash {
-    padding: 15px;
-    margin-bottom: 20px;
-    border-radius: 8px;
+    padding: 18px;
+    margin-bottom: 25px;
+    border-radius: var(--border-radius-medium);
     font-weight: 500;
     border: 1px solid transparent;
+    font-size: 1.1rem;
 }
 .flash.success {
     background-color: var(--accent-color);
@@ -283,25 +287,25 @@ body.dark-mode .theme-toggle {
 }
 
 .filters-container {
-    margin: 20px 0;
+    margin: 30px 0;
     display: flex;
     flex-wrap: wrap;
-    gap: 10px;
+    gap: 15px;
     justify-content: center;
 }
 .search-container {
-    margin: 20px 0;
+    margin: 25px 0;
     text-align: center;
 }
 #search-input {
     width: 90%;
     max-width: 600px;
-    padding: 12px 18px;
+    padding: 14px 22px;
     font-size: 1rem;
-    border: 1px solid var(--border-color-light);
-    border-radius: 25px;
+    border: none;
+    border-radius: var(--border-radius-medium);
     outline: none;
-    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
+    box-shadow: var(--shadow-light);
     transition: all 0.3s ease;
     background-color: var(--card-background-light);
     color: var(--text-color-light);
@@ -310,19 +314,20 @@ body.dark-mode #search-input {
     border-color: var(--border-color-dark);
     background-color: var(--card-background-dark);
     color: var(--text-color-dark);
+    box-shadow: var(--shadow-dark);
 }
 #search-input:focus {
     border-color: var(--primary-color);
-    box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
+    box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
 }
 .category-filter {
-    padding: 10px 20px;
-    border: 1px solid var(--border-color-light);
-    border-radius: 25px;
+    padding: 12px 25px;
+    border: none;
+    border-radius: var(--border-radius-medium);
     background-color: var(--card-background-light);
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    font-size: 0.95rem;
+    font-size: 1rem;
     font-weight: 500;
     color: var(--text-color-light);
     box-shadow: var(--shadow-light);
@@ -347,14 +352,14 @@ body.dark-mode .category-filter.active, body.dark-mode .category-filter:hover {
 
 .products-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-    gap: 20px;
-    padding: 10px;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 25px;
+    padding: 15px;
 }
 .product {
     background: var(--card-background-light);
-    border-radius: 18px;
-    padding: 15px;
+    border-radius: var(--border-radius-large);
+    padding: 20px;
     box-shadow: var(--shadow-light);
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
     overflow: hidden;
@@ -367,7 +372,7 @@ body.dark-mode .product {
     box-shadow: var(--shadow-dark);
 }
 .product:hover {
-    transform: translateY(-8px) scale(1.02);
+    transform: translateY(-10px) scale(1.03);
     box-shadow: var(--shadow-hover-light);
 }
 body.dark-mode .product:hover {
@@ -376,30 +381,32 @@ body.dark-mode .product:hover {
 .product-image {
     width: 100%;
     aspect-ratio: 1;
-    background-color: #f0f0f0;
-    border-radius: 12px;
+    background-color: #f7f7f7;
+    border-radius: var(--border-radius-medium);
     overflow: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-bottom: 10px;
+    margin-bottom: 15px;
+    cursor: pointer;
 }
 body.dark-mode .product-image {
-    background-color: #3a4250;
+    background-color: #343e4d;
 }
 .product-image img, .product-image video {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     transition: transform 0.3s ease;
+    border-radius: var(--border-radius-medium);
 }
 .product-image img:hover, .product-image video:hover {
     transform: scale(1.05);
 }
 .product h2 {
-    font-size: 1.05rem;
-    font-weight: 600;
-    margin: 5px 0;
+    font-size: 1.2rem;
+    font-weight: 700;
+    margin: 8px 0;
     text-align: center;
     white-space: nowrap;
     overflow: hidden;
@@ -410,17 +417,17 @@ body.dark-mode .product h2 {
     color: var(--text-color-dark);
 }
 .product-price {
-    font-size: 1.15rem;
+    font-size: 1.3rem;
     color: var(--danger-color);
     font-weight: 700;
     text-align: center;
-    margin: 5px 0 10px;
+    margin: 8px 0 12px;
 }
 .product-description {
-    font-size: 0.85rem;
+    font-size: 0.9rem;
     color: var(--secondary-text-color-light);
     text-align: center;
-    margin-bottom: 15px;
+    margin-bottom: 20px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -431,48 +438,51 @@ body.dark-mode .product-description {
 .product-actions {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 10px;
     margin-top: auto;
 }
 .product-button {
     display: block;
     width: 100%;
-    padding: 10px;
+    padding: 12px;
     border: none;
-    border-radius: 10px;
+    border-radius: var(--border-radius-medium);
     background-color: var(--primary-color);
     color: white;
-    font-size: 0.9rem;
+    font-size: 1rem;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     text-align: center;
     text-decoration: none;
+    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
 }
 .product-button:hover {
     background-color: var(--primary-dark-color);
-    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
+    box-shadow: 0 6px 15px rgba(59, 130, 246, 0.4);
+    transform: translateY(-2px);
 }
 .add-to-cart {
     background-color: var(--accent-color);
+    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.2);
 }
 .add-to-cart:hover {
     background-color: var(--accent-dark-color);
-    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
+    box-shadow: 0 6px 15px rgba(16, 185, 129, 0.4);
 }
 #cart-button {
     position: fixed;
-    bottom: 25px;
-    right: 25px;
+    bottom: 30px;
+    right: 30px;
     background-color: var(--danger-color);
     color: white;
     border: none;
     border-radius: 50%;
-    width: 55px;
-    height: 55px;
-    font-size: 1.3rem;
+    width: 60px;
+    height: 60px;
+    font-size: 1.5rem;
     cursor: pointer;
-    box-shadow: 0 5px 20px rgba(239, 68, 68, 0.4);
+    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: 1000;
     display: flex;
@@ -481,8 +491,8 @@ body.dark-mode .product-description {
 }
 #cart-button:hover {
     background-color: var(--danger-dark-color);
-    transform: translateY(-3px) scale(1.05);
-    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.6);
+    transform: translateY(-5px) scale(1.08);
+    box-shadow: 0 12px 35px rgba(239, 68, 68, 0.5);
 }
 .cart-count {
     position: absolute;
@@ -491,9 +501,9 @@ body.dark-mode .product-description {
     background-color: var(--accent-color);
     color: white;
     border-radius: 50%;
-    padding: 3px 7px;
-    font-size: 0.75rem;
-    min-width: 20px;
+    padding: 4px 8px;
+    font-size: 0.8rem;
+    min-width: 22px;
     text-align: center;
     font-weight: 600;
 }
@@ -514,13 +524,13 @@ body.dark-mode .product-description {
 .modal-content {
     background: var(--card-background-light);
     margin: 50px auto;
-    padding: 30px;
-    border-radius: 20px;
+    padding: 40px;
+    border-radius: var(--border-radius-large);
     width: 95%;
     max-width: 750px;
-    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
+    box-shadow: var(--shadow-hover-light);
     animation: fadeInScale 0.3s ease-out;
-    max-height: calc(100vh - 100px); 
+    max-height: 90vh; 
     overflow-y: auto; 
     -webkit-overflow-scrolling: touch;
     position: relative;
@@ -528,7 +538,7 @@ body.dark-mode .product-description {
 body.dark-mode .modal-content {
     background: var(--card-background-dark);
     color: var(--text-color-dark);
-    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
+    box-shadow: var(--shadow-hover-dark);
 }
 @keyframes fadeInScale {
     from { opacity: 0; transform: translateY(-30px) scale(0.95); }
@@ -536,9 +546,9 @@ body.dark-mode .modal-content {
 }
 .close {
     position: absolute;
-    top: 15px;
-    right: 20px;
-    font-size: 1.8rem;
+    top: 20px;
+    right: 25px;
+    font-size: 2rem;
     color: var(--secondary-text-color-light);
     cursor: pointer;
     transition: color 0.3s, transform 0.2s;
@@ -555,15 +565,15 @@ body.dark-mode .close:hover {
 }
 
 .modal h2 {
-    font-size: 1.6rem;
+    font-size: 1.8rem;
     font-weight: 700;
-    margin-bottom: 20px;
+    margin-bottom: 25px;
     text-align: center;
 }
 .cart-item {
     display: flex;
     align-items: center;
-    padding: 15px 0;
+    padding: 18px 0;
     border-bottom: 1px solid var(--border-color-light);
 }
 body.dark-mode .cart-item {
@@ -573,247 +583,239 @@ body.dark-mode .cart-item {
     border-bottom: none;
 }
 .cart-item img {
-    width: 60px;
-    height: 60px;
+    width: 70px;
+    height: 70px;
     object-fit: contain;
-    border-radius: 10px;
-    margin-right: 15px;
-    background-color: #f0f0f0;
+    border-radius: var(--border-radius-small);
+    margin-right: 20px;
+    background-color: #f7f7f7;
 }
 body.dark-mode .cart-item img {
-    background-color: #3a4250;
+    background-color: #343e4d;
 }
 .cart-item-details {
     flex-grow: 1;
 }
 .cart-item-details strong {
-    font-size: 1.1rem;
+    font-size: 1.2rem;
     font-weight: 600;
 }
 .cart-item-details p {
-    font-size: 0.9rem;
+    font-size: 0.95rem;
     color: var(--secondary-text-color-light);
 }
 body.dark-mode .cart-item-details p {
     color: var(--secondary-text-color-dark);
 }
 .cart-item-total {
-    font-size: 1rem;
+    font-size: 1.1rem;
     font-weight: 700;
     color: var(--danger-color);
 }
 .quantity-input, .color-select, .model-select {
     width: 100%;
-    padding: 10px;
+    padding: 12px;
     border: 1px solid var(--border-color-light);
-    border-radius: 8px;
+    border-radius: var(--border-radius-medium);
     font-size: 1rem;
-    margin: 8px 0;
+    margin: 10px 0;
     background-color: var(--card-background-light);
     color: var(--text-color-light);
+    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
 }
 body.dark-mode .quantity-input, body.dark-mode .color-select, body.dark-mode .model-select {
     border-color: var(--border-color-dark);
     background-color: var(--card-background-dark);
     color: var(--text-color-dark);
+    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
 }
 .modal-buttons {
-    margin-top: 20px;
+    margin-top: 30px;
     display: flex;
     justify-content: flex-end;
-    gap: 10px;
+    gap: 15px;
 }
 .modal-buttons .product-button {
     width: auto;
-    padding: 10px 20px;
+    padding: 12px 25px;
 }
 .clear-cart {
     background-color: var(--danger-color);
 }
 .clear-cart:hover {
     background-color: var(--danger-dark-color);
-    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
+    box-shadow: 0 6px 15px rgba(239, 68, 68, 0.4);
 }
 .order-button {
     background-color: var(--accent-color);
 }
 .order-button:hover {
     background-color: var(--accent-dark-color);
-    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
+    box-shadow: 0 6px 15px rgba(16, 185, 129, 0.4);
 }
 
 .swiper-container {
-    max-width: 400px;
-    margin: 0 auto 20px;
-    border-radius: 15px;
+    max-width: 500px;
+    margin: 0 auto 30px;
+    border-radius: var(--border-radius-large);
     overflow: hidden;
-    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+    box-shadow: var(--shadow-light);
 }
 body.dark-mode .swiper-container {
-    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
+    box-shadow: var(--shadow-dark);
 }
 .swiper-slide {
-    background-color: #f0f0f0;
+    background-color: #f7f7f7;
     display: flex;
     justify-content: center;
     align-items: center;
-    min-height: 250px;
+    min-height: 300px;
 }
 body.dark-mode .swiper-slide {
-    background-color: #3a4250;
+    background-color: #343e4d;
 }
 .swiper-slide img, .swiper-slide video {
     max-width: 100%;
-    max-height: 300px;
+    max-height: 350px;
     object-fit: contain;
 }
 .swiper-button-next, .swiper-button-prev {
     color: var(--primary-color) !important;
-    background-color: rgba(255,255,255,0.8);
+    background-color: rgba(255,255,255,0.9);
     border-radius: 50%;
-    width: 40px;
-    height: 40px;
+    width: 45px;
+    height: 45px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background-color 0.3s;
+    font-size: 1.8rem;
 }
 .swiper-button-next:hover, .swiper-button-prev:hover {
-    background-color: rgba(255,255,255,1);
+    background-color: #fff;
 }
 body.dark-mode .swiper-button-next, body.dark-mode .swiper-button-prev {
-    background-color: rgba(45, 55, 72, 0.8);
+    background-color: rgba(45, 55, 72, 0.9);
 }
 body.dark-mode .swiper-button-next:hover, body.dark-mode .swiper-button-prev:hover {
-    background-color: rgba(45, 55, 72, 1);
+    background-color: #2d3748;
 }
 .swiper-pagination-bullet {
     background-color: var(--primary-color) !important;
 }
 
-.product-detail-page {
-    background: var(--card-background-light);
-    margin: 50px auto;
-    padding: 30px;
-    border-radius: 20px;
-    width: 95%;
-    max-width: 750px;
-    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
-    position: relative;
+.product-detail-modal-inner {
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    box-shadow: none;
+    position: static;
 }
-body.dark-mode .product-detail-page {
-    background: var(--card-background-dark);
-    color: var(--text-color-dark);
-    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
+body.dark-mode .product-detail-modal-inner {
+    background: transparent;
+    box-shadow: none;
 }
-.product-detail-page h1 {
+.product-detail-modal-inner h2 {
     font-size: 2.2rem;
     font-weight: 700;
     margin-bottom: 25px;
     text-align: center;
     color: var(--text-color-light);
 }
-body.dark-mode .product-detail-page h1 {
+body.dark-mode .product-detail-modal-inner h2 {
     color: var(--text-color-dark);
 }
-.product-detail-page p {
+.product-detail-modal-inner p {
     margin-bottom: 10px;
     font-size: 1rem;
 }
-.product-detail-page p strong {
+.product-detail-modal-inner p strong {
     color: var(--text-color-light);
 }
-body.dark-mode .product-detail-page p strong {
+body.dark-mode .product-detail-modal-inner p strong {
     color: var(--text-color-dark);
 }
-.product-detail-page .price {
+.product-detail-modal-inner .price {
     font-size: 1.8rem;
     color: var(--danger-color);
     font-weight: 700;
     margin-bottom: 20px;
     text-align: center;
 }
-.product-detail-page .description {
+.product-detail-modal-inner .description {
     margin-bottom: 20px;
     white-space: pre-wrap;
 }
-.product-detail-actions {
+.product-detail-modal-actions {
     display: flex;
     justify-content: center;
     gap: 15px;
     margin-top: 30px;
 }
-.product-detail-actions .product-button {
+.product-detail-modal-actions .product-button {
     width: auto;
     padding: 12px 25px;
 }
-.back-to-catalog {
-    margin-bottom: 20px;
-    text-align: left;
-}
-
 
 @media (max-width: 768px) {
+    .container {
+        padding: 15px;
+    }
     .header h1 {
-        font-size: 1.4rem;
+        font-size: 1.6rem;
     }
     .category-filter {
         font-size: 0.85rem;
         padding: 8px 15px;
     }
     .products-grid {
-        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-        gap: 15px;
+        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+        gap: 18px;
     }
     .product h2 {
-        font-size: 0.95rem;
+        font-size: 1.05rem;
     }
     .product-price {
-        font-size: 1.05rem;
+        font-size: 1.15rem;
     }
     .product-description {
-        font-size: 0.75rem;
+        font-size: 0.8rem;
     }
     .product-button {
-        font-size: 0.85rem;
-        padding: 8px;
+        font-size: 0.9rem;
+        padding: 10px;
     }
     #cart-button {
-        width: 45px;
-        height: 45px;
-        font-size: 1.1rem;
-        bottom: 15px;
-        right: 15px;
+        width: 50px;
+        height: 50px;
+        font-size: 1.2rem;
+        bottom: 20px;
+        right: 20px;
     }
     .modal-content {
         margin: 20px auto;
-        padding: 20px;
-        max-height: calc(100vh - 40px);
+        padding: 25px;
+        max-height: 95vh;
     }
     .close {
-        font-size: 1.5rem;
-        top: 10px;
-        right: 15px;
+        font-size: 1.6rem;
+        top: 15px;
+        right: 18px;
     }
     .modal h2 {
-        font-size: 1.4rem;
+        font-size: 1.6rem;
     }
     .cart-item img {
-        width: 45px;
-        height: 45px;
-    }
-    .product-detail-page {
-        margin: 20px auto;
-        padding: 20px;
-        max-height: calc(100vh - 40px);
+        width: 55px;
+        height: 55px;
     }
-    .product-detail-page h1 {
-        font-size: 1.8rem;
+    .product-detail-modal-inner h2 {
+        font-size: 2rem;
     }
-    .product-detail-page .price {
-        font-size: 1.5rem;
+    .product-detail-modal-inner .price {
+        font-size: 1.6rem;
     }
-    .product-detail-actions {
+    .product-detail-modal-actions {
         flex-direction: column;
         gap: 10px;
     }
@@ -826,13 +828,15 @@ def catalog():
     products = data.get('products', [])
     categories = data.get('categories', [])
 
+    products.sort(key=lambda p: p['name'].lower())
+
     return render_template_string('''
 <!DOCTYPE html>
 <html lang="ru">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ZZIRIX - сотовые аксессуары оптом </title>
+    <title>ZZIRIX - сотовые аксессуары оптом</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
@@ -871,7 +875,7 @@ def catalog():
                  data-name="{{ product['name']|lower }}" 
                  data-description="{{ product['description']|lower }}"
                  data-category="{{ product.get('category', 'Без категории')|lower }}">
-                <a href="{{ url_for('product_page', product_id=product.id) }}" class="product-image">
+                <a href="javascript:void(0)" onclick="openProductDetailModal('{{ product.id }}')" class="product-image">
                     {% if product.get('photos') and product['photos']|length > 0 %}
                     {% set filename = product['photos'][0] %}
                     {% if filename.endswith(('.mp4', '.mov', '.webm')) %}
@@ -891,7 +895,7 @@ def catalog():
                 <div class="product-price">{{ "%.2f"|format(product['price']) }} с</div>
                 <p class="product-description">{{ product['description'][:50] }}{% if product['description']|length > 50 %}...{% endif %}</p>
                 <div class="product-actions">
-                    <a href="{{ url_for('product_page', product_id=product.id) }}" class="product-button">Подробнее</a>
+                    <button class="product-button" onclick="openProductDetailModal('{{ product.id }}')">Подробнее</button>
                     <button class="product-button add-to-cart" onclick="openQuantityModal('{{ product.id }}')">В корзину</button>
                 </div>
             </div>
@@ -929,6 +933,30 @@ def catalog():
         </div>
     </div>
 
+    <div id="productDetailModal" class="modal">
+        <div class="modal-content">
+            <span class="close" onclick="closeModal('productDetailModal')">×</span>
+            <div class="product-detail-modal-inner">
+                <h2 id="detailProductName"></h2>
+                <div class="swiper-container" style="max-width: 500px; margin: 0 auto 30px;">
+                    <div class="swiper-wrapper" id="detailProductMedia">
+                    </div>
+                    <div class="swiper-pagination"></div>
+                    <div class="swiper-button-next"></div>
+                    <div class="swiper-button-prev"></div>
+                </div>
+                <p><strong>Категория:</strong> <span id="detailProductCategory" style="color: var(--primary-color);"></span></p>
+                <p class="price" id="detailProductPrice"></p>
+                <p class="description"><strong>Описание:</strong> <span id="detailProductDescription"></span></p>
+                <p><strong>Доступные цвета:</strong> <span id="detailProductColors" style="color: var(--secondary-text-color-light);"></span></p>
+                <p><strong>Доступные модели:</strong> <span id="detailProductModels" style="color: var(--secondary-text-color-light);"></span></p>
+                <div class="product-detail-modal-actions">
+                    <button class="product-button add-to-cart" id="detailAddToCartButton">В корзину</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <button id="cart-button" onclick="openCartModal()">
         <i class="fas fa-shopping-cart"></i>
         <span id="cart-count" class="cart-count">0</span>
@@ -938,6 +966,7 @@ def catalog():
     <script>
         const products = {{ products|tojson }};
         let selectedProductId = null;
+        let detailSwiperInstance = null;
 
         function toggleTheme() {
             document.body.classList.toggle('dark-mode');
@@ -958,6 +987,10 @@ def catalog():
 
         function closeModal(modalId) {
             document.getElementById(modalId).style.display = "none";
+            if (modalId === 'productDetailModal' && detailSwiperInstance) {
+                detailSwiperInstance.destroy(true, true);
+                detailSwiperInstance = null;
+            }
         }
 
         function openQuantityModal(productId) {
@@ -1020,7 +1053,6 @@ def catalog():
             let cart = JSON.parse(localStorage.getItem('cart') || '[]');
             const product = products.find(p => p.id === selectedProductId);
 
-            // Generate a unique ID for the cart item based on product ID, color, and model
             const cartItemId = `${product.id}-${color}-${model}`; 
             const existingItem = cart.find(item => item.cartId === cartItemId);
 
@@ -1028,8 +1060,8 @@ def catalog():
                 existingItem.quantity += quantity;
             } else {
                 cart.push({
-                    cartId: cartItemId, // Unique ID for this specific combination in cart
-                    productId: product.id, // Original product ID
+                    cartId: cartItemId,
+                    productId: product.id,
                     name: product.name,
                     price: product.price,
                     photo: product.photos && product.photos.length > 0 ? product.photos[0] : '',
@@ -1066,9 +1098,9 @@ def catalog():
                         <img src="${photoSrc}" alt="${item.name}">
                         <div class="cart-item-details">
                             <strong>${item.name}</strong>
-                            <p>${item.price} с × ${item.quantity} (Цвет: ${item.color}, Модель: ${item.model})</p>
+                            <p>${item.price.toFixed(2)} с × ${item.quantity} (Цвет: ${item.color}, Модель: ${item.model})</p>
                         </div>
-                        <span class="cart-item-total">${itemTotal} с</span>
+                        <span class="cart-item-total">${itemTotal.toFixed(2)} с</span>
                     </div>
                 `;
             }).join('');
@@ -1092,7 +1124,7 @@ def catalog():
             });
             orderText += `*Итого к оплате: ${total.toFixed(2)} с*%0A%0AЖду подтверждения заказа.`;
             window.open(`https://api.whatsapp.com/send?phone=996705665777&text=${orderText}`, '_blank');
-            clearCart(); // Optionally clear cart after ordering
+            clearCart();
         }
 
         function clearCart() {
@@ -1104,6 +1136,10 @@ def catalog():
         window.onclick = function(event) {
             if (event.target.classList.contains('modal')) {
                 event.target.style.display = "none";
+                if (detailSwiperInstance) {
+                    detailSwiperInstance.destroy(true, true);
+                    detailSwiperInstance = null;
+                }
             }
         }
 
@@ -1131,6 +1167,80 @@ def catalog():
             });
         }
 
+        function openProductDetailModal(productId) {
+            selectedProductId = productId;
+            const product = products.find(p => p.id === productId);
+            if (!product) {
+                alert('Ошибка: Товар не найден.');
+                return;
+            }
+
+            document.getElementById('detailProductName').textContent = product.name;
+            document.getElementById('detailProductCategory').textContent = product.category || 'Без категории';
+            document.getElementById('detailProductPrice').textContent = `${product.price.toFixed(2)} с`;
+            document.getElementById('detailProductDescription').textContent = product.description;
+            document.getElementById('detailProductColors').textContent = product.colors && product.colors.length > 0 ? product.colors.join(', ') : 'Нет цветов';
+            document.getElementById('detailProductModels').textContent = product.models && product.models.length > 0 ? product.models.join(', ') : 'Нет моделей';
+            document.getElementById('detailAddToCartButton').onclick = () => openQuantityModal(product.id);
+
+            const mediaContainer = document.getElementById('detailProductMedia');
+            mediaContainer.innerHTML = '';
+            if (product.photos && product.photos.length > 0) {
+                product.photos.forEach(filename => {
+                    const slide = document.createElement('div');
+                    slide.className = 'swiper-slide swiper-zoom-container';
+                    slide.style = "display: flex; justify-content: center; align-items: center; border-radius: 10px;";
+                    
+                    const mediaUrl = `https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${filename}`;
+                    if (filename.endsWith(('.mp4', '.mov', '.webm'))) {
+                        slide.innerHTML = `<video controls preload="metadata" style="max-width: 100%; max-height: 350px; object-fit: contain;"><source src="${mediaUrl}" type="video/mp4"></video>`;
+                    } else {
+                        slide.innerHTML = `<img src="${mediaUrl}" alt="${product.name}" style="max-width: 100%; max-height: 350px; object-fit: contain;">`;
+                    }
+                    mediaContainer.appendChild(slide);
+                });
+            } else {
+                const slide = document.createElement('div');
+                slide.className = 'swiper-slide swiper-zoom-container';
+                slide.style = "display: flex; justify-content: center; align-items: center; border-radius: 10px;";
+                slide.innerHTML = `<img src="https://via.placeholder.com/300x300?text=No+Image" alt="No Image">`;
+                mediaContainer.appendChild(slide);
+            }
+            
+            document.getElementById('productDetailModal').style.display = 'block';
+            
+            if (detailSwiperInstance) {
+                detailSwiperInstance.destroy(true, true);
+            }
+            detailSwiperInstance = new Swiper('#productDetailModal .swiper-container', {
+                slidesPerView: 1,
+                spaceBetween: 20,
+                loop: true,
+                grabCursor: true,
+                pagination: { el: '#productDetailModal .swiper-pagination', clickable: true },
+                navigation: { nextEl: '#productDetailModal .swiper-button-next', prevEl: '#productDetailModal .swiper-button-prev' },
+                zoom: { maxRatio: 3 },
+                on: {
+                    init: function () {
+                        this.slides.forEach(slide => {
+                            const img = slide.querySelector('img');
+                            if (img && !img.complete) {
+                                img.onload = () => detailSwiperInstance.update();
+                            }
+                            const video = slide.querySelector('video');
+                            if (video) {
+                                video.onloadedmetadata = () => detailSwiperInstance.update();
+                            }
+                        });
+                    },
+                    resize: function() {
+                        this.update();
+                    }
+                }
+            });
+            detailSwiperInstance.update();
+        }
+
         updateCartButton();
     </script>
 </body>
@@ -1149,6 +1259,7 @@ def catalog_by_category(category_name):
     categories = data.get('categories', [])
     
     products = [p for p in products_all if p.get('category', '').lower() == category_name.lower()]
+    products.sort(key=lambda p: p['name'].lower())
 
     return render_template_string('''
 <!DOCTYPE html>
@@ -1183,7 +1294,7 @@ def catalog_by_category(category_name):
         <div class="filters-container">
             <button class="category-filter" data-category="all" onclick="window.location.href='{{ url_for('catalog') }}'">Все категории</button>
             {% for cat in categories %}
-            <button class="category-filter {% if cat | lower == category_name | lower %}active{% endif %}" data-category="{{ cat | lower }}">{{ cat }}</button>
+            <button class="category-filter {% if cat | lower == category_name | lower %}active{% endif %}" data-category="{{ cat | lower }}" onclick="window.location.href='{{ url_for('catalog_by_category', category_name=cat | lower) }}'">{{ cat }}</button>
             {% endfor %}
         </div>
         <div class="search-container">
@@ -1195,7 +1306,7 @@ def catalog_by_category(category_name):
                  data-name="{{ product['name']|lower }}" 
                  data-description="{{ product['description']|lower }}"
                  data-category="{{ product.get('category', 'Без категории')|lower }}">
-                <a href="{{ url_for('product_page', product_id=product.id) }}" class="product-image">
+                <a href="javascript:void(0)" onclick="openProductDetailModal('{{ product.id }}')" class="product-image">
                     {% if product.get('photos') and product['photos']|length > 0 %}
                     {% set filename = product['photos'][0] %}
                     {% if filename.endswith(('.mp4', '.mov', '.webm')) %}
@@ -1215,7 +1326,7 @@ def catalog_by_category(category_name):
                 <div class="product-price">{{ "%.2f"|format(product['price']) }} с</div>
                 <p class="product-description">{{ product['description'][:50] }}{% if product['description']|length > 50 %}...{% endif %}</p>
                 <div class="product-actions">
-                    <a href="{{ url_for('product_page', product_id=product.id) }}" class="product-button">Подробнее</a>
+                    <button class="product-button" onclick="openProductDetailModal('{{ product.id }}')">Подробнее</button>
                     <button class="product-button add-to-cart" onclick="openQuantityModal('{{ product.id }}')">В корзину</button>
                 </div>
             </div>
@@ -1253,6 +1364,30 @@ def catalog_by_category(category_name):
         </div>
     </div>
 
+    <div id="productDetailModal" class="modal">
+        <div class="modal-content">
+            <span class="close" onclick="closeModal('productDetailModal')">×</span>
+            <div class="product-detail-modal-inner">
+                <h2 id="detailProductName"></h2>
+                <div class="swiper-container" style="max-width: 500px; margin: 0 auto 30px;">
+                    <div class="swiper-wrapper" id="detailProductMedia">
+                    </div>
+                    <div class="swiper-pagination"></div>
+                    <div class="swiper-button-next"></div>
+                    <div class="swiper-button-prev"></div>
+                </div>
+                <p><strong>Категория:</strong> <span id="detailProductCategory" style="color: var(--primary-color);"></span></p>
+                <p class="price" id="detailProductPrice"></p>
+                <p class="description"><strong>Описание:</strong> <span id="detailProductDescription"></span></p>
+                <p><strong>Доступные цвета:</strong> <span id="detailProductColors" style="color: var(--secondary-text-color-light);"></span></p>
+                <p><strong>Доступные модели:</strong> <span id="detailProductModels" style="color: var(--secondary-text-color-light);"></span></p>
+                <div class="product-detail-modal-actions">
+                    <button class="product-button add-to-cart" id="detailAddToCartButton">В корзину</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <button id="cart-button" onclick="openCartModal()">
         <i class="fas fa-shopping-cart"></i>
         <span id="cart-count" class="cart-count">0</span>
@@ -1260,8 +1395,9 @@ def catalog_by_category(category_name):
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
     <script>
-        const products = {{ products_all|tojson }}; // Use all products for client-side lookup
+        const products = {{ products_all|tojson }};
         let selectedProductId = null;
+        let detailSwiperInstance = null;
 
         function toggleTheme() {
             document.body.classList.toggle('dark-mode');
@@ -1282,6 +1418,10 @@ def catalog_by_category(category_name):
 
         function closeModal(modalId) {
             document.getElementById(modalId).style.display = "none";
+            if (modalId === 'productDetailModal' && detailSwiperInstance) {
+                detailSwiperInstance.destroy(true, true);
+                detailSwiperInstance = null;
+            }
         }
 
         function openQuantityModal(productId) {
@@ -1344,7 +1484,6 @@ def catalog_by_category(category_name):
             let cart = JSON.parse(localStorage.getItem('cart') || '[]');
             const product = products.find(p => p.id === selectedProductId);
 
-            // Generate a unique ID for the cart item based on product ID, color, and model
             const cartItemId = `${product.id}-${color}-${model}`; 
             const existingItem = cart.find(item => item.cartId === cartItemId);
 
@@ -1352,8 +1491,8 @@ def catalog_by_category(category_name):
                 existingItem.quantity += quantity;
             } else {
                 cart.push({
-                    cartId: cartItemId, // Unique ID for this specific combination in cart
-                    productId: product.id, // Original product ID
+                    cartId: cartItemId,
+                    productId: product.id,
                     name: product.name,
                     price: product.price,
                     photo: product.photos && product.photos.length > 0 ? product.photos[0] : '',
@@ -1416,7 +1555,7 @@ def catalog_by_category(category_name):
             });
             orderText += `*Итого к оплате: ${total.toFixed(2)} с*%0A%0AЖду подтверждения заказа.`;
             window.open(`https://api.whatsapp.com/send?phone=996705665777&text=${orderText}`, '_blank');
-            clearCart(); // Optionally clear cart after ordering
+            clearCart();
         }
 
         function clearCart() {
@@ -1428,355 +1567,92 @@ def catalog_by_category(category_name):
         window.onclick = function(event) {
             if (event.target.classList.contains('modal')) {
                 event.target.style.display = "none";
+                if (detailSwiperInstance) {
+                    detailSwiperInstance.destroy(true, true);
+                    detailSwiperInstance = null;
+                }
             }
         }
 
         document.getElementById('search-input').addEventListener('input', filterProducts);
-        document.querySelectorAll('.filters-container .category-filter').forEach(filter => {
-            filter.addEventListener('click', function() {
-                // For category filter on catalog_by_category page, redirect to correct URL
-                if (this.dataset.category === 'all') {
-                    window.location.href = "{{ url_for('catalog') }}";
-                } else {
-                    window.location.href = "{{ url_for('catalog_by_category', category_name='') }}" + this.dataset.category;
-                }
-            });
-        });
 
         function filterProducts() {
             const searchTerm = document.getElementById('search-input').value.toLowerCase().trim();
-            const activeCategory = "{{ category_name | lower }}"; // Use the current category name from Flask
+            const activeCategory = "{{ category_name | lower }}";
             
             document.querySelectorAll('.product').forEach(product => {
                 const name = product.getAttribute('data-name');
                 const description = product.getAttribute('data-description');
-                const category = product.getAttribute('data-category'); // Already filtered by Flask for this page
                 
                 const matchesSearch = (name && name.includes(searchTerm)) || (description && description.includes(searchTerm));
                 
-                // Only filter by search term, category is already handled by the route
                 product.style.display = matchesSearch ? 'flex' : 'none';
             });
         }
 
-        updateCartButton();
-    </script>
-</body>
-</html>
-    ''',
-    products=products,
-    categories=categories,
-    category_name=category_name,
-    products_all=products_all, # Pass all products for JS lookup
-    repo_id=REPO_ID,
-    LOGO_URL=LOGO_URL
-    )
-
-@app.route('/product/<product_id>')
-def product_page(product_id):
-    data = load_data()
-    product = next((p for p in data.get('products', []) if p.get('id') == product_id), None)
-    categories = data.get('categories', [])
-
-    if product is None:
-        flash('Товар не найден.', 'error')
-        return redirect(url_for('catalog'))
-
-    return render_template_string('''
-<!DOCTYPE html>
-<html lang="ru">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ product.name }} - ZZIRIX</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
-    <style>''' + BASE_STYLE + '''</style>
-</head>
-<body>
-    <div class="container">
-        <div class="header">
-            <div class="header-info">
-                <img src="''' + LOGO_URL + '''" alt="Logo" class="header-logo">
-                <h1>Каталог ZZIRIX</h1>
-            </div>
-            <button class="theme-toggle" onclick="toggleTheme()">
-                <i class="fas fa-moon"></i>
-            </button>
-        </div>
-        {% with messages = get_flashed_messages(with_categories=true) %}
-          {% if messages %}
-            {% for category, message in messages %}
-              <div class="flash {{ category }}">{{ message }}</div>
-            {% endfor %}
-          {% endif %}
-        {% endwith %}
-        <div class="back-to-catalog">
-            <a href="{{ url_for('catalog_by_category', category_name=product.category | lower) }}" class="product-button" style="width: auto; padding: 8px 15px; font-size: 0.9rem;">&larr; Назад в категорию</a>
-        </div>
-        <div class="product-detail-page">
-            <h1>{{ product['name'] }}</h1>
-            <div class="swiper-container" style="max-width: 450px; margin: 0 auto 30px;">
-                <div class="swiper-wrapper">
-                    {% if product.get('photos') %}
-                    {% for photo in product['photos'] %}
-                    <div class="swiper-slide swiper-zoom-container" style="background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; border-radius: 10px;">
-                        {% if photo.endswith(('.mp4', '.mov', '.webm')) %}
-                            <video controls preload="metadata" style="max-width: 100%; max-height: 300px; object-fit: contain;"><source src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" type="video/mp4"></video>
-                        {% else %}
-                            <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" 
-                                 alt="{{ product['name'] }}" 
-                                 style="max-width: 100%; max-height: 300px; object-fit: contain;">
-                        {% endif %}
-                    </div>
-                    {% endfor %}
-                    {% else %}
-                    <div class="swiper-slide swiper-zoom-container" style="background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; border-radius: 10px;">
-                        <img src="https://via.placeholder.com/300x300?text=No+Image" alt="No Image">
-                    </div>
-                    {% endif %}
-                </div>
-                <div class="swiper-pagination"></div>
-                <div class="swiper-button-next"></div>
-                <div class="swiper-button-prev"></div>
-            </div>
-            <p><strong>Категория:</strong> <span style="color: var(--primary-color);">{{ product.get('category', 'Без категории') }}</span></p>
-            <p class="price">{{ "%.2f"|format(product['price']) }} с</p>
-            <p class="description"><strong>Описание:</strong> {{ product['description'] }}</p>
-            <p><strong>Доступные цвета:</strong> <span style="color: var(--secondary-text-color-light);">{{ product.get('colors', ['Нет цветов'])|join(', ') }}</span></p>
-            <p><strong>Доступные модели:</strong> <span style="color: var(--secondary-text-color-light);">{{ product.get('models', ['Нет моделей'])|join(', ') }}</span></p>
-            <div class="product-detail-actions">
-                <button class="product-button add-to-cart" onclick="openQuantityModal('{{ product.id }}')">В корзину</button>
-            </div>
-        </div>
-    </div>
-
-    <div id="quantityModal" class="modal">
-        <div class="modal-content">
-            <span class="close" onclick="closeModal('quantityModal')">×</span>
-            <h2>Укажите количество, цвет и модель</h2>
-            <input type="number" id="quantityInput" class="quantity-input" min="1" value="1">
-            <select id="colorSelect" class="color-select"></select>
-            <select id="modelSelect" class="model-select"></select>
-            <div class="modal-buttons">
-                <button class="product-button order-button" onclick="confirmAddToCart()">Добавить</button>
-            </div>
-        </div>
-    </div>
-
-    <div id="cartModal" class="modal">
-        <div class="modal-content">
-            <span class="close" onclick="closeModal('cartModal')">×</span>
-            <h2>Корзина</h2>
-            <div id="cartContent"></div>
-            <div style="margin-top: 20px; text-align: right;">
-                <strong style="font-size: 1.2rem;">Итого: <span id="cartTotal">0</span> с</strong>
-                <div class="modal-buttons">
-                    <button class="product-button clear-cart" onclick="clearCart()">Очистить</button>
-                    <button class="product-button order-button" onclick="orderViaWhatsApp()">Заказать</button>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <button id="cart-button" onclick="openCartModal()">
-        <i class="fas fa-shopping-cart"></i>
-        <span id="cart-count" class="cart-count">0</span>
-    </button>
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
-    <script>
-        const products = {{ data.products|tojson }};
-        let selectedProductId = null;
-
-        function toggleTheme() {
-            document.body.classList.toggle('dark-mode');
-            const icon = document.querySelector('.theme-toggle i');
-            icon.classList.toggle('fa-moon');
-            icon.classList.toggle('fa-sun');
-            localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
-        }
-
-        if (localStorage.getItem('theme') === 'dark') {
-            document.body.classList.add('dark-mode');
-            const icon = document.querySelector('.theme-toggle i');
-            if (icon) icon.classList.replace('fa-moon', 'fa-sun');
-        } else {
-            const icon = document.querySelector('.theme-toggle i');
-            if (icon) icon.classList.replace('fa-sun', 'fa-moon');
-        }
-
-        function closeModal(modalId) {
-            document.getElementById(modalId).style.display = "none";
-        }
-
-        function openQuantityModal(productId) {
+        function openProductDetailModal(productId) {
             selectedProductId = productId;
             const product = products.find(p => p.id === productId);
             if (!product) {
                 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 option = document.createElement('option');
-                option.value = 'Не указан';
-                option.text = 'Цвет не указан';
-                colorSelect.appendChild(option);
-            }
 
-            const modelSelect = document.getElementById('modelSelect');
-            modelSelect.innerHTML = '';
-            if (product.models && product.models.length > 0) {
-                product.models.forEach(model => {
-                    const option = document.createElement('option');
-                    option.value = model;
-                    option.text = model;
-                    modelSelect.appendChild(option);
+            document.getElementById('detailProductName').textContent = product.name;
+            document.getElementById('detailProductCategory').textContent = product.category || 'Без категории';
+            document.getElementById('detailProductPrice').textContent = `${product.price.toFixed(2)} с`;
+            document.getElementById('detailProductDescription').textContent = product.description;
+            document.getElementById('detailProductColors').textContent = product.colors && product.colors.length > 0 ? product.colors.join(', ') : 'Нет цветов';
+            document.getElementById('detailProductModels').textContent = product.models && product.models.length > 0 ? product.models.join(', ') : 'Нет моделей';
+            document.getElementById('detailAddToCartButton').onclick = () => openQuantityModal(product.id);
+
+            const mediaContainer = document.getElementById('detailProductMedia');
+            mediaContainer.innerHTML = '';
+            if (product.photos && product.photos.length > 0) {
+                product.photos.forEach(filename => {
+                    const slide = document.createElement('div');
+                    slide.className = 'swiper-slide swiper-zoom-container';
+                    slide.style = "display: flex; justify-content: center; align-items: center; border-radius: 10px;";
+                    
+                    const mediaUrl = `https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${filename}`;
+                    if (filename.endsWith(('.mp4', '.mov', '.webm'))) {
+                        slide.innerHTML = `<video controls preload="metadata" style="max-width: 100%; max-height: 350px; object-fit: contain;"><source src="${mediaUrl}" type="video/mp4"></video>`;
+                    } else {
+                        slide.innerHTML = `<img src="${mediaUrl}" alt="${product.name}" style="max-width: 100%; max-height: 350px; object-fit: contain;">`;
+                    }
+                    mediaContainer.appendChild(slide);
                 });
             } else {
-                const option = document.createElement('option');
-                option.value = 'Не указана';
-                option.text = 'Модель не указана';
-                modelSelect.appendChild(option);
+                const slide = document.createElement('div');
+                slide.className = 'swiper-slide swiper-zoom-container';
+                slide.style = "display: flex; justify-content: center; align-items: center; border-radius: 10px;";
+                slide.innerHTML = `<img src="https://via.placeholder.com/300x300?text=No+Image" alt="No Image">`;
+                mediaContainer.appendChild(slide);
             }
-
-            document.getElementById('quantityModal').style.display = 'block';
-            document.getElementById('quantityInput').value = 1;
-        }
-
-        function confirmAddToCart() {
-            if (selectedProductId === null) return;
-            const quantityInput = document.getElementById('quantityInput');
-            const quantity = parseInt(quantityInput.value) || 1;
-            const color = document.getElementById('colorSelect').value;
-            const model = document.getElementById('modelSelect').value;
             
-            if (quantity <= 0) {
-                alert("Укажите количество больше 0.");
-                quantityInput.focus();
-                return;
-            }
+            document.getElementById('productDetailModal').style.display = 'block';
             
-            let cart = JSON.parse(localStorage.getItem('cart') || '[]');
-            const product = products.find(p => p.id === selectedProductId);
-
-            // Generate a unique ID for the cart item based on product ID, color, and model
-            const cartItemId = `${product.id}-${color}-${model}`; 
-            const existingItem = cart.find(item => item.cartId === cartItemId);
-
-            if (existingItem) {
-                existingItem.quantity += quantity;
-            } else {
-                cart.push({
-                    cartId: cartItemId, // Unique ID for this specific combination in cart
-                    productId: product.id, // Original product ID
-                    name: product.name,
-                    price: product.price,
-                    photo: product.photos && product.photos.length > 0 ? product.photos[0] : '',
-                    quantity: quantity,
-                    color: color,
-                    model: model
-                });
+            if (detailSwiperInstance) {
+                detailSwiperInstance.destroy(true, true);
             }
-
-            localStorage.setItem('cart', JSON.stringify(cart));
-            closeModal('quantityModal');
-            updateCartButton();
-            alert(`"${product.name}" добавлен в корзину.`);
-        }
-
-        function updateCartButton() {
-            const cart = JSON.parse(localStorage.getItem('cart') || '[]');
-            const cartCount = cart.reduce((sum, item) => sum + item.quantity, 0);
-            document.getElementById('cart-count').textContent = cartCount;
-            document.getElementById('cart-button').style.display = cartCount > 0 ? 'flex' : 'none';
-        }
-
-        function openCartModal() {
-            const cart = JSON.parse(localStorage.getItem('cart') || '[]');
-            const cartContent = document.getElementById('cartContent');
-            let total = 0;
-
-            cartContent.innerHTML = cart.length === 0 ? '<p style="text-align: center; color: var(--secondary-text-color-light);">Корзина пуста</p>' : cart.map((item, index) => {
-                const itemTotal = item.price * item.quantity;
-                total += itemTotal;
-                const photoSrc = item.photo ? `https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${item.photo}` : 'https://via.placeholder.com/60x60?text=No+Image';
-                return `
-                    <div class="cart-item">
-                        <img src="${photoSrc}" alt="${item.name}">
-                        <div class="cart-item-details">
-                            <strong>${item.name}</strong>
-                            <p>${item.price.toFixed(2)} с × ${item.quantity} (Цвет: ${item.color}, Модель: ${item.model})</p>
-                        </div>
-                        <span class="cart-item-total">${itemTotal.toFixed(2)} с</span>
-                    </div>
-                `;
-            }).join('');
-
-            document.getElementById('cartTotal').textContent = total.toFixed(2);
-            document.getElementById('cartModal').style.display = 'block';
-        }
-
-        function orderViaWhatsApp() {
-            const cart = JSON.parse(localStorage.getItem('cart') || '[]');
-            if (cart.length === 0) {
-                alert("Корзина пуста!");
-                return;
-            }
-            let total = 0;
-            let orderText = "Здравствуйте, меня интересует заказ:%0A%0A";
-            cart.forEach((item, index) => {
-                const itemTotal = item.price * item.quantity;
-                total += itemTotal;
-                orderText += `${index + 1}. ${item.name}%0AКоличество: ${item.quantity}%0AЦена: ${item.price.toFixed(2)} с%0AЦвет: ${item.color}%0AМодель: ${item.model}%0A--%0A`;
-            });
-            orderText += `*Итого к оплате: ${total.toFixed(2)} с*%0A%0AЖду подтверждения заказа.`;
-            window.open(`https://api.whatsapp.com/send?phone=996705665777&text=${orderText}`, '_blank');
-            clearCart(); // Optionally clear cart after ordering
-        }
-
-        function clearCart() {
-            localStorage.removeItem('cart');
-            openCartModal();
-            updateCartButton();
-        }
-
-        window.onclick = function(event) {
-            if (event.target.classList.contains('modal')) {
-                event.target.style.display = "none";
-            }
-        }
-        
-        function initializeSwiper() {
-            const swiper = new Swiper('.swiper-container', {
+            detailSwiperInstance = new Swiper('#productDetailModal .swiper-container', {
                 slidesPerView: 1,
                 spaceBetween: 20,
                 loop: true,
                 grabCursor: true,
-                pagination: { el: '.swiper-pagination', clickable: true },
-                navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
+                pagination: { el: '#productDetailModal .swiper-pagination', clickable: true },
+                navigation: { nextEl: '#productDetailModal .swiper-button-next', prevEl: '#productDetailModal .swiper-button-prev' },
                 zoom: { maxRatio: 3 },
                 on: {
                     init: function () {
                         this.slides.forEach(slide => {
                             const img = slide.querySelector('img');
                             if (img && !img.complete) {
-                                img.onload = () => swiper.update();
+                                img.onload = () => detailSwiperInstance.update();
                             }
                             const video = slide.querySelector('video');
                             if (video) {
-                                video.onloadedmetadata = () => swiper.update();
+                                video.onloadedmetadata = () => detailSwiperInstance.update();
                             }
                         });
                     },
@@ -1785,18 +1661,20 @@ def product_page(product_id):
                     }
                 }
             });
+            detailSwiperInstance.update();
         }
-        initializeSwiper();
+
         updateCartButton();
     </script>
 </body>
 </html>
     ''',
-    product=product,
+    products=products,
     categories=categories,
+    category_name=category_name,
+    products_all=products_all,
     repo_id=REPO_ID,
-    LOGO_URL=LOGO_URL,
-    data=data # Pass full data for JS to get all products
+    LOGO_URL=LOGO_URL
     )
 
 @app.route('/admin', methods=['GET', 'POST'])
@@ -1933,7 +1811,6 @@ def admin():
                 uploads_dir = 'uploads'
                 os.makedirs(uploads_dir, exist_ok=True)
                 
-                # Delete old photos from HF if they exist
                 for old_filename in product_to_edit.get('photos', []):
                     try:
                         api.delete_file(path_in_repo=f"photos/{old_filename}", repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN_WRITE)
@@ -1975,7 +1852,6 @@ def admin():
             product_to_delete = next((p for p in products if p.get('id') == product_id), None)
             
             if product_to_delete:
-                # Delete associated photos from HF
                 for filename in product_to_delete.get('photos', []):
                     try:
                         api.delete_file(path_in_repo=f"photos/{filename}", repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN_WRITE)
@@ -1990,6 +1866,8 @@ def admin():
             flash('Ошибка: Товар не найден для удаления.', 'error')
             return redirect(url_for('admin'))
     
+    products.sort(key=lambda p: p['name'].lower())
+
     return render_template_string('''
     <!DOCTYPE html>
     <html lang="ru">
@@ -2042,7 +1920,7 @@ def admin():
             form {
                 background: var(--card-background-light);
                 padding: 30px;
-                border-radius: 20px;
+                border-radius: var(--border-radius-large);
                 box-shadow: var(--shadow-light);
                 margin-bottom: 30px;
                 transition: background 0.3s, box-shadow 0.3s;
@@ -2066,7 +1944,7 @@ def admin():
                 padding: 12px;
                 margin-bottom: 10px;
                 border: 1px solid var(--border-color-light);
-                border-radius: 10px;
+                border-radius: var(--border-radius-medium);
                 font-size: 1rem;
                 transition: all 0.3s ease;
                 background-color: var(--card-background-light);
@@ -2085,7 +1963,7 @@ def admin():
             button {
                 padding: 12px 22px;
                 border: none;
-                border-radius: 10px;
+                border-radius: var(--border-radius-medium);
                 background-color: var(--primary-color);
                 color: white;
                 font-weight: 500;
@@ -2114,7 +1992,7 @@ def admin():
             .product-item, .category-item {
                 background: var(--card-background-light);
                 padding: 20px;
-                border-radius: 18px;
+                border-radius: var(--border-radius-large);
                 box-shadow: var(--shadow-light);
                 transition: background 0.3s, box-shadow 0.3s;
             }
@@ -2143,7 +2021,7 @@ def admin():
                 margin-top: 20px;
                 padding: 20px;
                 background: var(--background-light);
-                border-radius: 15px;
+                border-radius: var(--border-radius-medium);
                 box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
             }
             body.dark-mode .edit-form {
@@ -2164,7 +2042,7 @@ def admin():
                 background-color: #ccc;
                 color: #555;
                 padding: 8px 12px;
-                border-radius: 8px;
+                border-radius: var(--border-radius-small);
                 font-size: 0.8rem;
                 margin-top: 0;
                 flex-shrink: 0;
@@ -2191,14 +2069,14 @@ def admin():
                 margin-top: 10px;
                 margin-bottom: 15px;
             }
-            .product-photos-preview img {
+            .product-photos-preview img, .product-photos-preview video {
                 max-width: 90px;
                 height: auto;
-                border-radius: 8px;
+                border-radius: var(--border-radius-small);
                 border: 1px solid var(--border-color-light);
                 box-shadow: 0 2px 8px rgba(0,0,0,0.05);
             }
-            body.dark-mode .product-photos-preview img {
+            body.dark-mode .product-photos-preview img, body.dark-mode .product-photos-preview video {
                 border-color: var(--border-color-dark);
                 box-shadow: 0 2px 8px rgba(0,0,0,0.15);
             }
@@ -2225,6 +2103,12 @@ def admin():
                 width: 100%;
                 max-width: 400px;
                 margin-left: 0;
+                border: 1px solid var(--border-color-light);
+                box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
+            }
+            body.dark-mode #admin-search-input {
+                border-color: var(--border-color-dark);
+                box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
             }
         </style>
     </head>
@@ -2340,7 +2224,7 @@ def admin():
                                    alt="{{ product['name'] }}"
                                    loading="lazy"
                                    controls
-                                   style="max-width: 90px; height: auto; border-radius: 8px; border: 1px solid var(--border-color-light); box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
+                                   style="max-width: 90px; height: auto; border-radius: var(--border-radius-small); border: 1px solid var(--border-color-light); box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
                             </video>
                         {% else %}
                             <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}?r={{ random.randint(1,1000) }}"
@@ -2452,7 +2336,7 @@ def admin():
 @app.route('/backup', methods=['POST'])
 def backup():
     try:
-        data = load_data() # Ensure latest data is loaded before saving/uploading
+        data = load_data()
         save_data(data)
         flash('Резервная копия успешно создана и загружена.', 'success')
         return redirect(url_for('admin'))
@@ -2464,7 +2348,7 @@ def backup():
 @app.route('/download', methods=['GET'])
 def download():
     try:
-        download_db_from_hf() # Ensure the latest version is downloaded before sending
+        download_db_from_hf()
         if os.path.exists(DATA_FILE):
             return send_file(DATA_FILE, as_attachment=True, mimetype='application/json', download_name='data_zzirix_backup.json')
         flash('Файл базы данных не найден после попытки скачивания.', 'error')
@@ -2481,7 +2365,7 @@ if __name__ == '__main__':
     logging.info("Начальная проверка и обновление структуры данных...")
     try:
         current_data = load_data()
-        save_data(current_data) # This will save the initialized structure and upload to HF
+        save_data(current_data)
         logging.info("Структура данных проверена и при необходимости обновлена.")
     except Exception as e:
         logging.error(f"Ошибка во время начальной проверки/обновления структуры данных: {e}")
@@ -2489,4 +2373,4 @@ if __name__ == '__main__':
     backup_thread = threading.Thread(target=periodic_backup, daemon=True)
     backup_thread.start()
     logging.info("Запуск Flask приложения...")
-    app.run(debug=True, host='0.0.0.0', port=7860)
+    app.run(debug=True, host='0.0.0.0', port=7860)