Update app.py

app.py

@@ -25,7 +25,11 @@ REPO_ID = "Kgshop/shaik"
 HF_TOKEN_WRITE = os.getenv("HF_TOKEN")
 HF_TOKEN_READ = os.getenv("HF_TOKEN_READ")
 
-STORE_ADDRESS = " Алматы , ТЦНовый Ялян , 2 этаж , сектор D , бутик 53-55 , Рынок Ялян , ряд G , 46 бутик "
+STORE_ADDRESSES = [
+    "ТЦ Новый Ялян: 2 этаж, сектор D, бутик 53-55",
+    "Рынок Ялян: ряд G, бутик 46"
+]
+
 
 CURRENCY_CODE = 'KZT'
 CURRENCY_NAME = 'Казахстанский тенге'
@@ -221,138 +225,152 @@ CATALOG_TEMPLATE = '''
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>SHAIK парфюм оптом и в розницу - Каталог</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="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
         <style>
             :root {
-                --primary-color: #E50914; 
-                --primary-dark: #B20710;
-                --surface-color: #141414;
-                --background-color: #000000;
-                --text-color: #E0E0E0;
-                --border-color: #2a2a2a;
+                --primary-color: #D4AF37; 
+                --primary-dark: #B8860B;
+                --surface-color: #1A1A1A;
+                --background-color: #121212;
+                --text-color: #F5F5F5;
+                --text-color-muted: #999;
+                --border-color: #333333;
+                --success-color: #28a745;
             }
             * { margin: 0; padding: 0; box-sizing: border-box; }
             body { 
                 font-family: 'Roboto', sans-serif; 
                 background: var(--background-color); 
                 color: var(--text-color); 
-                line-height: 1.5; 
-                transition: all 0.3s; 
+                line-height: 1.6; 
+                transition: background-color 0.3s; 
             }
-            
             .container { max-width: 100%; margin: 0 auto; padding: 0; }
-            .content-area { padding: 15px; }
+            .content-area { padding: 20px; }
 
-            .header { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; background: var(--surface-color); border-bottom: 1px solid var(--border-color); box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
-            .header h1 { font-size: 1.4rem; font-weight: 500; color: var(--primary-color); }
-            .logo-title-container img { height: 35px; width: 35px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 5px rgba(229, 9, 20, 0.5); }
+            .header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: rgba(18, 18, 18, 0.8); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 1000; }
+            .logo-title-container { display: flex; align-items: center; gap: 15px; }
+            .logo-title-container img { height: 45px; width: 45px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 10px rgba(212, 175, 55, 0.5); }
+            .header h1 { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; font-weight: 700; color: var(--text-color); }
             
-            .store-address { padding: 12px 15px; text-align: center; background-color: var(--surface-color); border-radius: 8px; box-shadow: 0 1px 3px rgba(255,255,255,0.1); font-size: 0.9rem; color: #ccc; margin: 15px; }
+            .store-addresses { padding: 20px; text-align: center; background-color: var(--surface-color); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.5); font-size: 0.95rem; color: var(--text-color-muted); margin: 20px; }
+            .store-addresses h3 { font-family: 'Cormorant Garamond', serif; color: var(--primary-color); font-size: 1.3rem; margin-bottom: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; }
+            .store-addresses p { margin: 5px 0; }
 
-            .search-container { padding: 0 15px 15px; }
-            #search-input { width: 100%; padding: 10px 15px; font-size: 1rem; border: 1px solid var(--border-color); border-radius: 20px; outline: none; transition: all 0.3s; background-color: var(--surface-color); color: var(--text-color); }
-            #search-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.3); }
+            .search-container { padding: 0 20px 20px; }
+            #search-input { width: 100%; padding: 12px 20px; font-size: 1rem; border: 1px solid var(--border-color); border-radius: 50px; outline: none; transition: all 0.3s; background-color: var(--surface-color); color: var(--text-color); }
+            #search-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2); }
             
-            .filters-container { margin: 0 15px 15px; display: flex; overflow-x: auto; gap: 8px; padding-bottom: 5px; scrollbar-width: none; }
+            .filters-container { margin: 0 20px 20px; display: flex; overflow-x: auto; gap: 10px; padding-bottom: 10px; scrollbar-width: none; -ms-overflow-style: none; }
             .filters-container::-webkit-scrollbar { display: none; }
-            .category-filter { padding: 8px 14px; border: 1px solid var(--border-color); border-radius: 20px; background-color: var(--surface-color); cursor: pointer; transition: all 0.2s ease; font-size: 0.85rem; font-weight: 400; color: #ccc; white-space: nowrap; }
-            .category-filter.active, .category-filter:hover { background-color: var(--primary-color); color: white; border-color: var(--primary-color); box-shadow: 0 2px 5px rgba(229, 9, 20, 0.3); }
+            .category-filter { padding: 8px 18px; border: 1px solid var(--border-color); border-radius: 50px; background-color: transparent; cursor: pointer; transition: all 0.3s ease; font-size: 0.9rem; font-weight: 400; color: var(--text-color-muted); white-space: nowrap; }
+            .category-filter.active, .category-filter:hover { background-color: var(--primary-color); color: #000; border-color: var(--primary-color); font-weight: 500; box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3); transform: translateY(-2px); }
 
-            .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 10px 15px 120px; }
-            @media (min-width: 600px) { .products-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px; } }
+            .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; padding: 0 20px 120px; }
+            @media (min-width: 600px) { .products-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px; } }
 
-            .product { background: var(--surface-color); border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); transition: transform 0.2s ease, box-shadow 0.2s ease; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; height: 100%; position: relative; border: 1px solid var(--border-color);}
-            .product:active { transform: scale(0.98); }
+            .product { background: var(--surface-color); border-radius: 16px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); transition: all 0.3s ease; overflow: hidden; display: flex; flex-direction: column; height: 100%; position: relative; border: 1px solid var(--border-color); }
+            .product:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(212, 175, 55, 0.15); border-color: var(--primary-color); }
             
             .product-image { width: 100%; aspect-ratio: 1 / 1; background-color: #000; display: flex; justify-content: center; align-items: center; padding: 10px; }
-            .product-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
-            .product-info { padding: 10px; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
-            .product h2 { font-size: 0.95rem; font-weight: 500; margin: 0 0 5px 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-color); }
-            .product-price { font-size: 1.1rem; color: var(--primary-color); font-weight: 700; text-align: center; margin: 5px 0; }
-            .product-price .from-text { font-size: 0.8rem; color: #aaa; font-weight: 400; }
+            .product-image img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.3s ease; }
+            .product:hover .product-image img { transform: scale(1.05); }
+            .product-info { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; text-align: center; }
+            .product h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 600; margin: 0 0 8px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-color); }
+            .product-price { font-size: 1.2rem; color: var(--primary-color); font-weight: 700; margin: 5px 0; }
+            .product-price .from-text { font-size: 0.8rem; color: var(--text-color-muted); font-weight: 400; }
             .product-description { display: none; }
-            .product-actions { padding: 0 10px 10px 10px; display: flex; flex-direction: column; gap: 6px; }
+            .product-actions { padding: 0 15px 15px; }
             
-            .product-button { display: block; width: 100%; padding: 8px; border: none; border-radius: 8px; background-color: var(--primary-color); color: white; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; text-align: center; text-decoration: none; }
-            .product-button:hover { background-color: var(--primary-dark); }
-            .product-button i { margin-right: 5px; }
-
-            #cart-button { position: fixed; bottom: 15px; right: 15px; background-color: var(--primary-color); color: white; border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 1.3rem; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(229, 9, 20, 0.5); z-index: 1000; }
-            #cart-button span { position: absolute; top: -5px; right: -5px; background-color: #007AFF; color: white; border-radius: 50%; padding: 2px 6px; font-size: 0.7rem; font-weight: bold; min-width: 20px; text-align: center; }
+            .product-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 10px; border: none; border-radius: 50px; background-color: var(--primary-color); color: #000; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; }
+            .product-button:hover { background-color: var(--primary-dark); box-shadow: 0 4px 10px rgba(212, 175, 55, 0.4); }
+            .product-button i { margin-right: 8px; }
+
+            .fab { position: fixed; background-color: var(--primary-color); color: #000; border: none; border-radius: 50%; width: 55px; height: 55px; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4); z-index: 1000; transition: transform 0.2s ease; }
+            .fab:hover { transform: scale(1.1); }
+            #cart-button { bottom: 20px; right: 20px; display: none; }
+            #cart-button span { position: absolute; top: -2px; right: -2px; background-color: #dc3545; color: white; border-radius: 50%; padding: 3px 7px; font-size: 0.75rem; font-weight: bold; min-width: 22px; text-align: center; }
             
-            .modal { display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); backdrop-filter: blur(5px); overflow-y: auto; }
-            .modal-content { background: var(--surface-color); margin: 5% auto; padding: 20px; border-radius: 12px; width: 95%; max-width: 600px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); animation: slideIn 0.3s ease-out; position: relative; border: 1px solid var(--border-color); }
-            @keyframes slideIn { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+            .modal { display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); backdrop-filter: blur(8px); overflow-y: auto; }
+            .modal-content { background: var(--surface-color); margin: 5% auto; padding: 25px; border-radius: 16px; width: 95%; max-width: 600px; box-shadow: 0 10px 40px rgba(0,0,0,0.7); animation: slideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; border: 1px solid var(--border-color); }
+            @keyframes slideIn { from { transform: translateY(-40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
             
-            .close { position: absolute; top: 10px; right: 15px; font-size: 1.8rem; color: #aaa; cursor: pointer; transition: color 0.3s; line-height: 1; }
-            .close:hover { color: var(--primary-color); }
+            .close { position: absolute; top: 15px; right: 20px; font-size: 2rem; color: var(--text-color-muted); cursor: pointer; transition: color 0.3s, transform 0.3s; line-height: 1; }
+            .close:hover { color: var(--primary-color); transform: rotate(90deg); }
             
-            .modal-content h2 { margin-top: 0; margin-bottom: 20px; color: var(--primary-color); font-size: 1.5rem; display: flex; align-items: center; gap: 10px;}
+            .modal-content h2 { font-family: 'Cormorant Garamond', serif; margin-top: 0; margin-bottom: 25px; color: var(--primary-color); font-size: 1.8rem; display: flex; align-items: center; gap: 12px;}
             
-            .cart-item { display: grid; grid-template-columns: 60px 1fr auto 20px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-color); }
+            .cart-item { display: grid; grid-template-columns: 65px 1fr auto 25px; gap: 15px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--border-color); }
             .cart-item:last-child { border-bottom: none; }
-            .cart-item img { width: 60px; height: 60px; object-fit: contain; border-radius: 6px; background-color: #000; padding: 5px; }
-            .cart-item-details { grid-column: 2; }
-            .cart-item-details strong { display: block; margin-bottom: 3px; font-size: 1rem; }
-            .cart-item-price { font-size: 0.85rem; color: #aaa; }
-            .cart-item-total { font-weight: bold; text-align: right; grid-column: 3; font-size: 0.95rem;}
-            .cart-item-remove { background:none; border:none; color:#FF3B30; cursor:pointer; font-size: 1.2em; padding: 5px; line-height: 1; }
+            .cart-item img { width: 65px; height: 65px; object-fit: contain; border-radius: 8px; background-color: #000; padding: 5px; }
+            .cart-item-details strong { display: block; margin-bottom: 4px; font-size: 1.05rem; }
+            .cart-item-price { font-size: 0.9rem; color: var(--text-color-muted); }
+            .cart-item-total { font-weight: bold; text-align: right; font-size: 1rem; color: var(--primary-color); }
+            .cart-item-remove { background:none; border:none; color:#FF453A; cursor:pointer; font-size: 1.5rem; line-height: 1; transition: color 0.2s; }
+            .cart-item-remove:hover { color: #ff0000; }
             
-            .quantity-input, .variant-select { width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 1rem; margin-top: 5px; margin-bottom: 15px; box-sizing: border-box; background-color: var(--background-color); color: var(--text-color); }
-
-            .cart-summary { margin-top: 20px; text-align: right; border-top: 1px solid var(--border-color); padding-top: 15px; }
-            .cart-summary strong { font-size: 1.2rem; color: var(--primary-color); }
-            .cart-actions { margin-top: 20px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
-            .cart-actions .product-button { flex-grow: 1; padding: 10px; }
-            .clear-cart { background-color: #555; }
-            .clear-cart:hover { background-color: #333; }
-            .formulate-order-button { background-color: var(--primary-color); }
-            .formulate-order-button:hover { background-color: var(--primary-dark); }
+            .quantity-input, .variant-select { width: 100%; padding: 12px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 1rem; margin-top: 8px; margin-bottom: 20px; box-sizing: border-box; background-color: var(--background-color); color: var(--text-color); }
+
+            .cart-summary { margin-top: 25px; text-align: right; border-top: 1px solid var(--border-color); padding-top: 20px; }
+            .cart-summary strong { font-size: 1.4rem; color: var(--primary-color); }
+            .cart-actions { margin-top: 25px; display: flex; justify-content: space-between; gap: 12px; }
+            .cart-actions .product-button { flex-grow: 1; }
+            .clear-cart { background: #444; color: var(--text-color); }
+            .clear-cart:hover { background: #555; }
             
-            .notification { position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%); background-color: var(--primary-color); color: white; padding: 10px 20px; border-radius: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.4); z-index: 1002; opacity: 0; transition: opacity 0.5s ease; font-size: 0.9rem;}
-            .notification.show { opacity: 1;}
-            .no-results-message { grid-column: 1 / -1; text-align: center; padding: 40px; font-size: 1.1rem; color: #aaa; }
-            .top-product-indicator { position: absolute; top: 5px; right: 5px; background-color: rgba(229, 9, 20, 0.8); color: white; padding: 2px 6px; font-size: 0.7rem; border-radius: 4px; font-weight: bold; z-index: 10; }
+            .notification { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background-color: var(--primary-color); color: #000; padding: 12px 25px; border-radius: 50px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); z-index: 1002; opacity: 0; transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); font-size: 0.95rem; font-weight: 500; }
+            .notification.show { opacity: 1; bottom: 90px; }
+            .no-results-message { grid-column: 1 / -1; text-align: center; padding: 50px; font-size: 1.2rem; color: var(--text-color-muted); }
+            .top-product-indicator { position: absolute; top: 10px; right: 10px; background: linear-gradient(135deg, #D4AF37, #B8860B); color: #000; padding: 3px 8px; font-size: 0.7rem; border-radius: 50px; font-weight: bold; z-index: 10; display: flex; align-items: center; gap: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
             
-            #whatsapp-fab { position: fixed; bottom: 15px; left: 15px; background-color: #25D366; color: white; border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 1.8rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(37, 211, 102, 0.4); z-index: 1000; }
-            #whatsapp-modal { display: none; position: fixed; bottom: 75px; left: 15px; background-color: var(--surface-color); border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); z-index: 1001; overflow: hidden; border: 1px solid var(--border-color); }
-            #whatsapp-modal a { display: flex; align-items: center; gap: 12px; padding: 12px 18px; text-decoration: none; color: var(--text-color); transition: background-color 0.2s; }
+            #whatsapp-fab { bottom: 20px; left: 20px; background-color: #25D366; color: white; }
+            #whatsapp-modal { display: none; position: fixed; bottom: 85px; left: 20px; background-color: var(--surface-color); border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.6); z-index: 1001; overflow: hidden; border: 1px solid var(--border-color); animation: fadeIn 0.3s; }
+            @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+            #whatsapp-modal a { display: flex; align-items: center; gap: 15px; padding: 15px 20px; text-decoration: none; color: var(--text-color); transition: background-color 0.2s; }
             #whatsapp-modal a:first-child { border-bottom: 1px solid var(--border-color); }
-            #whatsapp-modal a:hover { background-color: rgba(255,255,255,0.1); }
-            #whatsapp-modal i { color: #25D366; font-size: 1.5rem; }
+            #whatsapp-modal a:hover { background-color: rgba(255,255,255,0.05); }
+            #whatsapp-modal i { color: #25D366; font-size: 1.6rem; }
         </style>
     </head>
     <body>
         <div class="container">
-             <div class="header">
-                 <div class="logo-title-container" style="display: flex; align-items: center; gap: 10px;">
-                    <img src="https://huggingface.co/spaces/Kgshop/mobilnymir/resolve/main/IMG_20251019_120056_121.jpg" alt="SHAIK Logo">
-                    <h1>SHAIK парфюм</h1>
+             <header class="header">
+                 <div class="logo-title-container">
+                    <img src="https://huggingface.co/spaces/Shaik-parfume/app/resolve/main/icon.png" alt="SHAIK Logo">
+                    <h1>SHAIK Parfum</h1>
                 </div>
+            </header>
+
+            <div class="store-addresses">
+                <h3><i class="fas fa-map-marker-alt"></i> Наши адреса в г. Алматы</h3>
+                {% for address in store_addresses %}
+                    <p>{{ address }}</p>
+                {% endfor %}
             </div>
 
-            <div class="store-address">Наш адрес: {{ store_address }}</div>
 
             <div class="search-container">
-                <input type="text" id="search-input" placeholder="Поиск по названию...">
+                <input type="text" id="search-input" placeholder="Поиск по названию или описанию...">
             </div>
 
             <div class="filters-container">
-                <button class="category-filter active" data-category="all">Все категории</button>
+                <button class="category-filter active" data-category="all">Все</button>
                 {% for category in categories %}
                 <button class="category-filter" data-category="{{ category }}">{{ category }}</button>
                 {% endfor %}
             </div>
 
-            <div class="products-grid" id="products-grid">
+            <main class="products-grid" id="products-grid">
                 {% for product in products %}
                 <div class="product"
                      data-name="{{ product['name']|lower }}"
                      data-description="{{ product.get('description', '')|lower }}"
                      data-category="{{ product.get('category', 'Без категории') }}">
                      {% if product.get('is_top', False) %}
-                        <span class="top-product-indicator"><i class="fas fa-star"></i> Топ</span>
+                        <span class="top-product-indicator"><i class="fas fa-star fa-xs"></i> Топ</span>
                      {% endif %}
                     <div class="product-image" onclick="openModal({{ loop.index0 }})" style="cursor: pointer;">
                         {% if product.get('photos') and product['photos']|length > 0 %}
@@ -372,11 +390,10 @@ CATALOG_TEMPLATE = '''
                                -
                            {% endif %}
                         </div>
-                        <p class="product-description">{{ product.get('description', '')[:50] }}{% if product.get('description', '')|length > 50 %}...{% endif %}</p>
                     </div>
                     <div class="product-actions">
-                        <button class="product-button add-to-cart" onclick="openQuantityModal({{ loop.index0 }})">
-                           <i class="fas fa-cart-plus"></i> В корзину
+                        <button class="product-button" onclick="openQuantityModal({{ loop.index0 }})">
+                           <i class="fas fa-shopping-bag"></i> В корзину
                         </button>
                     </div>
                 </div>
@@ -384,55 +401,55 @@ CATALOG_TEMPLATE = '''
                  {% if not products %}
                  <p class="no-results-message">Товары пока не добавлены.</p>
                  {% endif %}
-            </div>
+            </main>
         </div>
 
         <div id="productModal" class="modal">
             <div class="modal-content">
-                <span class="close" onclick="closeModal('productModal')" aria-label="Закрыть">×</span>
+                <span class="close" onclick="closeModal('productModal')" aria-label="Закрыть">&times;</span>
                 <div id="modalContent">Загрузка...</div>
             </div>
         </div>
 
         <div id="quantityModal" class="modal">
             <div class="modal-content">
-                <span class="close" onclick="closeModal('quantityModal')" aria-label="Закрыть">×</span>
-                <h2>Укажите детали заказа</h2>
+                <span class="close" onclick="closeModal('quantityModal')" aria-label="Закрыть">&times;</span>
+                <h2>Укажите детали</h2>
                 <label for="variantSelect">Вариант:</label>
                 <select id="variantSelect" class="variant-select"></select>
 
                 <label for="quantityInput">Количество:</label>
                 <input type="number" id="quantityInput" class="quantity-input" min="1" value="1">
                 
-                <button class="product-button add-to-cart" onclick="confirmAddToCart()"><i class="fas fa-check"></i> Добавить в корзину</button>
+                <button class="product-button" onclick="confirmAddToCart()"><i class="fas fa-check"></i> Добавить в корзину</button>
             </div>
         </div>
 
         <div id="cartModal" class="modal">
             <div class="modal-content">
-                <span class="close" onclick="closeModal('cartModal')" aria-label="Закрыть">×</span>
+                <span class="close" onclick="closeModal('cartModal')" aria-label="Закрыть">&times;</span>
                 <h2><i class="fas fa-shopping-cart"></i> Ваша корзина</h2>
-                <div id="cartContent"><p style="text-align: center; padding: 20px;">Ваша корзина пуста.</p></div>
+                <div id="cartContent"><p style="text-align: center; padding: 20px 0;">Ваша корзина пуста.</p></div>
                 <div class="cart-summary">
                     <strong>Итого: <span id="cartTotal">0.00</span> {{ currency_code }}</strong>
                 </div>
                 <div class="cart-actions">
                     <button class="product-button clear-cart" onclick="clearCart()">
-                       <i class="fas fa-trash"></i> Очистить корзину
+                       <i class="fas fa-trash"></i> Очистить
                     </button>
                     <button class="product-button formulate-order-button" onclick="formulateOrder()">
-                       <i class="fas fa-file-alt"></i> Сформировать заказ
+                       <i class="fas fa-file-alt"></i> Оформить заказ
                     </button>
                 </div>
             </div>
         </div>
 
-        <button id="cart-button" onclick="openCartModal()" aria-label="Открыть корзину">
+        <button id="cart-button" class="fab" onclick="openCartModal()" aria-label="Открыть корзину">
            <i class="fas fa-shopping-cart"></i>
            <span id="cart-count">0</span>
         </button>
 
-        <button id="whatsapp-fab" onclick="toggleWhatsAppModal()"><i class="fab fa-whatsapp"></i></button>
+        <button id="whatsapp-fab" class="fab" onclick="toggleWhatsAppModal()"><i class="fab fa-whatsapp"></i></button>
         <div id="whatsapp-modal">
             <a href="https://api.whatsapp.com/send?phone=77762021169" target="_blank" rel="noopener noreferrer">
                 <i class="fab fa-whatsapp"></i>
@@ -491,10 +508,10 @@ CATALOG_TEMPLATE = '''
             function initializeSwiper() {
                 new Swiper('#productModal .swiper-container', {
                     slidesPerView: 1, spaceBetween: 20, loop: true, grabCursor: true,
-                    pagination: { el: '.swiper-pagination', clickable: true },
+                    pagination: { el: '.swiper-pagination', clickable: true, dynamicBullets: true },
                     navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
                     zoom: { maxRatio: 3, containerClass: 'swiper-zoom-container' },
-                    autoplay: { delay: 5000, disableOnInteraction: true },
+                    autoplay: { delay: 4000, disableOnInteraction: false },
                 });
             }
 
@@ -586,13 +603,13 @@ CATALOG_TEMPLATE = '''
                 let total = 0;
 
                 if (cart.length === 0) {
-                    cartContent.innerHTML = '<p style="text-align: center; padding: 20px;">Ваша корзина пуста.</p>';
+                    cartContent.innerHTML = '<p style="text-align: center; padding: 20px 0;">Ваша корзина пуста.</p>';
                     cartTotalElement.textContent = '0.00';
                 } else {
                     cartContent.innerHTML = cart.map(item => {
                         const itemTotal = item.price * item.quantity;
                         total += itemTotal;
-                        const photoUrl = item.photo ? `https://huggingface.co/datasets/${repoId}/resolve/main/photos/${item.photo}` : 'https://via.placeholder.com/60x60.png?text=N/A';
+                        const photoUrl = item.photo ? `https://huggingface.co/datasets/${repoId}/resolve/main/photos/${item.photo}` : 'https://via.placeholder.com/65x65.png?text=N/A';
                         
                         return `
                             <div class="cart-item">
@@ -602,8 +619,8 @@ CATALOG_TEMPLATE = '''
                                     <p class="cart-item-price">Вариант: ${item.variantName}</p>
                                     <p class="cart-item-price">${item.price.toFixed(2)} ${currencyCode} × ${item.quantity}</p>
                                 </div>
-                                <span class="cart-item-total">${itemTotal.toFixed(2)} ${currencyCode}</span>
-                                <button class="cart-item-remove" onclick="removeFromCart('${item.id}')" title="Удалить товар">×</button>
+                                <span class="cart-item-total">${itemTotal.toFixed(2)}</span>
+                                <button class="cart-item-remove" onclick="removeFromCart('${item.id}')" title="Удалить товар">&times;</button>
                             </div>`;
                     }).join('');
                     cartTotalElement.textContent = total.toFixed(2);
@@ -748,8 +765,8 @@ CATALOG_TEMPLATE = '''
 
 PRODUCT_DETAIL_TEMPLATE = '''
     <div style="padding: 10px;">
-        <h2 style="font-size: 1.6rem; font-weight: 600; margin-bottom: 15px; text-align: center; color: var(--primary-color);">{{ product['name'] }}</h2>
-        <div class="swiper-container" style="max-width: 450px; margin: 0 auto 20px; border-radius: 10px; overflow: hidden;">
+        <h2 style="font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 700; margin-bottom: 20px; text-align: center; color: var(--primary-color);">{{ product['name'] }}</h2>
+        <div class="swiper-container" style="max-width: 450px; margin: 0 auto 25px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-color);">
             <div class="swiper-wrapper">
                 {% if product.get('photos') and product['photos']|length > 0 %}
                     {% for photo in product['photos'] %}
@@ -768,30 +785,33 @@ PRODUCT_DETAIL_TEMPLATE = '''
                 {% endif %}
             </div>
             {% if product.get('photos') and product['photos']|length > 1 %}
-            <div class="swiper-pagination" style="position: relative; bottom: 5px;"></div>
+            <div class="swiper-pagination" style="position: relative; bottom: 5px; margin-top: 10px;"></div>
             <div class="swiper-button-next" style="color: var(--primary-color);"></div>
             <div class="swiper-button-prev" style="color: var(--primary-color);"></div>
             {% endif %}
         </div>
 
-        <div style="margin-top: 20px; font-size: 1rem; line-height: 1.7; padding: 0 10px;">
+        <div style="font-size: 1rem; line-height: 1.7; padding: 0 10px;">
             <p><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
             {% if product.get('variants') and product.variants|length > 0 %}
-                <p style="font-size: 1.2rem; font-weight: bold; color: var(--primary-color);">
-                    <strong>Цена:</strong> от {{ "%.2f"|format(product.variants|map(attribute='price')|min) }} {{ currency_code }}
+                <p style="font-size: 1.4rem; font-weight: bold; color: var(--primary-color); margin: 15px 0;">
+                    Цена: от {{ "%.2f"|format(product.variants|map(attribute='price')|min) }} {{ currency_code }}
                 </p>
                 <p><strong>Доступные варианты:</strong></p>
-                <ul style="list-style: none; padding-left: 10px;">
+                <ul style="list-style: none; padding-left: 0;">
                 {% for variant in product.variants %}
-                    <li>- {{ variant.name }}: <strong>{{ "%.2f"|format(variant.price) }} {{ currency_code }}</strong></li>
+                    <li style="padding: 5px 0; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between;">
+                        <span>- {{ variant.name }}</span>
+                        <strong>{{ "%.2f"|format(variant.price) }} {{ currency_code }}</strong>
+                    </li>
                 {% endfor %}
                 </ul>
             {% endif %}
-            <p><strong>Описание:</strong><br> {{ product.get('description', 'Описание отсутствует.')|replace('\\n', '<br>')|safe }}</p>
+            <p style="margin-top: 20px;"><strong>Описание:</strong><br> {{ product.get('description', 'Описание отсутствует.')|replace('\\n', '<br>')|safe }}</p>
         </div>
-        <div style="padding: 10px; text-align: center;">
-            <button class="product-button add-to-cart" onclick="closeModal('productModal'); openQuantityModal({{ products_index }})" style="margin-top: 15px;">
-               <i class="fas fa-cart-plus"></i> Добавить в корзину
+        <div style="padding: 20px 10px 10px; text-align: center;">
+            <button class="product-button" onclick="closeModal('productModal'); openQuantityModal({{ products_index }})" style="margin-top: 15px; padding: 12px 25px; font-size: 1rem;">
+               <i class="fas fa-shopping-bag"></i> Добавить в корзину
             </button>
         </div>
     </div>
@@ -804,44 +824,50 @@ ORDER_TEMPLATE = '''
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Заказ №{{ order.id }} - SHAIK парфюм</title>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
     <style>
         :root {
-            --primary-color: #E50914; 
-            --primary-dark: #B20710;
-            --surface-color: #141414;
-            --background-color: #000000;
-            --text-color: #E0E0E0;
-            --border-color: #2a2a2a;
+            --primary-color: #D4AF37; 
+            --primary-dark: #B8860B;
+            --surface-color: #1A1A1A;
+            --background-color: #121212;
+            --text-color: #F5F5F5;
+            --text-color-muted: #999;
+            --border-color: #333333;
         }
-        body { font-family: 'Roboto', sans-serif; background: var(--background-color); color: var(--text-color); line-height: 1.5; padding: 15px; }
-        .container { max-width: 800px; margin: 15px auto; padding: 25px; background: var(--surface-color); border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); border: 1px solid var(--border-color); }
-        h1 { text-align: center; color: var(--primary-color); margin-bottom: 20px; font-size: 1.6rem; font-weight: 500; }
-        h2 { color: var(--primary-color); margin-top: 25px; margin-bottom: 12px; font-size: 1.3rem; border-bottom: 1px solid var(--border-color); padding-bottom: 5px;}
-        .order-meta { font-size: 0.85rem; color: #888; margin-bottom: 15px; text-align: center; }
-        .order-item { display: grid; grid-template-columns: 60px 1fr auto; gap: 15px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-color); }
+        body { font-family: 'Roboto', sans-serif; background: var(--background-color); color: var(--text-color); line-height: 1.6; padding: 15px; }
+        .container { max-width: 800px; margin: 20px auto; padding: 30px; background: var(--surface-color); border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); border: 1px solid var(--border-color); }
+        h1, h2 { font-family: 'Cormorant Garamond', serif; color: var(--primary-color); }
+        h1 { text-align: center; margin-bottom: 25px; font-size: 2.2rem; font-weight: 700; }
+        h2 { margin-top: 30px; margin-bottom: 15px; font-size: 1.6rem; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; display: flex; align-items: center; gap: 10px; }
+        .order-meta { font-size: 0.9rem; color: var(--text-color-muted); margin-bottom: 20px; text-align: center; }
+        .order-item { display: grid; grid-template-columns: 60px 1fr auto; gap: 15px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--border-color); }
         .order-item:last-child { border-bottom: none; }
-        .order-item img { width: 60px; height: 60px; object-fit: contain; border-radius: 6px; background-color: #000; padding: 5px; border: 1px solid #333;}
-        .item-details strong { display: block; margin-bottom: 3px; font-size: 1rem; color: var(--text-color);}
-        .item-details span { font-size: 0.85rem; color: #aaa; display: block;}
-        .item-total { font-weight: bold; text-align: right; font-size: 1rem; color: var(--primary-color);}
-        .order-summary { margin-top: 25px; padding-top: 15px; border-top: 2px solid var(--primary-color); text-align: right; }
-        .order-summary p { margin-bottom: 8px; font-size: 1rem; }
-        .order-summary strong { font-size: 1.2rem; color: var(--primary-color); }
-        .customer-info { margin-top: 25px; background-color: #220204; padding: 15px; border-radius: 8px; border: 1px solid var(--primary-dark);}
-        .customer-info p { margin-bottom: 6px; font-size: 0.95rem; }
-        .customer-info strong { color: var(--primary-color); }
-        .actions { margin-top: 25px; text-align: center; }
-        .button { padding: 10px 20px; border: none; border-radius: 8px; background-color: var(--primary-color); color: white; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease; font-size: 1rem; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
-        .button:hover { background-color: var(--primary-dark); }
-        .not-found { text-align: center; color: #FF3B30; font-size: 1.2rem; padding: 40px 0;}
+        .order-item img { width: 60px; height: 60px; object-fit: contain; border-radius: 8px; background-color: #000; padding: 5px; border: 1px solid #444;}
+        .item-details strong { display: block; margin-bottom: 4px; font-size: 1.05rem; color: var(--text-color);}
+        .item-details span { font-size: 0.9rem; color: var(--text-color-muted); display: block;}
+        .item-total { font-weight: bold; text-align: right; font-size: 1.1rem; color: var(--primary-color);}
+        .order-summary { margin-top: 30px; padding-top: 20px; border-top: 2px solid var(--primary-color); text-align: right; }
+        .order-summary p { margin-bottom: 10px; font-size: 1.1rem; }
+        .order-summary strong { font-size: 1.5rem; color: var(--primary-color); }
+        .customer-info { margin-top: 30px; background-color: rgba(212, 175, 55, 0.05); padding: 20px; border-radius: 12px; border: 1px solid var(--primary-color);}
+        .customer-info p { margin-bottom: 8px; font-size: 1rem; }
+        .customer-info strong { color: var(--text-color); }
+        .actions { margin-top: 30px; text-align: center; }
+        .button { padding: 12px 25px; border: none; border-radius: 50px; background-color: #25D366; color: white; font-weight: 500; cursor: pointer; transition: all 0.3s ease; font-size: 1.1rem; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3); }
+        .button:hover { background-color: #1DA851; transform: translateY(-2px); }
+        .catalog-link { display: block; text-align: center; margin-top: 25px; color: var(--primary-color); text-decoration: none; transition: color 0.2s; }
+        .catalog-link:hover { color: var(--primary-dark); }
+        .not-found { text-align: center; color: #ff453a; font-size: 1.2rem; padding: 40px 0;}
     </style>
 </head>
 <body>
     <div class="container">
         {% if order %}
-            <h1><i class="fas fa-receipt"></i> Ваш Заказ №{{ order.id }}</h1>
+            <h1><i class="fas fa-receipt"></i> Заказ №{{ order.id }}</h1>
             <p class="order-meta">Дата создания: {{ order.created_at }}</p>
 
             <h2><i class="fas fa-shopping-bag"></i> Товары в заказе</h2>
@@ -863,21 +889,19 @@ ORDER_TEMPLATE = '''
 
             <div class="order-summary">
                 <p>Общая сумма товаров: <strong>{{ "%.2f"|format(order.total_price) }} {{ currency_code }}</strong></p>
-                <p><strong>ИТОГО К ОПЛАТЕ: {{ "%.2f"|format(order.total_price) }} {{ currency_code }}</strong></p>
             </div>
 
             <div class="customer-info">
-                 <h2><i class="fas fa-info-circle"></i> Статус заказа</h2>
-                 <p>Ваш текущий статус: <strong>{{ status_map_ru.get(order.status, order.status) }}</strong></p>
-                 <p>Этот заказ был оформлен без входа в систему.</p>
-                 <p>Пожалуйста, свяжитесь с нами по WhatsApp для подтверждения и уточнения деталей.</p>
+                 <h2><i class="fas fa-info-circle"></i> Статус и подтверждение</h2>
+                 <p>Текущий статус: <strong>{{ status_map_ru.get(order.status, order.status) }}</strong></p>
+                 <p>Пожалуйста, свяжитесь с нами по WhatsApp для подтверждения заказа и уточнения деталей доставки и оплаты.</p>
             </div>
 
             <div class="actions">
-                 <button class="button" onclick="sendOrderViaWhatsApp()"><i class="fab fa-whatsapp"></i> Отправить заказ</button>
+                 <button class="button" onclick="sendOrderViaWhatsApp()"><i class="fab fa-whatsapp"></i> Связаться с нами</button>
             </div>
 
-            <a href="{{ url_for('catalog') }}" class="catalog-link" style="display: block; text-align: center; margin-top: 20px; color: var(--primary-color); text-decoration: none;">← Вернуться в каталог</a>
+            <a href="{{ url_for('catalog') }}" class="catalog-link">&larr; Вернуться в каталог</a>
 
             <script>
                 function sendOrderViaWhatsApp() {
@@ -888,7 +912,7 @@ ORDER_TEMPLATE = '''
                     let message = `Здравствуйте! Хочу подтвердить свой заказ на SHAIK парфюм:%0A%0A`;
                     message += `*Номер заказа:* ${orderId}%0A`;
                     message += `*Ссылка на заказ:* ${encodeURIComponent(orderUrl)}%0A%0A`;
-                    message += `Пожалуйста, свяжитесь со мной для уточнения деталей оплаты и доставки.`;
+                    message += `Пожалуйста, свяжитесь со мной для уточнения деталей.`;
 
                     const whatsappUrl = `https://api.whatsapp.com/send?phone=${whatsappNumber}&text=${message}`;
                     window.open(whatsappUrl, '_blank');
@@ -896,9 +920,9 @@ ORDER_TEMPLATE = '''
             </script>
 
         {% else %}
-            <h1 style="color: #FF3B30;"><i class="fas fa-exclamation-triangle"></i> Ошибка</h1>
+            <h1 style="color: #ff453a;"><i class="fas fa-exclamation-triangle"></i> Ошибка</h1>
             <p class="not-found">Заказ с таким ID не найден.</p>
-            <a href="{{ url_for('catalog') }}" class="catalog-link" style="display: block; text-align: center; margin-top: 20px; color: var(--primary-color); text-decoration: none;">← Вернуться в каталог</a>
+            <a href="{{ url_for('catalog') }}" class="catalog-link">&larr; Вернуться в каталог</a>
         {% endif %}
     </div>
 </body>
@@ -912,16 +936,19 @@ ADMIN_TEMPLATE = '''
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Админ-панель - SHAIK парфюм</title>
-        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
         <style>
             :root {
-                --primary-color: #E50914; 
-                --primary-dark: #B20710;
-                --surface-color: #141414;
-                --background-color: #000000;
-                --text-color: #E0E0E0;
-                --border-color: #2a2a2a;
+                --primary-color: #D4AF37; 
+                --primary-dark: #B8860B;
+                --surface-color: #1A1A1A;
+                --background-color: #121212;
+                --text-color: #F5F5F5;
+                --text-color-muted: #999;
+                --border-color: #333333;
                 --success-bg: #113d21;
                 --success-text: #6ee791;
                 --error-bg: #4d0a0a;
@@ -931,63 +958,54 @@ ADMIN_TEMPLATE = '''
             }
             body { font-family: 'Roboto', sans-serif; background-color: var(--background-color); color: var(--text-color); padding: 15px; line-height: 1.5; }
             .container { max-width: 1200px; margin: 0 auto; background-color: var(--surface-color); padding: 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); border: 1px solid var(--border-color); }
-            .header { padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;}
-            h1, h2, h3, h4 { font-weight: 500; color: var(--primary-color); margin-bottom: 15px; }
-            h1 { font-size: 1.6rem; }
-            h2 { font-size: 1.4rem; margin-top: 30px; display: flex; align-items: center; gap: 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border-color);}
-            h3 { font-size: 1.1rem; color: var(--text-color); margin-top: 20px; font-weight: 600; }
-            .section { margin-bottom: 30px; padding: 20px; background-color: #050505; border: 1px solid var(--border-color); border-radius: 8px; }
+            .header { padding-bottom: 20px; margin-bottom: 25px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;}
+            h1, h2, h3, h4 { font-family: 'Cormorant Garamond', serif; font-weight: 600; color: var(--primary-color); margin:0 0 15px 0;}
+            h1 { font-size: 2rem; }
+            h2 { font-size: 1.6rem; margin-top: 30px; display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color);}
+            h3 { font-size: 1.2rem; color: var(--text-color); margin-top: 20px;}
+            .section { margin-bottom: 30px; padding: 20px; background-color: #151515; border: 1px solid var(--border-color); border-radius: 8px; }
             
-            label { font-weight: 500; margin-top: 10px; display: block; color: var(--text-color); font-size: 0.9rem;}
-            input[type="text"], input[type="number"], input[type="password"], input[type="tel"], textarea, select { width: 100%; padding: 10px 12px; margin-top: 5px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.95rem; box-sizing: border-box; transition: border-color 0.3s ease; background-color: var(--background-color); color: var(--text-color); }
-            input:focus, textarea:focus, select:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 0 2px rgba(229, 9, 20, 0.3); }
-            textarea { min-height: 80px; resize: vertical; }
+            label { font-weight: 500; margin-top: 12px; display: block; color: var(--text-color); font-size: 0.9rem;}
+            input[type="text"], input[type="number"], input[type="password"], input[type="tel"], textarea, select { width: 100%; padding: 10px 12px; margin-top: 6px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.95rem; box-sizing: border-box; transition: border-color 0.3s ease; background-color: var(--background-color); color: var(--text-color); }
+            input:focus, textarea:focus, select:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2); }
+            textarea { min-height: 90px; resize: vertical; }
             input[type="file"] { padding: 8px; background-color: #222; cursor: pointer; border: 1px solid var(--border-color); border-radius: 6px; }
-            input[type="checkbox"] { transform: scale(1.1); margin-right: 5px; vertical-align: middle; accent-color: var(--primary-color); }
+            input[type="checkbox"] { transform: scale(1.2); margin-right: 8px; vertical-align: middle; accent-color: var(--primary-color); }
             
-            button, .button { padding: 8px 15px; border: none; border-radius: 6px; background-color: var(--primary-color); color: white; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; margin-top: 10px; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; line-height: 1.2;}
-            button:hover, .button:hover { background-color: var(--primary-dark); }
-            .delete-button { background-color: #8B0000; }
+            button, .button { padding: 9px 18px; border: none; border-radius: 50px; background-color: var(--primary-color); color: #000; font-weight: 500; cursor: pointer; transition: all 0.2s ease; margin-top: 15px; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.5px; }
+            button:hover, .button:hover { background-color: var(--primary-dark); transform: translateY(-1px); }
+            .delete-button { background-color: #8B0000; color: white; }
             .delete-button:hover { background-color: #6e0000; }
             
             .item-list { display: grid; gap: 15px; }
-            .item { background: var(--surface-color); padding: 15px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.5); border: 1px solid var(--border-color); }
-            .item p { margin: 3px 0; font-size: 0.85rem; color: #aaa; }
-            .item strong { color: var(--text-color); }
-            .item .description { font-size: 0.8rem; color: #888; max-height: 40px; overflow: hidden; }
-            .item-actions { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
-            .photo-preview img { max-width: 60px; max-height: 60px; border-radius: 4px; margin: 3px 3px 0 0; border: 1px solid var(--border-color); object-fit: cover;}
+            .item { background: var(--surface-color); padding: 15px; border-radius: 8px; border: 1px solid var(--border-color); }
+            .item-actions { margin-top: 15px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
+            .photo-preview img, .photo-edit-item img { width: 60px; height: 60px; border-radius: 6px; margin: 5px 5px 0 0; border: 1px solid var(--border-color); object-fit: cover;}
+            .photo-preview-edit { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px; }
+            .photo-edit-item { position: relative; }
+            .photo-edit-item input[type="checkbox"] { position: absolute; top: 0px; right: 0px; transform: scale(1.3); accent-color: #ff453a; cursor: pointer; }
             
             .variant-input-group { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
             .variant-input-group input { flex-grow: 1; margin: 0; }
-            .remove-variant-btn { background-color: #8B0000; padding: 6px 10px; font-size: 0.8rem; margin-top: 0; line-height: 1; }
-            .add-variant-btn { background-color: #440205; color: var(--text-color); margin-top: 5px;}
-            .add-variant-btn:hover { background-color: #6e0000; }
+            .remove-variant-btn { background-color: #8B0000; color: white; padding: 6px 10px; font-size: 0.8rem; margin: 0; border-radius: 6px; }
+            .add-variant-btn { background-color: #1c4532; color: var(--text-color); margin-top: 8px;}
+            .add-variant-btn:hover { background-color: #22543d; }
 
-            .message { padding: 10px 15px; border-radius: 6px; margin-bottom: 15px; font-size: 0.9rem; border: 1px solid;}
+            .message { padding: 12px 18px; border-radius: 8px; margin-bottom: 20px; font-size: 0.95rem; border: 1px solid;}
             .message.success { background-color: var(--success-bg); color: var(--success-text); border-color: var(--success-text);}
             .message.error { background-color: var(--error-bg); color: var(--error-text); border-color: var(--error-text);}
             .message.warning { background-color: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-text); }
-            .status-indicator { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 0.75rem; font-weight: 500; margin-left: 5px; vertical-align: middle; }
-            .status-indicator.in-stock { background-color: #176f44; color: #c6f6d5; }
-            .status-indicator.out-of-stock { background-color: #c53030; color: #fed7d7; }
+            .status-indicator { display: inline-block; padding: 3px 9px; border-radius: 50px; font-size: 0.75rem; font-weight: 500; margin-left: 5px; vertical-align: middle; }
             .status-indicator.top-product { background-color: #9c4221; color: #fff3c4; }
-            
             .status-indicator.new { background-color: #e65100; color: #ffe0b2; }
             .status-indicator.accepted { background-color: #0277bd; color: #b3e5fc; }
             .status-indicator.prepared { background-color: #2f855a; color: #c6f6d5; }
             .status-indicator.shipped { background-color: #065f46; color: #a7f3d0; }
             
-            details { background-color: var(--surface-color); border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 10px; }
+            details { background-color: #151515; border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 10px; }
             details > summary { cursor: pointer; font-weight: 500; color: var(--text-color); display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; list-style: none; position: relative; }
             details[open] > summary { border-bottom: 1px solid var(--border-color); }
-            .order-details-content { padding: 10px 15px; }
-            .order-item-detail { display: flex; gap: 10px; padding: 8px 0; border-top: 1px dashed #333; font-size: 0.9rem; align-items: center; }
-            .order-item-detail:first-child { border-top: none; }
-            .order-item-detail img { width: 30px; height: 30px; object-fit: contain; border-radius: 3px; }
-            .order-item-name { flex-grow: 1; }
-            .order-item-qty-price { width: 150px; text-align: right; flex-shrink: 0; }
-            .order-total-summary { font-size: 1rem; font-weight: 600; margin-top: 15px; padding-top: 10px; border-top: 1px solid var(--border-color); text-align: right; color: var(--primary-color); }
+            .order-details-content { padding: 15px 20px; }
             .order-status-form { display: flex; gap: 10px; align-items: center; margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--border-color); flex-wrap: wrap; }
             .order-status-form select { max-width: 180px; margin-top: 0; flex-grow: 1; }
 
@@ -998,11 +1016,11 @@ ADMIN_TEMPLATE = '''
     <body>
         <div class="container">
             <div class="header">
-                <div class="logo-title-container" style="display: flex; align-items: center; gap: 10px;">
-                    <img src="https://huggingface.co/spaces/Kgshop/mobilnymir/resolve/main/IMG_20251019_120056_121.jpg" alt="SHAIK Logo" style="height: 40px; width: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 5px rgba(229, 9, 20, 0.7);">
+                <div class="logo-title-container" style="display: flex; align-items: center; gap: 15px;">
+                    <img src="https://huggingface.co/spaces/Shaik-parfume/app/resolve/main/icon.png" alt="SHAIK Logo" style="height: 45px; width: 45px; border-radius: 50%;">
                     <h1><i class="fas fa-tools"></i> Админ-панель</h1>
                 </div>
-                <a href="{{ url_for('catalog') }}" class="button"><i class="fas fa-store"></i> Каталог</a>
+                <a href="{{ url_for('catalog') }}" class="button"><i class="fas fa-store"></i> Перейти в каталог</a>
             </div>
 
 
@@ -1020,36 +1038,18 @@ ADMIN_TEMPLATE = '''
                 {% if orders %}
                     {% for order in orders | sort(attribute='created_at', reverse=true) %}
                         {% set current_status = order.get('status', 'new') %}
-                        <details style="margin-bottom: 10px;">
+                        <details>
                             <summary>
                                 <span>
                                     Заказ №{{ order.id }}
                                     <span class="status-indicator {{ current_status }}">{{ status_map_ru.get(current_status, current_status) }}</span>
                                 </span>
-                                <span style="font-size: 0.85rem; color: #888; flex-shrink: 0; margin-left: 10px;">
+                                <span style="font-size: 0.85rem; color: var(--text-color-muted); flex-shrink: 0; margin-left: 10px;">
                                     Дата: {{ order.created_at }} | Итого: {{ "%.2f"|format(order.total_price) }} {{ currency_code }}
                                 </span>
                             </summary>
                             <div class="order-details-content">
                                 <h3>Состав заказа:</h3>
-                                <div>
-                                    {% for item in order.cart %}
-                                        <div class="order-item-detail">
-                                            <img src="{{ item.photo_url }}" alt="{{ item.name }}">
-                                            <div class="order-item-name">
-                                                <strong>{{ item.name }}</strong>
-                                                <p style="margin: 0; color: #aaa; font-size: 0.8rem;">Вариант: {{ item.variantName }}</p>
-                                            </div>
-                                            <div class="order-item-qty-price">
-                                                {{ item.quantity }} × {{ "%.2f"|format(item.price) }} = <strong>{{ "%.2f"|format(item.price * item.quantity) }} {{ currency_code }}</strong>
-                                            </div>
-                                        </div>
-                                    {% endfor %}
-                                </div>
-                                <div class="order-total-summary">
-                                    Общая сумма: {{ "%.2f"|format(order.total_price) }} {{ currency_code }}
-                                </div>
-
                                 <div class="order-status-form">
                                     <form method="POST" style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
                                         <input type="hidden" name="action" value="update_order_status">
@@ -1060,8 +1060,8 @@ ADMIN_TEMPLATE = '''
                                                 <option value="{{ status_key }}" {% if current_status == status_key %}selected{% endif %}>{{ status_value }}</option>
                                             {% endfor %}
                                         </select>
-                                        <button type="submit" class="button"><i class="fas fa-check"></i> Сохранить</button>
-                                         <a href="{{ url_for('view_order', order_id=order.id) }}" target="_blank" class="button" style="background-color: #555;"><i class="fas fa-eye"></i> Просмотр</a>
+                                        <button type="submit" class="button" style="margin-top:0;"><i class="fas fa-check"></i> Сохранить</button>
+                                         <a href="{{ url_for('view_order', order_id=order.id) }}" target="_blank" class="button" style="background-color: #444; color: white; margin-top:0;"><i class="fas fa-eye"></i> Просмотр</a>
                                     </form>
                                 </div>
                             </div>
@@ -1076,7 +1076,7 @@ ADMIN_TEMPLATE = '''
             <div class="flex-container">
                  <div class="flex-item">
                      <div class="section">
-                         <h2><i class="fas fa-tags"></i> Управление категориями</h2>
+                         <h2><i class="fas fa-tags"></i> Категории</h2>
                           <details>
                               <summary><i class="fas fa-plus-circle"></i> Добавить новую категорию</summary>
                               <div style="padding: 15px;">
@@ -1095,10 +1095,10 @@ ADMIN_TEMPLATE = '''
                              {% for category in categories %}
                              <div class="item" style="display: flex; justify-content: space-between; align-items: center; padding: 10px;">
                                  <span>{{ category }}</span>
-                                 <form method="POST" style="margin: 0;" onsubmit="return confirm('Вы уверены, что хотите удалить категорию \'{{ category }}\'?');">
+                                 <form method="POST" style="margin: 0;" onsubmit="return confirm('Удалить категорию \'{{ category }}\'?');">
                                      <input type="hidden" name="action" value="delete_category">
                                      <input type="hidden" name="category_name" value="{{ category }}">
-                                     <button type="submit" class="delete-button" style="padding: 4px 8px; font-size: 0.75rem; margin: 0;"><i class="fas fa-trash-alt"></i></button>
+                                     <button type="submit" class="delete-button" style="padding: 6px 12px; font-size: 0.8rem; margin: 0;"><i class="fas fa-trash-alt"></i></button>
                                  </form>
                              </div>
                              {% endfor %}
@@ -1111,15 +1111,20 @@ ADMIN_TEMPLATE = '''
 
                  <div class="flex-item">
                       <div class="section">
-                        <h2><i class="fas fa-info-circle"></i> Информация о магазине</h2>
-                         <p>Адрес: <strong>{{ store_address }}</strong></p>
-                         <p>Валюта: <strong>{{ currency_name }} ({{ currency_code }})</strong></p>
+                        <h2><i class="fas fa-info-circle"></i> Инфо о магазине</h2>
+                         <p><strong>Адреса в г. Алматы:</strong></p>
+                         <ul style="padding-left: 20px;">
+                            {% for address in store_addresses %}
+                                <li>{{ address }}</li>
+                            {% endfor %}
+                         </ul>
+                         <p style="margin-top: 10px;"><strong>Валюта:</strong> {{ currency_name }} ({{ currency_code }})</p>
                      </div>
                  </div>
             </div>
 
             <div class="section">
-                <h2><i class="fas fa-box-open"></i> Управление товарами</h2>
+                <h2><i class="fas fa-box-open"></i> Товары</h2>
                  <details>
                      <summary><i class="fas fa-plus-circle"></i> Добавить новый товар</summary>
                      <div style="padding: 15px;">
@@ -1150,15 +1155,11 @@ ADMIN_TEMPLATE = '''
                              <button type="button" class="button add-variant-btn" onclick="addVariantInput('add-variants-container')"><i class="fas fa-plus"></i> Добавить вариант</button>
 
                              <div style="margin-top: 20px;">
-                                 <input type="checkbox" id="add_in_stock" name="in_stock" checked>
-                                 <label for="add_in_stock">В наличии</label>
-                             </div>
-                             <div>
                                  <input type="checkbox" id="add_is_top" name="is_top">
                                  <label for="add_is_top">Топ товар</label>
                              </div>
                              <br>
-                             <button type="submit" style="margin-top: 20px;"><i class="fas fa-save"></i> Добавить товар</button>
+                             <button type="submit"><i class="fas fa-save"></i> Добавить товар</button>
                          </form>
                      </div>
                 </details>
@@ -1181,11 +1182,10 @@ ADMIN_TEMPLATE = '''
                             <div style="flex-grow: 1;">
                                 <h3 style="margin-top: 0; margin-bottom: 5px;">
                                     {{ product['name'] }}
-                                     {% if product.get('in_stock', True) %}<span class="status-indicator in-stock">В наличии</span>{% else %}<span class="status-indicator out-of-stock">Нет</span>{% endif %}
-                                     {% if product.get('is_top', False) %}<span class="status-indicator top-product"><i class="fas fa-star"></i> Топ</span>{% endif %}
+                                     {% if product.get('is_top', False) %}<span class="status-indicator top-product"><i class="fas fa-star fa-xs"></i> Топ</span>{% endif %}
                                 </h3>
-                                <p><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
-                                <p><strong>Варианты:</strong> {{ product.get('variants', [])|length }} шт.</p>
+                                <p style="font-size: 0.9rem; color: var(--text-color-muted);"><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
+                                <p style="font-size: 0.9rem; color: var(--text-color-muted);"><strong>Варианты:</strong> {{ product.get('variants', [])|length }} шт.</p>
                             </div>
                         </div>
 
@@ -1214,15 +1214,23 @@ ADMIN_TEMPLATE = '''
                                     <option value="{{ category }}" {% if product.get('category') == category %}selected{% endif %}>{{ category }}</option>
                                     {% endfor %}
                                 </select>
-                                <label>Заменить фотографии:</label>
-                                <input type="file" name="photos" accept="image/*" multiple>
-                                 {% if product.get('photos') %}
-                                    <div class="photo-preview">
+                                
+                                <label>Текущие фотографии (отметьте для удаления):</label>
+                                <div class="photo-preview-edit">
+                                    {% if product.get('photos') %}
                                         {% for photo in product['photos'] %}
-                                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" alt="Фото {{ loop.index }}">
+                                        <div class="photo-edit-item">
+                                            <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" alt="Фото {{ loop.index }}">
+                                            <input type="checkbox" name="delete_photos" value="{{ photo }}" title="Отметить для удаления">
+                                        </div>
                                         {% endfor %}
-                                    </div>
-                                {% endif %}
+                                    {% else %}
+                                    <p style="font-size: 0.9rem; color: var(--text-color-muted);">Фотографий нет.</p>
+                                    {% endif %}
+                                </div>
+
+                                <label>Добавить новые фотографии:</label>
+                                <input type="file" name="photos" accept="image/*" multiple>
 
                                 <h4>Варианты и цены *:</h4>
                                 <div id="edit-variants-container-{{ product.id }}">
@@ -1237,15 +1245,11 @@ ADMIN_TEMPLATE = '''
                                 <button type="button" class="button add-variant-btn" onclick="addVariantInput('edit-variants-container-{{ product.id }}')"><i class="fas fa-plus"></i> Добавить вариант</button>
 
                                 <div style="margin-top: 20px;">
-                                     <input type="checkbox" id="edit_in_stock_{{ product.id }}" name="in_stock" {% if product.get('in_stock', True) %}checked{% endif %}>
-                                     <label for="edit_in_stock_{{ product.id }}">В наличии</label>
-                                </div>
-                                <div>
                                      <input type="checkbox" id="edit_is_top_{{ product.id }}" name="is_top" {% if product.get('is_top', False) %}checked{% endif %}>
                                      <label for="edit_is_top_{{ product.id }}">Топ товар</label>
                                 </div>
                                 <br>
-                                <button type="submit" style="margin-top: 20px;"><i class="fas fa-save"></i> Сохранить</button>
+                                <button type="submit"><i class="fas fa-save"></i> Сохранить изменения</button>
                             </form>
                         </div>
                     </div>
@@ -1298,7 +1302,7 @@ def catalog():
     all_products = data.get('products', [])
     categories = sorted(data.get('categories', []))
 
-    products_in_stock = [p for p in all_products if p.get('in_stock', True) and p.get('variants')]
+    products_in_stock = [p for p in all_products if p.get('variants')]
     
     for p in products_in_stock:
         p['variants'] = sorted(p.get('variants', []), key=lambda v: v.get('price', 0))
@@ -1310,7 +1314,7 @@ def catalog():
         products=products_sorted,
         categories=categories,
         repo_id=REPO_ID,
-        store_address=STORE_ADDRESS,
+        store_addresses=STORE_ADDRESSES,
         currency_code=CURRENCY_CODE
     )
 
@@ -1318,7 +1322,7 @@ def catalog():
 def product_detail(index):
     data = load_data()
     all_products = data.get('products', [])
-    products_in_stock = [p for p in all_products if p.get('in_stock', True) and p.get('variants')]
+    products_in_stock = [p for p in all_products if p.get('variants')]
     
     for p in products_in_stock:
         p['variants'] = sorted(p.get('variants', []), key=lambda v: v.get('price', 0))
@@ -1478,18 +1482,17 @@ def admin():
                     'name': name,
                     'description': request.form.get('description', '').strip(),
                     'category': request.form.get('category'),
-                    'in_stock': 'in_stock' in request.form,
                     'is_top': 'is_top' in request.form,
                     'variants': variants
                 }
 
+                newly_uploaded_photos = []
                 photos_files = request.files.getlist('photos')
                 if photos_files and any(f.filename for f in photos_files):
                     if not HF_TOKEN_WRITE:
                         flash("Токен HF_TOKEN не настроен, фото не загружены.", "warning")
                     else:
                         api = HfApi()
-                        new_photos_list = []
                         uploads_dir = 'uploads_temp'
                         os.makedirs(uploads_dir, exist_ok=True)
                         for photo in photos_files[:10]:
@@ -1506,16 +1509,15 @@ def admin():
                                         repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN_WRITE,
                                         commit_message=f"Photo for {name}"
                                     )
-                                    new_photos_list.append(photo_filename)
+                                    newly_uploaded_photos.append(photo_filename)
                                     os.remove(temp_path)
                                 except Exception as e:
                                     logging.error(f"Error uploading photo {photo.filename}: {e}")
                                     flash(f"Ошибка загрузки фото {photo.filename}.", 'error')
-                        product_data['photos'] = new_photos_list
                 
                 if action == 'add_product':
                     product_data['id'] = str(uuid.uuid4())
-                    if 'photos' not in product_data: product_data['photos'] = []
+                    product_data['photos'] = newly_uploaded_photos
                     data['products'].append(product_data)
                     flash(f"Товар '{name}' добавлен.", 'success')
                 
@@ -1523,8 +1525,23 @@ def admin():
                     product_id = request.form.get('product_id')
                     product_index = next((i for i, p in enumerate(data['products']) if p.get('id') == product_id), -1)
                     if product_index != -1:
-                        if 'photos' not in product_data:
-                            product_data['photos'] = data['products'][product_index].get('photos', [])
+                        product_to_edit = data['products'][product_index]
+                        current_photos = product_to_edit.get('photos', [])
+                        photos_to_delete = request.form.getlist('delete_photos')
+                        
+                        if photos_to_delete and HF_TOKEN_WRITE:
+                            try:
+                                HfApi().delete_files(
+                                    repo_id=REPO_ID, paths_in_repo=[f"photos/{p}" for p in photos_to_delete],
+                                    repo_type="dataset", token=HF_TOKEN_WRITE
+                                )
+                                flash(f"Удалено {len(photos_to_delete)} фото.", 'success')
+                            except Exception as e:
+                                logging.error(f"Error deleting photos from HF: {e}")
+                                flash("Не удалось удалить фото с сервера.", "warning")
+
+                        updated_photos = [p for p in current_photos if p not in photos_to_delete]
+                        product_data['photos'] = updated_photos + newly_uploaded_photos
                         product_data['id'] = product_id
                         data['products'][product_index] = product_data
                         flash(f"Товар '{name}' обновлен.", 'success')
@@ -1567,7 +1584,7 @@ def admin():
         orders=list(current_data.get('orders', {}).values()),
         status_map_ru=STATUS_MAP_RU,
         repo_id=REPO_ID,
-        store_address=STORE_ADDRESS,
+        store_addresses=STORE_ADDRESSES,
         currency_code=CURRENCY_CODE,
         currency_name=CURRENCY_NAME
     )