Fix

public/admin/index.php

@@ -282,6 +282,34 @@ try {
             }
             break;
 
+        case 'order_details':
+            if (isset($_GET['id'])) {
+                $orderId = (int)$_GET['id'];
+                
+                // Получаем информацию о заказе
+                $stmt = $db->prepare("
+                    SELECT o.*, u.email as user_email, u.full_name as user_full_name
+                    FROM orders o
+                    LEFT JOIN users u ON o.user_id = u.user_id
+                    WHERE o.order_id = ?
+                ");
+                $stmt->execute([$orderId]);
+                $order = $stmt->fetch();
+                
+                // Получаем товары в заказе
+                if ($order) {
+                    $stmt = $db->prepare("
+                        SELECT oi.*, p.image_url
+                        FROM order_items oi
+                        LEFT JOIN products p ON oi.product_id = p.product_id
+                        WHERE oi.order_id = ?
+                    ");
+                    $stmt->execute([$orderId]);
+                    $order_items = $stmt->fetchAll();
+                }
+            }
+            break;
+
     }
 
 } catch (PDOException $e) {
@@ -296,6 +324,7 @@ try {
     <base href="/cite_practica/admin/">
     <title>AETERNA - Админ-панель</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <style>
         body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f5f5f5; }
         .admin-header { background: #453227; color: white; padding: 20px; display: flex; justify-content: space-between; align-items: center; }
@@ -501,7 +530,7 @@ try {
                         </a>
                         <button type="button" class="btn btn-danger btn-sm delete-category-btn"
                                 data-id="<?= $category['category_id'] ?>"
-                                <?= $category['product_count'] > 0 ? 'disabled' : '' ?>>
+                                data-has-products="<?= $category['product_count'] > 0 ? '1' : '0' ?>">
                             <i class="fas fa-trash"></i> Удалить
                         </button>
                     </td>
@@ -739,10 +768,173 @@ try {
             </tbody>
         </table>
 
+        <?php elseif ($action == 'order_details'): ?>
+
+        <?php if (isset($order) && $order): ?>
+        <div style="margin-bottom: 20px;">
+            <a href="index.php?action=orders" class="btn btn-primary">
+                <i class="fas fa-arrow-left"></i> Назад к заказам
+            </a>
+        </div>
+
+        <h2>Детали заказа #<?= htmlspecialchars($order['order_number']) ?></h2>
+
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
+            <!-- Информация о заказе -->
+            <div style="background: white; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
+                <h3 style="margin-top: 0;">Информация о заказе</h3>
+                <table style="width: 100%; border: none;">
+                    <tr>
+                        <td style="border: none; padding: 8px 0;"><strong>Номер заказа:</strong></td>
+                        <td style="border: none; padding: 8px 0;"><?= htmlspecialchars($order['order_number']) ?></td>
+                    </tr>
+                    <tr>
+                        <td style="border: none; padding: 8px 0;"><strong>Дата создания:</strong></td>
+                        <td style="border: none; padding: 8px 0;"><?= date('d.m.Y H:i', strtotime($order['created_at'])) ?></td>
+                    </tr>
+                    <tr>
+                        <td style="border: none; padding: 8px 0;"><strong>Статус:</strong></td>
+                        <td style="border: none; padding: 8px 0;">
+                            <span style="padding: 5px 10px; border-radius: 4px; background: 
+                                <?php 
+                                    echo match($order['status']) {
+                                        'pending' => '#ffc107',
+                                        'processing' => '#17a2b8',
+                                        'completed' => '#28a745',
+                                        'cancelled' => '#dc3545',
+                                        default => '#6c757d'
+                                    };
+                                ?>; color: white;">
+                                <?= htmlspecialchars($order['status']) ?>
+                            </span>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td style="border: none; padding: 8px 0;"><strong>Способ оплаты:</strong></td>
+                        <td style="border: none; padding: 8px 0;"><?= $order['payment_method'] == 'card' ? 'Банковская карта' : 'Наличные' ?></td>
+                    </tr>
+                    <tr>
+                        <td style="border: none; padding: 8px 0;"><strong>Способ доставки:</strong></td>
+                        <td style="border: none; padding: 8px 0;"><?= $order['delivery_method'] == 'courier' ? 'Курьерская доставка' : 'Самовывоз' ?></td>
+                    </tr>
+                </table>
+            </div>
+
+            <!-- Информация о клиенте -->
+            <div style="background: white; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
+                <h3 style="margin-top: 0;">Информация о клиенте</h3>
+                <table style="width: 100%; border: none;">
+                    <tr>
+                        <td style="border: none; padding: 8px 0;"><strong>ФИО:</strong></td>
+                        <td style="border: none; padding: 8px 0;"><?= htmlspecialchars($order['customer_name']) ?></td>
+                    </tr>
+                    <tr>
+                        <td style="border: none; padding: 8px 0;"><strong>Email:</strong></td>
+                        <td style="border: none; padding: 8px 0;"><?= htmlspecialchars($order['customer_email']) ?></td>
+                    </tr>
+                    <tr>
+                        <td style="border: none; padding: 8px 0;"><strong>Телефон:</strong></td>
+                        <td style="border: none; padding: 8px 0;"><?= htmlspecialchars($order['customer_phone']) ?></td>
+                    </tr>
+                    <tr>
+                        <td style="border: none; padding: 8px 0;"><strong>Регион:</strong></td>
+                        <td style="border: none; padding: 8px 0;"><?= htmlspecialchars($order['delivery_region'] ?? '—') ?></td>
+                    </tr>
+                    <tr>
+                        <td style="border: none; padding: 8px 0;"><strong>Адрес доставки:</strong></td>
+                        <td style="border: none; padding: 8px 0;"><?= htmlspecialchars($order['delivery_address']) ?></td>
+                    </tr>
+                    <?php if (!empty($order['postal_code'])): ?>
+                    <tr>
+                        <td style="border: none; padding: 8px 0;"><strong>Индекс:</strong></td>
+                        <td style="border: none; padding: 8px 0;"><?= htmlspecialchars($order['postal_code']) ?></td>
+                    </tr>
+                    <?php endif; ?>
+                </table>
+            </div>
+        </div>
+
+        <!-- Товары в заказе -->
+        <div style="background: white; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-bottom: 20px;">
+            <h3 style="margin-top: 0;">Товары в заказе</h3>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Изображение</th>
+                        <th>Товар</th>
+                        <th>Цена</th>
+                        <th>Количество</th>
+                        <th>Сумма</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <?php foreach ($order_items as $item): ?>
+                    <tr>
+                        <td>
+                            <?php if (!empty($item['image_url'])): ?>
+                            <img src="/cite_practica/<?= htmlspecialchars($item['image_url']) ?>" 
+                                 alt="<?= htmlspecialchars($item['product_name']) ?>"
+                                 style="width: 60px; height: 60px; object-fit: cover; border-radius: 4px;">
+                            <?php else: ?>
+                            <div style="width: 60px; height: 60px; background: #f0f0f0; display: flex; align-items: center; justify-content: center; border-radius: 4px;">
+                                <i class="fas fa-image" style="color: #ccc;"></i>
+                            </div>
+                            <?php endif; ?>
+                        </td>
+                        <td><?= htmlspecialchars($item['product_name']) ?></td>
+                        <td><?= number_format($item['product_price'], 0, '', ' ') ?> ₽</td>
+                        <td><?= $item['quantity'] ?> шт.</td>
+                        <td><?= number_format($item['total_price'], 0, '', ' ') ?> ₽</td>
+                    </tr>
+                    <?php endforeach; ?>
+                </tbody>
+            </table>
+        </div>
+
+        <!-- Итоговая сумма -->
+        <div style="background: white; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); max-width: 400px; margin-left: auto;">
+            <h3 style="margin-top: 0;">Итого</h3>
+            <table style="width: 100%; border: none;">
+                <tr>
+                    <td style="border: none; padding: 8px 0;">Товары:</td>
+                    <td style="border: none; padding: 8px 0; text-align: right;"><?= number_format($order['subtotal'], 0, '', ' ') ?> ₽</td>
+                </tr>
+                <?php if ($order['discount_amount'] > 0): ?>
+                <tr>
+                    <td style="border: none; padding: 8px 0;">Скидка:</td>
+                    <td style="border: none; padding: 8px 0; text-align: right; color: #28a745;">-<?= number_format($order['discount_amount'], 0, '', ' ') ?> ₽</td>
+                </tr>
+                <?php endif; ?>
+                <tr>
+                    <td style="border: none; padding: 8px 0;">Доставка:</td>
+                    <td style="border: none; padding: 8px 0; text-align: right;"><?= number_format($order['delivery_price'], 0, '', ' ') ?> ₽</td>
+                </tr>
+                <tr style="font-size: 18px; font-weight: bold;">
+                    <td style="border: none; padding: 12px 0; border-top: 2px solid #ddd;">Итого к оплате:</td>
+                    <td style="border: none; padding: 12px 0; text-align: right; border-top: 2px solid #ddd;"><?= number_format($order['final_amount'], 0, '', ' ') ?> ₽</td>
+                </tr>
+            </table>
+        </div>
+
+        <?php if (!empty($order['notes'])): ?>
+        <div style="background: white; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-top: 20px;">
+            <h3 style="margin-top: 0;">Примечания</h3>
+            <p><?= htmlspecialchars($order['notes']) ?></p>
+        </div>
+        <?php endif; ?>
+
+        <?php else: ?>
+        <div class="alert alert-danger">
+            <i class="fas fa-exclamation-circle"></i> Заказ не найден
+        </div>
+        <a href="index.php?action=orders" class="btn btn-primary">Вернуться к списку заказов</a>
+        <?php endif; ?>
+
         <?php endif; ?>
     </div>
 <script>
-$('.delete-category-btn').click(function() {
+$(document).ready(function() {
+    $('.delete-category-btn').click(function() {
         const categoryId = $(this).data('id');
         const btn = $(this);
 
@@ -751,36 +943,45 @@ $('.delete-category-btn').click(function() {
                 url: 'fix_delete_category.php',
                 method: 'POST',
                 data: { category_id: categoryId },
-            success: function(response) {
+                dataType: 'json',
-                const result = JSON.parse(response);
+                success: function(result) {
                     if (result.success) {
                         alert(result.message);
                         location.reload();
                     } else {
                         alert('Ошибка: ' + result.message);
                     }
+                },
+                error: function(xhr, status, error) {
+                    console.error('AJAX error:', status, error);
+                    alert('Ошибка при удалении категории: ' + error);
                 }
             });
         }
-});
+    });
 
-$('#categoryForm').submit(function(e) {
+    $('#categoryForm').submit(function(e) {
         e.preventDefault();
 
         $.ajax({
             url: $(this).attr('action'),
             method: 'POST',
             data: $(this).serialize(),
-        success: function(response) {
+            dataType: 'json',
-            const result = JSON.parse(response);
+            success: function(result) {
                 if (result.success) {
                     alert(result.message);
                     window.location.href = 'index.php?action=categories';
                 } else {
                     alert('Ошибка: ' + result.message);
                 }
+            },
+            error: function(xhr, status, error) {
+                console.error('AJAX error:', status, error);
+                alert('Ошибка при сохранении категории');
             }
         });
+    });
 });
 </script>
 </body>

public/api/process_order.php

@@ -1,17 +1,18 @@
 <?php
+header('Content-Type: application/json; charset=utf-8');
 
 session_start();
 require_once __DIR__ . '/../config/database.php';
 
 if (!isset($_SESSION['isLoggedIn']) || $_SESSION['isLoggedIn'] !== true) {
-    header('Location: login.php?error=auth_required');
+    echo json_encode(['success' => false, 'message' => 'Требуется авторизация']);
     exit();
 }
 
 $user_id = $_SESSION['user_id'] ?? 0;
 
 if ($user_id == 0) {
-    header('Location: login.php?error=user_not_found');
+    echo json_encode(['success' => false, 'message' => 'Пользователь не найден']);
     exit();
 }
 
@@ -26,8 +27,10 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
         $customer_phone = $_POST['phone'] ?? '';
         $delivery_address = $_POST['address'] ?? '';
         $region = $_POST['region'] ?? '';
+        $postal_code = $_POST['postal_code'] ?? '';
         $payment_method = $_POST['payment'] ?? 'card';
         $delivery_method = $_POST['delivery'] ?? 'courier';
+        $promo_code = $_POST['promo_code'] ?? '';
         $notes = $_POST['notes'] ?? '';
         $discount_amount = floatval($_POST['discount'] ?? 0);
         $delivery_cost = floatval($_POST['delivery_price'] ?? 2000);
@@ -63,17 +66,18 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
             INSERT INTO orders (
                 user_id, order_number, subtotal, discount_amount,
                 delivery_price, final_amount, status, payment_method,
-                delivery_method, delivery_address, customer_name,
+                delivery_method, delivery_address, delivery_region, 
-                customer_email, customer_phone, notes
+                postal_code, promo_code, customer_name, customer_email, 
-            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+                customer_phone, notes
+            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
             RETURNING order_id
         ");
 
         $orderStmt->execute([
             $user_id, $order_number, $total_amount, $discount_amount,
             $delivery_cost, $final_amount, 'pending', $payment_method,
-            $delivery_method, $delivery_address, $customer_name,
+            $delivery_method, $delivery_address, $region, $postal_code,
-            $customer_email, $customer_phone, $notes
+            $promo_code, $customer_name, $customer_email, $customer_phone, $notes
         ]);
 
         $order_id = $orderStmt->fetchColumn();
@@ -109,16 +113,24 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 
         $db->commit();
 
-        header('Location: order_success.php?id=' . $order_id);
+        echo json_encode([
+            'success' => true,
+            'order_id' => $order_id,
+            'order_number' => $order_number,
+            'message' => 'Заказ успешно оформлен'
+        ]);
         exit();
 
     } catch (Exception $e) {
         $db->rollBack();
-        header('Location: checkout.php?error=' . urlencode($e->getMessage()));
+        echo json_encode([
+            'success' => false,
+            'message' => $e->getMessage()
+        ]);
         exit();
     }
 } else {
-    header('Location: checkout.php');
+    echo json_encode(['success' => false, 'message' => 'Неверный метод запроса']);
     exit();
 }
 ?>

public/assets/less/style.less

@@ -910,54 +910,149 @@ p, li, span {
 // === СТРАНИЦА ТОВАРА ===
 // =======================
 .product__section {
-  display: flex;
+  display: grid;
-  gap: 0;
+  grid-template-columns: 600px 1fr;
-  margin: 30px 0;
+  gap: 40px;
+  margin: 40px 0;
+  padding: 20px 0;
 }
 
-.product__gallery, .product__info {
+.product__gallery {
-  flex: 1;
+  position: relative;
 }
 
 .product__main-image {
-  margin-bottom: 15px;
+  width: 100%;
-}
+  height: 600px;
+  background: #f8f9fa;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+  border: 1px solid #e9ecef;
   
-.product__image {
+  img {
-  width: 500px;
+    width: 100%;
-  height: 300px;
+    height: 100%;
-  border-radius: 4px;
+    object-fit: contain;
+    padding: 20px;
+    transition: transform 0.3s ease;
+    
+    &:hover {
+      transform: scale(1.02);
+    }
+  }
 }
 
 .product__thumbnails {
-  display: flex;
+  display: grid;
-  gap: 10px;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
 }
 
 .product__thumbnail {
-  border: none;
+  height: 120px;
-  background: none;
+  background: #f8f9fa;
+  border: 2px solid #e9ecef;
+  border-radius: 8px;
+  overflow: hidden;
   cursor: pointer;
   padding: 0;
-}
+  transition: all 0.3s ease;
   
-.product__thumbnail img {
+  &:hover {
-  width: 245px;
+    border-color: #453227;
-  height: 150px;
+    box-shadow: 0 2px 8px rgba(69, 50, 39, 0.2);
+  }
+  
+  &.active {
+    border-color: #453227;
+    box-shadow: 0 0 0 2px rgba(69, 50, 39, 0.1);
+  }
+  
+  img {
+    width: 100%;
+    height: 100%;
     object-fit: cover;
-  border-radius: 4px;
+  }
 }
 
-.product__title {
+.product__info {
-  font-size: 30px;
+  padding: 0;
-  margin-bottom: 35px;
+  
+  h1 {
+    font-size: 32px;
+    font-weight: 600;
+    color: #212529;
+    margin-bottom: 20px;
+    line-height: 1.3;
+  }
 }
 
 .product__rating {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
-  margin-bottom: 30px;
+  margin-bottom: 25px;
+  padding-bottom: 25px;
+  border-bottom: 1px solid #e9ecef;
+  
+  .stars {
+    display: flex;
+    gap: 4px;
+    
+    .star {
+      font-size: 18px;
+      color: #ffc107;
+      
+      &.filled {
+        color: #ffc107;
+      }
+    }
+  }
+  
+  .rating-value {
+    font-weight: 600;
+    font-size: 16px;
+    color: #212529;
+  }
+  
+  .reviews-count {
+    color: #6c757d;
+    font-size: 14px;
+  }
+}
+
+.product__price {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 25px;
+  flex-wrap: wrap;
+  
+  .current-price {
+    font-size: 36px;
+    font-weight: 700;
+    color: #453227;
+  }
+  
+  .old-price {
+    font-size: 24px;
+    color: #6c757d;
+    text-decoration: line-through;
+  }
+  
+  .discount-badge {
+    background: #dc3545;
+    color: white;
+    padding: 6px 12px;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 600;
+  }
 }
 
 .product__color-selector {
@@ -3172,3 +3267,121 @@ p, li, span {
   background-color: #6c757d !important;
   color: white !important;
 }
+
+// Похожие товары
+.similar-products {
+  margin: 40px 0;
+  
+  h2 {
+    font-size: 24px;
+    margin-bottom: 20px;
+    color: #453227;
+  }
+}
+
+.products-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px;
+}
+
+.product-card {
+  background: white;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.product-image {
+  width: 100%;
+  height: 250px;
+  overflow: hidden;
+  background: #f5f5f5;
+  
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+  }
+  
+  &:hover img {
+    transform: scale(1.05);
+  }
+}
+
+.product-info {
+  padding: 15px;
+  
+  h3 {
+    font-size: 16px;
+    margin: 0 0 10px;
+    color: #333;
+    min-height: 40px;
+  }
+  
+  .product-price {
+    font-size: 20px;
+    font-weight: bold;
+    color: #453227;
+    margin: 10px 0;
+  }
+  
+  .btn {
+    width: 100%;
+    padding: 10px;
+    text-align: center;
+    margin-top: 10px;
+  }
+}
+
+// Адаптивность для страницы продукта
+@media (max-width: 1200px) {
+  .product__section {
+    grid-template-columns: 500px 1fr;
+    gap: 30px;
+  }
+  
+  .product__main-image {
+    height: 500px;
+  }
+}
+
+@media (max-width: 992px) {
+  .product__section {
+    grid-template-columns: 1fr;
+    gap: 30px;
+  }
+  
+  .product__main-image {
+    height: 450px;
+  }
+  
+  .product__thumbnails {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+@media (max-width: 576px) {
+  .product__main-image {
+    height: 350px;
+  }
+  
+  .product__thumbnails {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  
+  .product__info h1 {
+    font-size: 24px;
+  }
+  
+  .product__price .current-price {
+    font-size: 28px;
+  }
+}

public/catalog.php

@@ -876,7 +876,7 @@ try {
                 </h3>
                 <div>
 
-                    <a href="admin/index.php?action=catalog" class="admin-btn">
+                    <a href="admin/index.php?action=products" class="admin-btn">
                         <i class="fas fa-boxes"></i> Управление каталогом
                     </a>
                     <a href="admin/index.php?action=add_product" class="admin-btn">

public/checkout.php

@@ -469,20 +469,24 @@ $(document).ready(function() {
             url: 'api/process_order.php',
             method: 'POST',
             data: $(this).serialize(),
-            success: function(response) {
+            dataType: 'json',
-                try {
+            success: function(result) {
-                    const result = JSON.parse(response);
                 if (result.success) {
-                        window.location.href = 'order_success.php?id=' + result.order_id;
+                    showMessage('Заказ успешно оформлен!', 'success');
+                    setTimeout(function() {
+                        window.location.href = 'cite_mebel.php';
+                    }, 1500);
                 } else {
                     showMessage('Ошибка: ' + result.message, 'error');
                     $('#submit-order').prop('disabled', false).text('ОФОРМИТЬ ЗАКАЗ');
                 }
-                } catch(e) {
+            },
-                    showMessage('Ошибка обработки заказа', 'error');
+            error: function(xhr, status, error) {
+                console.error('AJAX error:', status, error);
+                console.log('Response:', xhr.responseText);
+                showMessage('Ошибка сервера при обработке заказа', 'error');
                 $('#submit-order').prop('disabled', false).text('ОФОРМИТЬ ЗАКАЗ');
             }
-            }
         });
     });
 

public/header_common.php

@@ -66,7 +66,7 @@ $fullName = $_SESSION['full_name'] ?? $userEmail;
                             <li><a href="profile.php"><i class="fas fa-user-cog"></i> Мой профиль</a></li>
                             <li><a href="checkout.php"><i class="fas fa-shopping-bag"></i> Мои заказы</a></li>
                             <?php if ($isAdmin): ?>
-                            <li><a href="admin/index.php"><i class="fas fa-user-shield"></i> Админ-панель</a></li>
+                            <li><a href="admin/index.php?action=products"><i class="fas fa-user-shield"></i> Админ-панель</a></li>
                             <?php endif; ?>
                             <li><a href="logout.php" class="logout-link"><i class="fas fa-sign-out-alt"></i> Выйти</a></li>
                         </ul>

public/product.php

@@ -66,6 +66,66 @@ try {
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <style>
+        .product__gallery {
+            width: 350px !important;
+            max-width: 350px !important;
+            flex-shrink: 0 !important;
+        }
+        
+        .product__main-image {
+            width: 350px !important;
+            height: 350px !important;
+            min-width: 350px !important;
+            min-height: 350px !important;
+            max-width: 350px !important;
+            max-height: 350px !important;
+            background: #f8f9fa;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            margin-bottom: 15px;
+            border: 1px solid #e9ecef;
+            flex-shrink: 0 !important;
+        }
+        
+        .product__main-image img,
+        #mainImage {
+            width: 100% !important;
+            height: 100% !important;
+            max-width: 350px !important;
+            max-height: 350px !important;
+            object-fit: contain !important;
+            display: block !important;
+        }
+        
+        .product__section {
+            display: grid !important;
+            grid-template-columns: 350px 1fr !important;
+            gap: 30px;
+        }
+        
+        .similar-products .product-image {
+            width: 100% !important;
+            height: 250px !important;
+            max-height: 250px !important;
+            overflow: hidden;
+            background: #f5f5f5;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+        }
+        
+        .similar-products .product-image img {
+            width: 100% !important;
+            height: 100% !important;
+            max-width: 100% !important;
+            max-height: 250px !important;
+            object-fit: contain !important;
+        }
+        
         .product-attributes {
             background: #f8f9fa;
             padding: 20px;

public/style_for_cite.less

@@ -106,9 +106,6 @@ p, li, span {
   }
 }
 
-// =======================
-// === ШАПКА САЙТА ===
-// =======================
 .header {
   background-color: @color-secondary;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
@@ -231,9 +228,6 @@ p, li, span {
   }
 }
 
-// =======================
-// === ОСНОВНЫЕ СЕКЦИИ ===
-// =======================
 .hero {
   padding: 15px 0;
 
@@ -623,9 +617,6 @@ p, li, span {
   }
 }
 
-// =======================
-// === СТИЛИ КАТАЛОГА ===
-// =======================
 .catalog-main {
   padding: 30px 0 60px;
   background-color: lighten(@color-secondary, 5%);
@@ -903,58 +894,158 @@ p, li, span {
 .product-card.tall .product-image-container,
 .product-card.large .product-image-container { height: 430px; }
 
-// =======================
-// === СТРАНИЦА ТОВАРА ===
-// =======================
 .product__section {
-  display: flex;
+  display: grid;
-  gap: 0;
+  grid-template-columns: 350px 1fr;
-  margin: 30px 0;
+  gap: 30px;
+  margin: 40px 0;
+  padding: 20px 0;
 }
 
-.product__gallery, .product__info {
+.product__gallery {
-  flex: 1;
+  position: relative;
+  width: 350px !important;
+  max-width: 350px !important;
 }
 
 .product__main-image {
+  width: 350px !important;
+  height: 350px !important;
+  min-width: 350px !important;
+  min-height: 350px !important;
+  max-width: 350px !important;
+  max-height: 350px !important;
+  background: #f8f9fa;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: center;
   margin-bottom: 15px;
-}
+  border: 1px solid #e9ecef;
+  flex-shrink: 0;
   
-.product__image {
+  img {
-  width: 500px;
+    width: 100% !important;
-  height: 300px;
+    height: 100% !important;
-  border-radius: 4px;
+    max-width: 350px !important;
+    max-height: 350px !important;
+    object-fit: contain !important;
+    transition: transform 0.3s ease;
+    
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
 }
 
 .product__thumbnails {
-  display: flex;
+  display: grid;
-  gap: 10px;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
 }
 
 .product__thumbnail {
-  border: none;
+  height: 70px;
-  background: none;
+  background: #f8f9fa;
+  border: 2px solid #e9ecef;
+  border-radius: 6px;
+  overflow: hidden;
   cursor: pointer;
   padding: 0;
-}
+  transition: all 0.3s ease;
   
-.product__thumbnail img {
+  &:hover {
-  width: 245px;
+    border-color: #453227;
-  height: 150px;
+    box-shadow: 0 2px 8px rgba(69, 50, 39, 0.2);
+  }
+  
+  &.active {
+    border-color: #453227;
+    box-shadow: 0 0 0 2px rgba(69, 50, 39, 0.1);
+  }
+  
+  img {
+    width: 100%;
+    height: 100%;
     object-fit: cover;
-  border-radius: 4px;
+  }
 }
 
-.product__title {
+.product__info {
-  font-size: 30px;
+  padding: 0;
-  margin-bottom: 35px;
+  
+  h1 {
+    font-size: 32px;
+    font-weight: 600;
+    color: #212529;
+    margin-bottom: 20px;
+    line-height: 1.3;
+  }
 }
 
 .product__rating {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
-  margin-bottom: 30px;
+  margin-bottom: 25px;
+  padding-bottom: 25px;
+  border-bottom: 1px solid #e9ecef;
+  
+  .stars {
+    display: flex;
+    gap: 4px;
+    
+    .star {
+      font-size: 18px;
+      color: #ffc107;
+      
+      &.filled {
+        color: #ffc107;
+      }
+    }
+  }
+  
+  .rating-value {
+    font-weight: 600;
+    font-size: 16px;
+    color: #212529;
+  }
+  
+  .reviews-count {
+    color: #6c757d;
+    font-size: 14px;
+  }
+}
+
+.product__price {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 25px;
+  flex-wrap: wrap;
+  
+  .current-price {
+    font-size: 36px;
+    font-weight: 700;
+    color: #453227;
+  }
+  
+  .old-price {
+    font-size: 24px;
+    color: #6c757d;
+    text-decoration: line-through;
+  }
+  
+  .discount-badge {
+    background: #dc3545;
+    color: white;
+    padding: 6px 12px;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 600;
+  }
 }
 
 .product__color-selector {
@@ -1167,9 +1258,6 @@ p, li, span {
   }
 }
 
-// =======================
-// === КОРЗИНА И ЗАКАЗ ===
-// =======================
 .main__content {
   display: flex;
   gap: 40px;
@@ -1589,9 +1677,6 @@ p, li, span {
   font-size: 18px;
 }
 
-// =======================
-// === АВТОРИЗАЦИЯ ===
-// =======================
 .profile-page-main {
   .flex-center();
   min-height: 80vh;
@@ -1724,9 +1809,6 @@ p, li, span {
   }
 }
 
-// =======================
-// === СЕКЦИЯ УСЛУГ ===
-// =======================
 .services-section {
   padding: 60px 0;
   background-color: @color-secondary;
@@ -1792,9 +1874,6 @@ p, li, span {
   }
 }
 
-// =======================
-// === ФУТЕР ===
-// =======================
 .footer {
   background-color: @color-primary;
   color: black;
@@ -1857,9 +1936,6 @@ p, li, span {
   }
 }
 
-// =======================
-// === ДОСТАВКА ===
-// =======================
 .delivery-content {
   max-width: 1200px;
   margin: 0 auto;
@@ -1933,9 +2009,6 @@ p, li, span {
   text-align: right;
 }
 
-// =======================
-// === ГАРАНТИЯ ===
-// =======================
 .warranty-content {
   max-width: 1200px;
   margin: 0 auto;
@@ -2087,9 +2160,6 @@ p, li, span {
   .card { width: 100%; }
 }
 
-// =======================
-// === АДАПТИВНОСТЬ ===
-// =======================
 @media (max-width: 1240px) {
   .catalog-wrapper { gap: 20px; }
   .catalog-sidebar { flex: 0 0 200px; }
@@ -2215,14 +2285,13 @@ p, li, span {
     }
   }
 
-  .product__image {
+  .product__main-image {
     width: 350px;
-    height: 250px;
+    height: 350px;
   }
 
-  .product__thumbnail img {
+  .product__thumbnail {
-    width: 170px;
+    height: 80px;
-    height: 120px;
   }
 }
 
@@ -2546,7 +2615,6 @@ p, li, span {
   }
 }
 
-// Стили для ошибок полей
 .error-input {
   border-color: #ff4444 !important;
   box-shadow: 0 0 0 1px #ff4444;
@@ -2559,7 +2627,6 @@ p, li, span {
   margin-bottom: 10px;
 }
 
-// Стили для сообщений
 .message {
   padding: 15px;
   margin: 20px 0;
@@ -2579,7 +2646,6 @@ p, li, span {
   border: 1px solid #c8e6c9;
 }
 
-// Добавьте в конец файла
 .access-denied {
   text-align: center;
   padding: 80px 20px;
@@ -2606,9 +2672,6 @@ p, li, span {
     min-width: 200px;
   }
 }
-// =======================
-// === ПРОФИЛЬ ПОЛЬЗОВАТЕЛЯ ===
-// =======================
 
 .user-profile-dropdown {
   position: relative;
@@ -2724,10 +2787,6 @@ p, li, span {
   }
 }
 
-// =======================
-// === КАРТОЧКА ТОВАРА ===
-// =======================
-
 .product-image-container {
   position: relative;
   overflow: hidden;
@@ -2882,10 +2941,6 @@ p, li, span {
   }
 }
 
-// =======================
-// === ПРОФИЛЬ ПОЛЬЗОВАТЕЛЯ ===
-// =======================
-
 .user-profile-dropdown {
   position: relative;
   display: inline-block;
@@ -3081,7 +3136,6 @@ p, li, span {
   }
 }
 
-// Для мобильных устройств
 @media (max-width: 768px) {
   .user-profile-dropdown {
     .user-profile-toggle {
@@ -3100,7 +3154,6 @@ p, li, span {
     }
   }
 }
-// Добавьте в конец файла
 .unavailable-product {
   position: relative;
   opacity: 0.6;
@@ -3155,7 +3208,6 @@ p, li, span {
   z-index: 10;
 }
 
-// Для админ-таблицы
 .admin-table tr.unavailable {
   background-color: #f8f9fa !important;
   opacity: 0.7;
@@ -3169,3 +3221,124 @@ p, li, span {
   background-color: #6c757d !important;
   color: white !important;
 }
+
+.similar-products {
+  margin: 40px 0;
+  
+  h2 {
+    font-size: 24px;
+    margin-bottom: 20px;
+    color: #453227;
+  }
+}
+
+.products-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px;
+}
+
+.product-card {
+  background: white;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.product-image {
+  width: 100%;
+  height: 250px;
+  overflow: hidden;
+  background: #f5f5f5;
+  
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+  }
+  
+  &:hover img {
+    transform: scale(1.05);
+  }
+}
+
+.product-info {
+  padding: 15px;
+  
+  h3 {
+    font-size: 16px;
+    margin: 0 0 10px;
+    color: #333;
+    min-height: 40px;
+  }
+  
+  .product-price {
+    font-size: 20px;
+    font-weight: bold;
+    color: #453227;
+    margin: 10px 0;
+  }
+  
+  .btn {
+    width: 100%;
+    padding: 10px;
+    text-align: center;
+    margin-top: 10px;
+  }
+}
+
+@media (max-width: 1200px) {
+  .product__section {
+    grid-template-columns: 330px 1fr;
+    gap: 25px;
+  }
+  
+  .product__main-image {
+    width: 330px;
+    height: 330px;
+  }
+}
+
+@media (max-width: 992px) {
+  .product__section {
+    grid-template-columns: 1fr;
+    gap: 25px;
+  }
+  
+  .product__main-image {
+    width: 100%;
+    max-width: 400px;
+    height: 350px;
+    margin: 0 auto;
+  }
+  
+  .product__thumbnails {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+@media (max-width: 576px) {
+  .product__main-image {
+    width: 100%;
+    height: 300px;
+  }
+  
+  .product__thumbnails {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  
+  .product__info h1 {
+    font-size: 24px;
+  }
+  
+  .product__price .current-price {
+    font-size: 28px;
+  }
+}