Index: DjangoProject3/settings.py
===================================================================
--- DjangoProject3/settings.py	(revision fef3b4d766831b584534962ac137a311239ecc91)
+++ DjangoProject3/settings.py	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
@@ -35,5 +35,5 @@
 DEBUG = True
 
-ALLOWED_HOSTS = []
+ALLOWED_HOSTS = ['*']
 
 # Application definition
Index: main/migrations/0006_favorite.py
===================================================================
--- main/migrations/0006_favorite.py	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
+++ main/migrations/0006_favorite.py	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
@@ -0,0 +1,27 @@
+# Generated by Django 5.1.7 on 2025-06-29 14:18
+
+import django.db.models.deletion
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('main', '0005_remove_shoppinglistitem_checked_and_more'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Favorite',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('added_at', models.DateTimeField(auto_now_add=True)),
+                ('product', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='favorited_by', to='main.products2')),
+                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='favorites', to=settings.AUTH_USER_MODEL)),
+            ],
+            options={
+                'unique_together': {('user', 'product')},
+            },
+        ),
+    ]
Index: main/migrations/0007_remove_favorite_added_at_alter_favorite_product.py
===================================================================
--- main/migrations/0007_remove_favorite_added_at_alter_favorite_product.py	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
+++ main/migrations/0007_remove_favorite_added_at_alter_favorite_product.py	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
@@ -0,0 +1,23 @@
+# Generated by Django 5.1.7 on 2025-06-29 14:27
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('main', '0006_favorite'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='favorite',
+            name='added_at',
+        ),
+        migrations.AlterField(
+            model_name='favorite',
+            name='product',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='main.products2'),
+        ),
+    ]
Index: main/migrations/0008_alter_favorite_user.py
===================================================================
--- main/migrations/0008_alter_favorite_user.py	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
+++ main/migrations/0008_alter_favorite_user.py	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
@@ -0,0 +1,20 @@
+# Generated by Django 5.1.7 on 2025-07-01 07:52
+
+import django.db.models.deletion
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('main', '0007_remove_favorite_added_at_alter_favorite_product'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='favorite',
+            name='user',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL),
+        ),
+    ]
Index: main/migrations/0009_alter_favorite_user.py
===================================================================
--- main/migrations/0009_alter_favorite_user.py	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
+++ main/migrations/0009_alter_favorite_user.py	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
@@ -0,0 +1,20 @@
+# Generated by Django 5.1.7 on 2025-07-01 08:03
+
+import django.db.models.deletion
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('main', '0008_alter_favorite_user'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='favorite',
+            name='user',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='favorites', to=settings.AUTH_USER_MODEL),
+        ),
+    ]
Index: main/models.py
===================================================================
--- main/models.py	(revision fef3b4d766831b584534962ac137a311239ecc91)
+++ main/models.py	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
@@ -1,2 +1,5 @@
+from datetime import timezone
+
+from django.contrib.auth import get_user_model
 from django.db import models
 from django.contrib.auth.models import AbstractUser
@@ -71,3 +74,13 @@
 
 
+from django.utils import timezone  # Correct import for timezone.now
 
+User = get_user_model()
+
+class Favorite(models.Model):
+    user = models.ForeignKey(User, on_delete=models.CASCADE, related_name='favorites')
+    product = models.ForeignKey('main.Products2', on_delete=models.CASCADE)
+
+    class Meta:
+        unique_together = ('user', 'product')
+
Index: main/templates/main/base.html
===================================================================
--- main/templates/main/base.html	(revision fef3b4d766831b584534962ac137a311239ecc91)
+++ main/templates/main/base.html	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
@@ -1,5 +1,7 @@
+{% extends 'main/header.html' %}
 {% load category_filters %}
 {% load custom_filters %}
 {% load static %}
+{% block content %}
 
 <!DOCTYPE html>
@@ -22,133 +24,4 @@
             background-color: #f5f5f5;
         }
-
-        /* Header */
-        .main-header {
-            background-color: white;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            position: sticky;
-            top: 0;
-            z-index: 1000;
-        }
-
-        .header-top {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px 20px;
-            border-bottom: 1px solid #e5e5e5;
-        }
-
-        .logo img {
-            height: 60px;
-        }
-
-        .header-search {
-            flex-grow: 1;
-            margin: 0 20px;
-            position: relative;
-        }
-
-        .header-search input {
-            width: 97%;
-            padding: 12px 20px;
-            border: 1px solid #ddd;
-            border-radius: 30px;
-            font-size: 16px;
-            background-color: #f5f5f5;
-        }
-
-        .header-search button {
-            position: absolute;
-            right: 15px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: none;
-            border: none;
-            color: #666;
-            cursor: pointer;
-            font-size: 18px;
-        }
-
-        .user-actions {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-
-        .user-actions a {
-            color: #333;
-            text-decoration: none;
-            font-size: 14px;
-            display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-
-        .user-actions a:hover {
-            color: #2e652e;
-        }
-
-        .logout-btn {
-            background-color: #2e652e;
-            color: white;
-            border: none;
-            padding: 8px 16px;
-            border-radius: 20px;
-            font-weight: 600;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-
-        .logout-btn:hover {
-            background-color: #1f3f1f;
-        }
-
-        /* Navigation */
-        .main-nav {
-            padding: 15px 30px;
-            background-color: #2e652e;
-        }
-
-        .main-nav ul {
-            display: flex;
-            list-style: none;
-            margin: 0;
-            padding: 0;
-        }
-
-        .main-nav li {
-            margin-right: 20px;
-        }
-
-        .main-nav a {
-            color: white;
-            text-decoration: none;
-            font-weight: 600;
-            padding: 5px 0;
-            position: relative;
-        }
-
-        .main-nav a:hover {
-            color: #fdd835;
-        }
-
-        .main-nav a::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 0;
-            height: 2px;
-            background-color: #fdd835;
-            transition: width 0.3s ease;
-        }
-
-        .main-nav a:hover::after {
-            width: 100%;
-        }
-
         /* Main Content */
         .main-content {
@@ -264,19 +137,4 @@
         }
 
-        .banner-dot {
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
-            background-color: rgba(255, 255, 255, 0.5);
-            border: none;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-
-        .banner-dot.active {
-            background-color: white;
-            transform: scale(1.2);
-        }
-
         /* Slide transition */
         .banner {
@@ -348,11 +206,4 @@
 
         /* Categories */
-        .categories-section {
-            background-color: white;
-            border-radius: 8px;
-            padding: 20px;
-            margin-bottom: 20px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
 
         .section-title {
@@ -361,23 +212,4 @@
             margin-bottom: 20px;
             color: #2e652e;
-        }
-
-        .categories-grid {
-            display: grid;
-            grid-template-columns: repeat(6, 1fr);
-            gap: 15px;
-        }
-
-        .category-card {
-            text-align: center;
-            padding: 15px 10px;
-            border-radius: 4px;
-            background-color: #f9f9f9;
-            transition: all 0.3s ease;
-        }
-
-        .category-card:hover {
-            background-color: #e9f7fe;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         }
 
@@ -547,140 +379,4 @@
         }
 
-        /* Mobile Menu */
-        #mobile-header {
-            display: none;
-            justify-content: space-between;
-            align-items: center;
-            padding: 15px 20px;
-            background: linear-gradient(135deg, #2e652e, #1f3f1f);
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-            z-index: 1001;
-            position: relative;
-        }
-
-        #mobile-logo img {
-            height: 50px;
-        }
-
-        .menu-toggle {
-            font-size: 28px;
-            color: white;
-            cursor: pointer;
-            transition: transform 0.3s ease;
-        }
-
-        .menu-toggle:hover {
-            transform: scale(1.1);
-        }
-
-        .mobile-menu {
-            position: fixed;
-            top: 0;
-            right: -100%;
-            width: 75%;
-            height: 100vh;
-            background: linear-gradient(135deg, #f0f7f0, #e0e8e0);
-            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
-            transition: right 0.3s ease;
-            padding: 20px;
-            z-index: 1002;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .mobile-menu.open {
-            right: 0;
-        }
-
-        .mobile-menu-header {
-            display: flex;
-            justify-content: flex-end;
-            margin-bottom: 20px;
-        }
-
-        .close-btn {
-            cursor: pointer;
-            font-size: 28px;
-            color: #2e652e;
-            transition: color 0.3s ease;
-        }
-
-        .close-btn:hover {
-            color: #1f3f1f;
-        }
-
-        .mobile-search-form {
-            display: flex;
-            align-items: center;
-            padding: 12px 16px;
-            gap: 10px;
-            background: white;
-            border-radius: 25px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            margin-bottom: 20px;
-        }
-
-        .mobile-search-form input {
-            flex: 1;
-            padding: 10px 15px;
-            border: none;
-            border-radius: 20px;
-            font-size: 14px;
-            outline: none;
-            background: #f5f5f5;
-        }
-
-        .mobile-search-form button {
-            background-color: #2e652e;
-            color: white;
-            border: none;
-            padding: 10px 15px;
-            border-radius: 50%;
-            font-size: 16px;
-            cursor: pointer;
-            transition: background-color 0.3s ease, transform 0.3s ease;
-        }
-
-        .mobile-search-form button:hover {
-            background-color: #1f3f1f;
-            transform: scale(1.1);
-        }
-
-        .mobile-nav {
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-        }
-
-        .mobile-nav a {
-            color: #2e652e;
-            text-decoration: none;
-            font-size: 18px;
-            padding: 10px 15px;
-            border-radius: 8px;
-            transition: background-color 0.3s ease, color 0.3s ease;
-        }
-
-        .mobile-nav a:hover {
-            background-color: #2e652e;
-            color: white;
-            transform: translateX(5px);
-        }
-
-        #overlay {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100vw;
-            height: 100vh;
-            background: rgba(0, 0, 0, 0.5);
-            z-index: 1000;
-        }
-
-        #overlay.active {
-            display: block;
-        }
-
         /* Message Styling */
         .message-container {
@@ -711,12 +407,12 @@
         }
 
-        .close-btn {
-            position: absolute;
-            right: 15px;
-            top: 50%;
-            transform: translateY(-50%);
-            cursor: pointer;
-            font-size: 20px;
-        }
+        {#.close-btn {#}
+        {#    position: absolute;#}
+        {#    right: 15px;#}
+        {#    top: 50%;#}
+        {#    transform: translateY(-50%);#}
+        {#    cursor: pointer;#}
+        {#    font-size: 20px;#}
+        {#}#}
 
         /* Modal */
@@ -778,23 +474,4 @@
         }
 
-        .modal-product-info {
-            padding: 15px;
-        }
-
-        .modal-product-name {
-            font-weight: 500;
-            margin-bottom: 8px;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-        }
-
-        .modal-product-price {
-            display: flex;
-            gap: 10px;
-            align-items: center;
-        }
-
         /* Improved Popular Categories */
         .popular-categories {
@@ -881,25 +558,4 @@
         }
 
-        .auth-btn {
-            padding: 8px 16px;
-            border-radius: 20px;
-            font-weight: 600;
-            text-decoration: none;
-            display: inline-flex;
-            align-items: center;
-            gap: 5px;
-        }
-
-        .auth-btn.logout {
-            background-color: #2e652e;
-            color: white;
-            border: none;
-        }
-
-        .auth-btn:not(.logout) {
-            color: #333;
-            background-color: #f5f5f5;
-        }
-
         /* Responsiveness */
         @media (max-width: 1024px) {
@@ -914,12 +570,4 @@
 
         @media (max-width: 768px) {
-            .main-header {
-                display: none;
-            }
-
-            #mobile-header {
-                display: flex;
-            }
-
             .main-content {
                 flex-direction: column;
@@ -996,14 +644,4 @@
                 padding: 15px;
                 border-radius: 15px;
-            }
-
-            .categories-grid {
-                grid-template-columns: repeat(2, 1fr);
-                gap: 10px;
-            }
-
-            .category-card {
-                padding: 20px 10px;
-                border-radius: 10px;
             }
 
@@ -1113,82 +751,4 @@
     {% endif %}
 </div>
-
-<!-- Header -->
-<header class="main-header">
-    <div class="header-top">
-        <div class="logo">
-            <a href="{% url 'home' %}"><img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого"/></a>
-        </div>
-        <div class="header-search">
-            <form method="GET" action="{% url 'product_list' %}" id="searchForm">
-                <input type="text" name="search" id="searchInput" placeholder="Пребарај производи..."
-                       value="{{ request.GET.search }}">
-                <button type="submit"><i class="fas fa-search"></i></button>
-            </form>
-            <div id="suggestions"
-                 style="position: absolute; background: white; border: 1px solid #ddd; border-radius: 5px; width: 98%; max-height: 200px; overflow-y: auto; display: none; z-index: 2"></div>
-        </div>
-        <div class="user-actions">
-            {% if user.is_authenticated %}
-                <form method="post" action="{% url 'logout' %}" class="auth-form">
-                    {% csrf_token %}
-                    <button type="submit" class="auth-btn logout">
-                        <i class="fas fa-sign-out-alt"></i> Одјави се
-                    </button>
-                </form>
-            {% else %}
-                <a href="{% url 'login' %}" class="auth-btn">
-                    <i class="fas fa-user"></i> Најави се
-                </a>
-                <a href="{% url 'register' %}" class="auth-btn">
-                    <i class="fas fa-user-plus"></i> Регистрирај се
-                </a>
-            {% endif %}
-        </div>
-    </div>
-    <nav class="main-nav">
-        <ul>
-            {#            <li><a href="{% url 'home' %}">Дома</a></li>#}
-            <li><a href="{% url 'product_list' %}">Каталог</a></li>
-            <li style="z-index: 0"><a href="{% url 'stats' %}">Статистика</a></li>
-        </ul>
-    </nav>
-</header>
-
-<!-- Mobile Menu -->
-<div id="mobile-header">
-    <div id="mobile-logo">
-        <img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого">
-    </div>
-    <div class="menu-toggle" onclick="toggleMobileMenu()">☰</div>
-</div>
-
-<!-- Mobile Menu -->
-<div id="mobile-menu" class="mobile-menu">
-    <div class="mobile-menu-header">
-        <span class="close-btn" onclick="toggleMobileMenu()">×</span>
-    </div>
-
-    <form method="GET" action="{% url 'product_list' %}" class="mobile-search-form" id="mobileSearchForm">
-        <input type="text" name="search" id="mobileSearchInput" placeholder="Пребарај производ..."
-               value="{{ request.GET.search }}">
-        <button type="submit"><i class="fas fa-search"></i></button>
-    </form>
-
-    <nav class="mobile-nav">
-        <a href="{% url 'home' %}">Дома</a>
-        <a href="{% url 'product_list' %}">Каталог</a>
-        <a href="{% url 'stats' %}">Статистика</a>
-        <a href="{% url 'view_lists' %}">Листи</a>
-
-        {% if user.is_authenticated %}
-            <a href="{% url 'logout' %}">Одјави се</a>
-        {% else %}
-            <a href="{% url 'login' %}">Најави се</a>
-            <a href="{% url 'register' %}">Регистрирај се</a>
-        {% endif %}
-    </nav>
-</div>
-<div id="overlay" onclick="toggleMobileMenu()"></div>
 
 <!-- Main Content -->
@@ -1638,3 +1198,4 @@
 </script>
 </body>
+{% endblock %}
 </html>
Index: main/templates/main/favorites.html
===================================================================
--- main/templates/main/favorites.html	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
+++ main/templates/main/favorites.html	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
@@ -0,0 +1,139 @@
+{% extends 'main/header.html' %}
+{% load static %}
+
+{% block content %}
+<div class="container" style="max-width: 1200px; margin: 0 auto; padding: 20px;">
+    <h1 style="text-align: center; margin-bottom: 30px; color: #2e652e; position: relative; padding-bottom: 15px;">
+        <span style="padding: 0 20px; position: relative; z-index: 1;">Твоите Омилени</span>
+        <span style="content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, #2e652e, transparent); z-index: 0;"></span>
+    </h1>
+
+    <div class="grid" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;">
+        {% for favorite in favorites %}
+        <div class="product-card" style="border: 1px solid #e0e0e0; border-radius: 10px; overflow: hidden; transition: all 0.3s ease; background: white;">
+            <a href="{% url 'product_detail' favorite.product.id %}" style="text-decoration: none; color: inherit;">
+                <div class="product-image" style="height: 200px; background-color: #f9f9f9; display: flex; align-items: center; justify-content: center; padding: 15px; position: relative;">
+                    {% if favorite.product.image_url %}
+                        <img src="{{ favorite.product.image_url }}" alt="{{ favorite.product.name }}" style="max-width: 100%; max-height: 100%; object-fit: contain;">
+                    {% else %}
+                        <span style="color: #666;">[No Image]</span>
+                    {% endif %}
+                    <button class="favorite-btn" onclick="event.preventDefault(); toggleFavorite(this, {{ favorite.product.id }});" style="position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, 0.9); border: none; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);">
+                        <i class="fas fa-heart" style="color: #e74c3c; font-size: 18px;"></i>
+                    </button>
+                </div>
+                <div class="product-info" style="padding: 20px;">
+                    <div class="product-name" style="font-weight: bold; margin-bottom: 5px; color: #333; font-size: 0.95rem; line-height: 1.3; height: 2.6em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">
+                        {{ favorite.product.name }}
+                    </div>
+                    <div class="product-price" style="font-size: 1.2rem; color: #2e652e; font-weight: bold; margin-top: 10px;">
+                        {% if favorite.product.popust %}
+                            <span style="color: #999; text-decoration: line-through; font-size: 0.9rem;">{{ favorite.product.price }} ден.</span>
+                            {{ favorite.product.actual_price }} ден.
+                            <span style="background-color: #e74c3c; color: white; padding: 3px 8px; border-radius: 3px; font-size: 0.8rem; margin-left: 8px;">Попуст!</span>
+                        {% else %}
+                            {{ favorite.product.price }} ден.
+                        {% endif %}
+                    </div>
+                    <div class="product-store" style="margin-top: 10px;">
+                        {% if favorite.product.store == 'Vero' %}
+                            <img src="{% static 'images/vero_logo1.png' %}" alt="Vero" style="height: 35px;">
+                        {% elif favorite.product.store == 'Ramstore' %}
+                            <img src="{% static 'images/ramstore_logo.png' %}" alt="Ramstore" style="height: 35px;">
+                        {% elif favorite.product.store == 'Reptil' %}
+                            <img src="{% static 'images/reptil_logo.jpg' %}" alt="Reptil" style="height: 35px;">
+                        {% elif favorite.product.store == 'Zito' %}
+                            <img src="{% static 'images/zito_logo.png' %}" alt="Zito" style="height: 35px;">
+                        {% endif %}
+                    </div>
+                </div>
+            </a>
+        </div>
+        {% empty %}
+        <div style="grid-column: 1 / -1; text-align: center; padding: 40px; color: #666; background: rgba(255, 255, 255, 0.8); border-radius: 10px; margin: 20px 0;">
+            <p style="font-size: 1.2rem;">Се уште немаш омилени продукти</p>
+            <a href="{% url 'product_list' %}" style="display: inline-block; margin-top: 20px; padding: 10px 20px; background-color: #2e652e; color: white; border-radius: 5px; text-decoration: none;">Разгледај продукти</a>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+
+<script>
+function toggleFavorite(button, productId) {
+    const icon = button.querySelector('i');
+    const isFavorite = icon.classList.contains('fas');
+
+    fetch('/toggle-favorite/', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRFToken': '{{ csrf_token }}'
+        },
+        body: JSON.stringify({
+            product_id: productId
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            if (data.is_favorite) {
+                icon.classList.add('fas', 'active');
+                icon.classList.remove('far');
+                button.classList.add('pulse');
+                setTimeout(() => button.classList.remove('pulse'), 600);
+            } else {
+                icon.classList.remove('fas', 'active');
+                icon.classList.add('far');
+                // Optional: Remove the product card from DOM if on favorites page
+                if (window.location.pathname.includes('favorites')) {
+                    button.closest('.product-card').remove();
+                }
+            }
+        }
+    });
+}
+</script>
+
+<style>
+@media (max-width: 768px) {
+    .grid {
+        grid-template-columns: repeat(2, 1fr) !important;
+        gap: 15px !important;
+    }
+    .product-card {
+        border-radius: 8px !important;
+    }
+    .product-image {
+        height: 150px !important;
+    }
+}
+
+@media (max-width: 480px) {
+    .grid {
+        grid-template-columns: 1fr !important;
+    }
+    h1 {
+        font-size: 1.5rem !important;
+        padding-bottom: 10px !important;
+    }
+}
+
+@keyframes pulseHeart {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.3); }
+    100% { transform: scale(1); }
+}
+.pulse {
+    animation: pulseHeart 0.6s ease;
+}
+body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+            background-color: #f5f5f5;
+        }
+</style>
+{% endblock %}
Index: main/templates/main/header.html
===================================================================
--- main/templates/main/header.html	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
+++ main/templates/main/header.html	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
@@ -0,0 +1,848 @@
+{% load static %}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+    <title>Title</title>
+    <style>
+        /* Header */
+        .main-header {
+            background-color: white;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+        }
+
+        .header-top {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 20px;
+            border-bottom: 1px solid #e5e5e5;
+        }
+
+        .logo img {
+            height: 60px;
+        }
+
+        .header-search {
+            flex-grow: 1;
+            margin: 0 20px;
+            position: relative;
+        }
+
+        .header-search input {
+            width: 97%;
+            padding: 12px 20px;
+            border: 1px solid #ddd;
+            border-radius: 30px;
+            font-size: 16px;
+            background-color: #f5f5f5;
+        }
+
+        .header-search button {
+            position: absolute;
+            right: 15px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: none;
+            border: none;
+            color: #666;
+            cursor: pointer;
+            font-size: 18px;
+        }
+
+        .user-actions {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+
+        .user-actions a {
+            color: #333;
+            text-decoration: none;
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+
+        .user-actions a:hover {
+            color: #2e652e;
+        }
+
+        /* Auth Form Styles */
+        .auth-form {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .auth-btn {
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-weight: 600;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 5px;
+            transition: all 0.3s ease;
+        }
+
+        .auth-btn.logout {
+            background-color: #2e652e;
+            color: white;
+            border: none;
+            cursor: pointer;
+        }
+
+        .auth-btn.logout:hover {
+            background-color: #1f3f1f;
+            transform: translateY(-1px);
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+
+        .auth-btn:not(.logout) {
+            color: #333;
+            background-color: #f5f5f5;
+        }
+
+        .auth-btn:not(.logout):hover {
+            background-color: #e0e0e0;
+        }
+
+        /* List Selector Styles */
+        .list-selector-container {
+            position: relative;
+            min-width: 180px;
+        }
+
+        .list-selector {
+            appearance: none;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            width: 100%;
+            padding: 8px 35px 8px 15px;
+            border: 1px solid #ddd;
+            border-radius: 20px;
+            background-color: #f5f5f5;
+            font-size: 14px;
+            color: #333;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%232e652e' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 12px center;
+            background-size: 12px;
+        }
+
+        .list-selector:focus {
+            outline: none;
+            border-color: #2e652e;
+            box-shadow: 0 0 0 2px rgba(46, 101, 46, 0.2);
+        }
+
+        .list-selector:hover {
+            background-color: #e8f5e9;
+        }
+
+        .list-selector option {
+            padding: 8px;
+            background-color: white;
+        }
+
+        /* Navigation */
+        .main-nav {
+            padding: 15px 30px;
+            background-color: #2e652e;
+        }
+
+        .main-nav ul {
+            display: flex;
+            list-style: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        .main-nav li {
+            margin-right: 20px;
+        }
+
+        .main-nav a {
+            color: white;
+            text-decoration: none;
+            font-weight: 600;
+            padding: 5px 0;
+            position: relative;
+        }
+
+        .main-nav a:hover {
+            color: #fdd835;
+        }
+
+        .main-nav a::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background-color: #fdd835;
+            transition: width 0.3s ease;
+        }
+
+        .main-nav a:hover::after {
+            width: 100%;
+        }
+
+        /* Mobile Menu */
+        #mobile-header {
+            display: none;
+            justify-content: space-between;
+            align-items: center;
+            padding: 15px 20px;
+            background: linear-gradient(135deg, #2e652e, #1f3f1f);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+            z-index: 1001;
+            position: relative;
+        }
+
+        #mobile-logo img {
+            height: 50px;
+        }
+
+        .menu-toggle {
+            font-size: 28px;
+            color: white;
+            cursor: pointer;
+            transition: transform 0.3s ease;
+        }
+
+        .menu-toggle:hover {
+            transform: scale(1.1);
+        }
+
+        .mobile-menu {
+            position: fixed;
+            top: 0;
+            right: -100%;
+            width: 75%;
+            height: 100vh;
+            background: linear-gradient(135deg, #2e652e, #1f3f1f);
+            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
+            transition: right 0.3s ease;
+            padding: 20px;
+            z-index: 1002;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .mobile-menu.open {
+            right: 0;
+        }
+
+        .mobile-menu-header {
+            display: flex;
+            justify-content: flex-end;
+            margin-bottom: 20px;
+        }
+
+        .close-btn {
+            cursor: pointer;
+            font-size: 28px;
+            color: #fdd835;
+            transition: color 0.3s ease;
+        }
+
+        .close-btn:hover {
+            color: white;
+        }
+
+        .mobile-search-form {
+            display: flex;
+            align-items: center;
+            padding: 12px 16px;
+            gap: 10px;
+            background: white;
+            border-radius: 25px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            margin-bottom: 20px;
+        }
+
+        .mobile-search-form input {
+            flex: 1;
+            padding: 10px 15px;
+            border: none;
+            border-radius: 20px;
+            font-size: 14px;
+            outline: none;
+            background: #f5f5f5;
+        }
+
+        .mobile-search-form button {
+            background-color: #2e652e;
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            border-radius: 50%;
+            font-size: 16px;
+            cursor: pointer;
+            transition: background-color 0.3s ease, transform 0.3s ease;
+        }
+
+        .mobile-search-form button:hover {
+            background-color: #1f3f1f;
+            transform: scale(1.1);
+        }
+
+        .mobile-nav {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+
+        .mobile-nav a {
+            color: white;
+            text-decoration: none;
+            font-size: 18px;
+            padding: 10px 15px;
+            border-radius: 8px;
+            transition: background-color 0.3s ease, color 0.3s ease;
+        }
+
+        .mobile-nav a:hover {
+            background-color: #fdd835;
+            color: #2e652e;
+            transform: translateX(5px);
+        }
+
+        /* Mobile List Selector */
+        .mobile-list-selector-container {
+            margin-bottom: 20px;
+        }
+
+        .mobile-list-selector {
+            width: 100%;
+            padding: 12px 15px;
+            border: 1px solid #ddd;
+            border-radius: 25px;
+            background-color: white;
+            font-size: 16px;
+            color: #333;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            appearance: none;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%232e652e' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 15px center;
+            background-size: 12px;
+        }
+
+        .mobile-list-selector:focus {
+            outline: none;
+            border-color: #2e652e;
+            box-shadow: 0 0 0 2px rgba(46, 101, 46, 0.2);
+        }
+
+        #overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 1000;
+        }
+
+        #overlay.active {
+            display: block;
+        }
+
+        /* Mobile Bottom Navigation */
+        .mobile-bottom-nav {
+            display: none;
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            background-color: white;
+            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+            z-index: 999;
+            padding: 8px 0;
+        }
+
+        .mobile-bottom-nav-container {
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+
+        .mobile-bottom-nav-btn {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-decoration: none;
+            color: #555;
+            font-size: 12px;
+            padding: 5px 0;
+            flex: 1;
+        }
+
+        .mobile-bottom-nav-btn i {
+            font-size: 20px;
+            margin-bottom: 4px;
+            color: #2e652e;
+        }
+
+        .mobile-bottom-nav-btn.active {
+            color: #2e652e;
+            font-weight: bold;
+        }
+
+        .mobile-bottom-nav-btn.active i {
+            color: #2e652e;
+        }
+
+        .mobile-bottom-nav-selector {
+            flex: 2;
+            padding: 0 10px;
+        }
+
+        .mobile-bottom-list-selector {
+            width: 100%;
+            padding: 8px 15px;
+            border: 1px solid #ddd;
+            border-radius: 20px;
+            background-color: #f5f5f5;
+            font-size: 14px;
+            color: #333;
+            cursor: pointer;
+            appearance: none;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%232e652e' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 10px center;
+            background-size: 10px;
+        }
+
+        @media (max-width: 768px) {
+            .main-header {
+                display: none;
+            }
+
+            #mobile-header {
+                display: flex;
+            }
+
+            .mobile-bottom-nav {
+                display: block;
+            }
+
+            .list-selector-container {
+                min-width: 150px;
+            }
+
+            .auth-form {
+                flex-direction: column;
+                gap: 10px;
+                width: 100%;
+            }
+
+            .list-selector-container {
+                width: 100%;
+            }
+
+            .auth-btn.logout {
+                width: 100%;
+                justify-content: center;
+            }
+
+            /* Add padding to content to prevent bottom nav overlap */
+            body {
+                padding-bottom: 60px;
+            }
+        }
+    </style>
+</head>
+<body>
+
+<!-- Header -->
+<header class="main-header">
+    <div class="header-top">
+        <div class="logo">
+            <a href="{% url 'home' %}"><img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого"/></a>
+        </div>
+        <div class="header-search">
+            <form method="GET" action="{% url 'product_list' %}" id="searchForm">
+                <input type="text" name="search" id="searchInput" placeholder="Пребарај производи..."
+                       value="{{ request.GET.search }}">
+                <button type="submit"><i class="fas fa-search"></i></button>
+            </form>
+            <div id="suggestions"
+                 style="position: absolute; background: white; border: 1px solid #ddd; border-radius: 5px; width: 98%; max-height: 200px; overflow-y: auto; display: none; z-index: 2"></div>
+        </div>
+        <div class="user-actions">
+            {% if user.is_authenticated %}
+                <form method="post" action="{% url 'logout' %}" class="auth-form">
+                    {% csrf_token %}
+                    <div class="list-selector-container" style="display: flex; align-items: center; gap: 8px;">
+                        <a href="{% url 'favorites_list' %}" title="Омилени" style="color: #2e652e;">
+                            <i class="fas fa-heart" style="font-size: 18px;"></i>
+                        </a>
+                        <select id="listSelector" class="list-selector">
+                            <option value="">-- Избери листа --</option>
+                        </select>
+                    </div>
+
+                    <button type="submit" class="auth-btn logout">
+                        <i class="fas fa-sign-out-alt"></i> Одјави се
+                    </button>
+                </form>
+            {% else %}
+                <a href="{% url 'login' %}" class="auth-btn">
+                    <i class="fas fa-user"></i> Најави се
+                </a>
+                <a href="{% url 'register' %}" class="auth-btn">
+                    <i class="fas fa-user-plus"></i> Регистрирај се
+                </a>
+            {% endif %}
+        </div>
+    </div>
+    <nav class="main-nav">
+        <ul>
+            <li><a href="{% url 'product_list' %}">Каталог</a></li>
+            <li style="z-index: 0"><a href="{% url 'stats' %}">Статистика</a></li>
+            <li><a href="{% url 'view_lists' %}">Листи</a></li>
+        </ul>
+    </nav>
+</header>
+
+<!-- Mobile Menu -->
+<div id="mobile-header">
+    <div id="mobile-logo">
+        <img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого">
+    </div>
+    <div class="menu-toggle" onclick="toggleMobileMenu()">☰</div>
+</div>
+
+<!-- Mobile Menu -->
+<div id="mobile-menu" class="mobile-menu">
+    <div class="mobile-menu-header">
+        <span class="close-btn" onclick="toggleMobileMenu()">×</span>
+    </div>
+
+    <form method="GET" action="{% url 'product_list' %}" class="mobile-search-form" id="mobileSearchForm">
+        <input type="text" name="search" id="mobileSearchInput" placeholder="Пребарај производ..."
+               value="{{ request.GET.search }}">
+        <button type="submit"><i class="fas fa-search"></i></button>
+    </form>
+
+    {% if user.is_authenticated %}
+        <div class="mobile-list-selector-container">
+            <select id="mobileListSelector" class="mobile-list-selector">
+                <option value="">-- Избери листа --</option>
+            </select>
+        </div>
+    {% endif %}
+
+    <nav class="mobile-nav">
+        <a href="{% url 'home' %}">Дома</a>
+        <a href="{% url 'product_list' %}">Каталог</a>
+        <a href="{% url 'stats' %}">Статистика</a>
+        <a href="{% url 'view_lists' %}">Листи</a>
+
+        {% if user.is_authenticated %}
+            <a href="{% url 'logout' %}">Одјави се</a>
+        {% else %}
+            <a href="{% url 'login' %}">Најави се</a>
+            <a href="{% url 'register' %}">Регистрирај се</a>
+        {% endif %}
+    </nav>
+</div>
+<div id="overlay" onclick="toggleMobileMenu()"></div>
+
+<!-- Mobile Bottom Navigation -->
+<nav class="mobile-bottom-nav">
+    <div class="mobile-bottom-nav-container">
+        <a href="{% url 'home' %}" class="mobile-bottom-nav-btn {% if request.path == '/' %}active{% endif %}">
+            <i class="fas fa-home"></i>
+            <span>Дома</span>
+        </a>
+
+        <a href="{% url 'favorites_list' %}" class="mobile-bottom-nav-btn">
+            <i class="fas fa-heart"></i>
+            <span>Омилени</span>
+        </a>
+
+
+        {% if user.is_authenticated %}
+            <div class="mobile-bottom-nav-selector">
+                <select id="mobileBottomListSelector" class="mobile-bottom-list-selector">
+                    <option value="">Листи</option>
+                </select>
+            </div>
+        {% else %}
+            <a href="{% url 'view_lists' %}"
+               class="mobile-bottom-nav-btn {% if 'lists' in request.path %}active{% endif %}">
+                <i class="fas fa-list"></i>
+                <span>Листи</span>
+            </a>
+        {% endif %}
+
+        {#        <a href="{% url 'product_list' %}" class="mobile-bottom-nav-btn {% if 'product' in request.path %}active{% endif %}">#}
+        {#            <i class="fas fa-search"></i>#}
+        {#            <span>Пребарувај</span>#}
+        {#        </a>#}
+    </div>
+</nav>
+
+{% block content %}
+
+{% endblock %}
+
+
+<script>
+    function toggleMobileMenu() {
+        const menu = document.getElementById("mobile-menu");
+        const overlay = document.getElementById("overlay");
+        menu.classList.toggle("open");
+        overlay.classList.toggle("active");
+    }
+
+    document.addEventListener('DOMContentLoaded', function () {
+        // Search functionality
+        const searchInput = document.getElementById('searchInput');
+        const mobileSearchInput = document.getElementById('mobileSearchInput');
+        const suggestionsDiv = document.getElementById('suggestions');
+        const searchForm = document.getElementById('searchForm');
+        const mobileSearchForm = document.getElementById('mobileSearchForm');
+
+        function transliterateLatinToCyrillic(text) {
+            const map = {
+                'dzh': 'џ', 'dzs': 'џ', 'dsh': 'џ',
+                'zh': 'ж', 'ch': 'ч', 'sh': 'ш', 'lj': 'љ', 'nj': 'њ', 'kj': 'ќ', 'dj': 'ѓ',
+                'zs': 'ж', 'hs': 'ш', 'cx': 'ч', 'sx': 'ш', 'jx': 'ж',
+                'tz': 'ц', 'ts': 'ц', 'tc': 'ц', 'dz': 'џ',
+                'a': 'а', 'b': 'б', 'v': 'в', 'g': 'г', 'd': 'д', 'e': 'е', 'z': 'з', 'i': 'и',
+                'j': 'ј', 'k': 'к', 'l': 'л', 'm': 'м', 'n': 'н', 'o': 'о', 'p': 'п', 'r': 'р',
+                's': 'с', 't': 'т', 'u': 'у', 'f': 'ф', 'h': 'х', 'c': 'ц',
+                'y': 'ј', 'w': 'в', 'x': 'кс', 'q': 'к',
+                'ia': 'ја', 'ie': 'је', 'io': 'јо', 'iu': 'ју'
+            };
+
+            const typoPatterns = [
+                {pattern: /sampon/gi, replace: 'shampon'},
+                {pattern: /cresi/gi, replace: 'creshi'},
+                {pattern: /stipki/gi, replace: 'shtipki'},
+                {pattern: /sch/gi, replace: 'sh'},
+                {pattern: /ck/gi, replace: 'k'},
+                {pattern: /ph/gi, replace: 'f'},
+                {pattern: /th/gi, replace: 't'},
+                {pattern: /([a-z]),([a-z])/gi, replace: '$1$2'},
+                {pattern: /([a-z])\.([a-z])/gi, replace: '$1$2'},
+                {pattern: /([a-z])\1/gi, replace: '$1'}
+            ];
+
+            let normalizedText = text.toLowerCase();
+            for (const {pattern, replace} of typoPatterns) {
+                normalizedText = normalizedText.replace(pattern, replace);
+            }
+
+            let result = '';
+            let i = 0;
+            while (i < normalizedText.length) {
+                if (map[normalizedText.substring(i, i + 3)]) {
+                    result += map[normalizedText.substring(i, i + 3)];
+                    i += 3;
+                } else if (map[normalizedText.substring(i, i + 2)]) {
+                    result += map[normalizedText.substring(i, i + 2)];
+                    i += 2;
+                } else if (map[normalizedText[i]]) {
+                    result += map[normalizedText[i]];
+                    i++;
+                } else {
+                    result += normalizedText[i];
+                    i++;
+                }
+            }
+            return result;
+        }
+
+        function setupSearch(input, form) {
+            input.addEventListener('input', function () {
+                const query = this.value.trim();
+                if (query.length < 2) {
+                    suggestionsDiv.style.display = 'none';
+                    return;
+                }
+
+                fetch(`/search-suggestions/?q=${encodeURIComponent(query)}`)
+                    .then(response => response.json())
+                    .then(data => {
+                        suggestionsDiv.innerHTML = '';
+                        if (data.suggestions.length > 0) {
+                            data.suggestions.forEach(suggestion => {
+                                const div = document.createElement('div');
+                                div.textContent = suggestion;
+                                div.style.padding = '5px 10px';
+                                div.style.cursor = 'pointer';
+                                div.addEventListener('click', function () {
+                                    input.value = transliterateLatinToCyrillic(suggestion);
+                                    suggestionsDiv.style.display = 'none';
+                                    form.submit();
+                                });
+                                suggestionsDiv.appendChild(div);
+                            });
+                            suggestionsDiv.style.display = 'block';
+                        } else {
+                            suggestionsDiv.style.display = 'none';
+                        }
+                    });
+            });
+
+            input.addEventListener('keydown', function (e) {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    suggestionsDiv.style.display = 'none';
+                    input.value = transliterateLatinToCyrillic(input.value);
+                    form.submit();
+                }
+            });
+        }
+
+        setupSearch(searchInput, searchForm);
+        setupSearch(mobileSearchInput, mobileSearchForm);
+
+        document.addEventListener('click', function (e) {
+            if (!searchInput.contains(e.target) && !suggestionsDiv.contains(e.target) &&
+                !mobileSearchInput.contains(e.target)) {
+                suggestionsDiv.style.display = 'none';
+            }
+        });
+    });
+
+    document.addEventListener("DOMContentLoaded", function () {
+        fetch('/api/lists/')
+            .then(response => response.json())
+            .then(data => {
+                // Desktop list selector
+                const dropdown = document.getElementById('listSelector');
+                // Mobile list selector
+                const mobileDropdown = document.getElementById('mobileListSelector');
+                // Mobile bottom list selector
+                const mobileBottomDropdown = document.getElementById('mobileBottomListSelector');
+
+                data.lists.forEach(list => {
+                    const option = document.createElement('option');
+                    option.value = list.id;
+                    option.text = list.name;
+
+                    if (dropdown) dropdown.appendChild(option);
+                    if (mobileDropdown) {
+                        const mobileOption = option.cloneNode(true);
+                        mobileDropdown.appendChild(mobileOption);
+                    }
+                    if (mobileBottomDropdown) {
+                        const mobileBottomOption = option.cloneNode(true);
+                        mobileBottomDropdown.appendChild(mobileBottomOption);
+                    }
+                });
+            });
+    });
+
+    document.addEventListener('DOMContentLoaded', function () {
+        const addToListButtons = document.querySelectorAll('.add-to-list-btn');
+
+        addToListButtons.forEach(button => {
+            button.addEventListener('click', async () => {
+                const productId = button.dataset.productId;
+                const selectedListId = document.getElementById('listSelector') ?
+                    document.getElementById('listSelector').value :
+                    document.getElementById('mobileListSelector').value;
+
+                if (!selectedListId) {
+                    alert("Ве молиме изберете листа.");
+                    return;
+                }
+
+                try {
+                    const response = await fetch('/api/lists/add-product/', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRFToken': getCookie('csrftoken'),
+                        },
+                        body: JSON.stringify({
+                            product_id: productId,
+                            list_id: selectedListId
+                        })
+                    });
+
+                    const result = await response.json();
+                    if (result.success) {
+                        {#alert("Производот е додаден во листата!");#}
+                    } else {
+                        alert("Грешка: " + result.message);
+                    }
+                } catch (error) {
+                    console.error("Fetch error:", error);
+                    alert("Настана грешка. Обидете се повторно.");
+                }
+            });
+        });
+
+        // Helper for CSRF token
+        function getCookie(name) {
+            let cookieValue = null;
+            if (document.cookie && document.cookie !== '') {
+                const cookies = document.cookie.split(';');
+                for (let i = 0; i < cookies.length; i++) {
+                    const cookie = cookies[i].trim();
+                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                        break;
+                    }
+                }
+            }
+            return cookieValue;
+        }
+    });
+
+    document.querySelectorAll('.add-to-list-btn').forEach(button => {
+        button.addEventListener('click', function () {
+            button.classList.remove('pulse-on-click'); // reset animation if applied
+            void button.offsetWidth; // force reflow so animation can be reapplied
+            button.classList.add('pulse-on-click');
+        });
+    });
+
+    // Sync list selectors
+    document.addEventListener('DOMContentLoaded', function () {
+        const listSelectors = [
+            document.getElementById('listSelector'),
+            document.getElementById('mobileListSelector'),
+            document.getElementById('mobileBottomListSelector')
+        ].filter(el => el !== null);
+
+        listSelectors.forEach(selector => {
+            selector.addEventListener('change', function () {
+                const selectedValue = this.value;
+                listSelectors.forEach(s => {
+                    if (s !== this) {
+                        s.value = selectedValue;
+                    }
+                });
+            });
+        });
+    });
+</script>
+</body>
+</html>
Index: main/templates/main/list_detail.html
===================================================================
--- main/templates/main/list_detail.html	(revision fef3b4d766831b584534962ac137a311239ecc91)
+++ main/templates/main/list_detail.html	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
@@ -1,3 +1,7 @@
+{% extends 'main/header.html' %}
+
 {% load static %}
+{% block content %}
+
 <!DOCTYPE html>
 <html lang="en">
@@ -12,7 +16,7 @@
             --secondary-color: #3498db;
             --accent-color: #28a745;
-            --background-overlay: rgba(255, 255, 255, 0.9);
+            --background-overlay: rgba(255, 255, 255, 0.97);
             --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-            --border-radius: 12px;
+            {#--border-radius: 12px;#}
             --transition: all 0.3s ease;
         }
@@ -47,278 +51,16 @@
         }
 
-        /* Header */
-        .main-header {
-            background-color: white;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            position: sticky;
-            top: 0;
-            z-index: 1000;
-            display: none;
-        }
-
-        .header-top {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px 20px;
-            border-bottom: 1px solid #e5e5e5;
-        }
-
-        .logo img {
-            height: 60px;
-        }
-
-        .header-search {
-            flex-grow: 1;
-            margin: 0 20px;
-            position: relative;
-        }
-
-        .header-search input {
-            width: 97%;
-            padding: 12px 20px;
-            border: 1px solid #ddd;
-            border-radius: 30px;
-            font-size: 16px;
-            background-color: #f5f5f5;
-        }
-
-        .header-search button {
-            position: absolute;
-            right: 15px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: none;
-            border: none;
-            color: #666;
-            cursor: pointer;
-            font-size: 18px;
-        }
-
-        .user-actions {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-
-        .user-actions a, .user-actions button {
-            color: #333;
-            text-decoration: none;
-            font-size: 14px;
-            display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-
-        .user-actions a:hover {
-            color: #2e652e;
-        }
-
-        .logout-btn {
-            background-color: #2e652e;
-            color: white;
-            border: none;
-            padding: 8px 16px;
-            border-radius: 20px;
-            font-weight: 600;
-            cursor: pointer;
-        }
-
-        .logout-btn:hover {
-            background-color: #1f3f1f;
-        }
-
-        .main-nav {
-            padding: 15px 30px;
-            background-color: #2e652e;
-        }
-
-        .main-nav ul {
-            display: flex;
-            list-style: none;
-            margin: 0;
-            padding: 0;
-        }
-
-        .main-nav li {
-            margin-right: 20px;
-        }
-
-        .main-nav a {
-            color: white;
-            text-decoration: none;
-            font-weight: 600;
-            padding: 5px 0;
-            position: relative;
-        }
-
-        .main-nav a:hover {
-            color: #fdd835;
-        }
-
-        .main-nav a::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 0;
-            height: 2px;
-            background-color: #fdd835;
-            transition: width 0.3s ease;
-        }
-
-        .main-nav a:hover::after {
-            width: 100%;
-        }
-
-        /* Mobile Header */
-        #mobile-header {
-            display: none;
-            justify-content: space-between;
-            align-items: center;
-            padding: 15px 20px;
-            background: linear-gradient(135deg, #2e652e, #1f3f1f);
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-            z-index: 1001;
-            position: relative;
-        }
-
-        #mobile-logo img {
-            height: 50px;
-        }
-
-        .menu-toggle {
-            font-size: 28px;
-            color: white;
-            cursor: pointer;
-            transition: transform 0.3s ease;
-        }
-
-        .menu-toggle:hover {
-            transform: scale(1.1);
-        }
-
-        /* Mobile Menu */
-        .mobile-menu {
-            position: fixed;
-            top: 0;
-            right: -100%;
-            width: 75%;
-            height: 100vh;
-            background: linear-gradient(135deg, #f0f7f0, #e0e8e0);
-            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
-            transition: right 0.3s ease;
-            padding: 20px;
-            z-index: 1002;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .mobile-menu.open {
-            right: 0;
-        }
-
-        .mobile-menu-header {
-            display: flex;
-            justify-content: flex-end;
-            margin-bottom: 20px;
-        }
-
-        .close-btn {
-            cursor: pointer;
-            font-size: 28px;
-            color: #2e652e;
-            transition: color 0.3s ease;
-        }
-
-        .close-btn:hover {
-            color: #1f3f1f;
-        }
-
-        .mobile-search-form {
-            display: flex;
-            align-items: center;
-            padding: 12px 16px;
-            gap: 10px;
-            background: white;
-            border-radius: 25px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            margin-bottom: 20px;
-        }
-
-        .mobile-search-form input {
-            flex: 1;
-            padding: 10px 15px;
-            border: none;
-            border-radius: 20px;
-            font-size: 14px;
-            outline: none;
-            background: #f5f5f5;
-        }
-
-        .mobile-search-form button {
-            background-color: #2e652e;
-            color: white;
-            border: none;
-            padding: 10px 15px;
-            border-radius: 50%;
-            font-size: 16px;
-            cursor: pointer;
-            transition: background-color 0.3s ease, transform 0.3s ease;
-        }
-
-        .mobile-search-form button:hover {
-            background-color: #1f3f1f;
-            transform: scale(1.1);
-        }
-
-        .mobile-nav {
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-        }
-
-        .mobile-nav a {
-            color: #2e652e;
-            text-decoration: none;
-            font-size: 18px;
-            padding: 10px 15px;
-            border-radius: 8px;
-            transition: background-color 0.3s ease, color 0.3s ease;
-        }
-
-        .mobile-nav a:hover {
-            background-color: #2e652e;
-            color: white;
-            transform: translateX(5px);
-        }
-
-        #overlay {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100vw;
-            height: 100vh;
-            background: rgba(0, 0, 0, 0.5);
-            z-index: 1000;
-        }
-
-        #overlay.active {
-            display: block;
-        }
-
         /* Sticky Price Summary */
         .sticky-price-summary {
             position: sticky;
             top: 0;
-            background-color: rgba(46, 101, 46, 0.9);
+            background-color: rgba(46, 101, 46, 0.95);
             color: white;
-            padding: 10px 20px;
+            padding: 12px 30px;
             display: flex;
             justify-content: space-between;
             align-items: center;
             z-index: 999;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
         }
 
@@ -327,15 +69,16 @@
             flex-direction: column;
             align-items: center;
-            font-size: 14px;
+            font-size: 15px;
         }
 
         .sticky-price-summary .summary-item span:first-child {
             font-weight: 500;
-            margin-bottom: 3px;
+            margin-bottom: 5px;
+            letter-spacing: 0.5px;
         }
 
         .sticky-price-summary .summary-item span:last-child {
             font-weight: 700;
-            font-size: 16px;
+            font-size: 17px;
         }
 
@@ -345,16 +88,20 @@
 
         .sticky-price-summary .group-button {
-            padding: 8px 16px;
+            padding: 10px 20px;
             background-color: #4caf50;
             color: white;
             border: none;
-            border-radius: 20px;
+            border-radius: 25px;
             cursor: pointer;
-            font-size: 14px;
-            transition: background-color 0.3s ease;
+            font-size: 15px;
+            font-weight: 600;
+            transition: var(--transition);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
         }
 
         .sticky-price-summary .group-button:hover {
             background-color: #45a049;
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
         }
 
@@ -365,5 +112,5 @@
             align-items: flex-start;
             gap: 20px;
-            padding: 20px;
+            padding: 30px;
             width: 100%;
             margin-top: 20px;
@@ -371,23 +118,27 @@
 
         .shopping-list-container {
-            max-width: 1000px;
+            max-width: 1200px;
             width: 100%;
             background-color: var(--background-overlay);
-            padding: 30px;
+            padding: 35px;
             border-radius: var(--border-radius);
             box-shadow: var(--shadow);
+            border: 1px solid rgba(0, 0, 0, 0.05);
         }
 
         .shopping-list-title {
             text-align: center;
-            margin-bottom: 25px;
-            font-size: 28px;
+            margin-bottom: 30px;
+            font-size: 32px;
             color: var(--primary-color);
             text-transform: uppercase;
+            letter-spacing: 1px;
+            font-weight: 700;
+            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
         }
 
         .shopping-list-header {
             display: grid;
-            grid-template-columns: 40px 1fr 120px 120px 120px;
+            grid-template-columns: 50px 60px 1fr 120px 140px 100px;
             gap: 20px;
             margin-bottom: 15px;
@@ -395,8 +146,9 @@
             color: white;
             text-transform: uppercase;
-            font-size: 14px;
+            font-size: 15px;
             background: linear-gradient(135deg, #549249, #3a6b33);
-            padding: 15px;
+            padding: 18px 20px;
             border-radius: 10px;
+            letter-spacing: 0.5px;
         }
 
@@ -404,22 +156,30 @@
             display: flex;
             flex-direction: column;
-            gap: 10px;
+            gap: 12px;
         }
 
         .shopping-list-item {
             display: grid;
-            grid-template-columns: 40px 50px 375px 110px 135px auto;
+            grid-template-columns: 50px 60px 1fr 120px 140px 100px;
             gap: 20px;
             align-items: center;
-            padding: 12px;
-            border-radius: 8px;
+            padding: 18px 20px;
+            border-radius: 10px;
             background-color: #fff;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
+            transition: var(--transition);
+            border: 1px solid rgba(0, 0, 0, 0.05);
+        }
+
+        .shopping-list-item:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
         }
 
         .shopping-list-item.checked {
-            background-color: #f1f3f5;
+            background-color: #f8f9fa;
             text-decoration: line-through;
             color: #888;
+            opacity: 0.8;
         }
 
@@ -429,16 +189,22 @@
 
         .checkbox label {
-            width: 20px;
-            height: 20px;
+            width: 22px;
+            height: 22px;
             border: 2px solid var(--secondary-color);
-            border-radius: 4px;
+            border-radius: 5px;
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
+            transition: var(--transition);
+        }
+
+        .checkbox label:hover {
+            border-color: #2980b9;
         }
 
         .checkbox input:checked + label {
             background-color: var(--secondary-color);
+            border-color: var(--secondary-color);
         }
 
@@ -446,14 +212,22 @@
             content: '✓';
             color: white;
-            font-size: 12px;
+            font-size: 13px;
         }
 
         .quantity input {
             width: 80px;
-            padding: 6px;
-            font-size: 14px;
-            border: 1px solid #ddd;
-            border-radius: 6px;
+            padding: 10px;
+            font-size: 15px;
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
             text-align: center;
+            transition: var(--transition);
+            font-weight: 500;
+        }
+
+        .quantity input:focus {
+            border-color: var(--primary-color);
+            outline: none;
+            box-shadow: 0 0 0 2px rgba(46, 101, 46, 0.2);
         }
 
@@ -461,37 +235,40 @@
             font-weight: 500;
             color: #444;
-        }
-
-        .actions button {
+            font-size: 15px;
+        }
+
+        .price {
+            font-weight: 600;
+            color: #2c3e50;
+        }
+
+        .product-name {
+            font-weight: 500;
+            word-break: break-word;
+            font-size: 15px;
+            line-height: 1.4;
+        }
+
+        .actions {
+            display: flex;
+            justify-content: flex-end;
+        }
+
+        .remove-button {
             background-color: #e74c3c;
             border: none;
             color: white;
-            padding: 6px 12px;
-            border-radius: 6px;
+            padding: 10px 18px;
+            border-radius: 8px;
             cursor: pointer;
-        }
-
-        .action-button {
-            padding: 12px;
-            background-color: var(--secondary-color);
-            color: white;
-            border: none;
-            border-radius: var(--border-radius);
-            cursor: pointer;
-            font-size: 16px;
-            text-align: center;
-            text-decoration: none;
-        }
-
-        .action-button:hover {
-            background-color: #2980b9;
-        }
-
-        .back-button {
-            background-color: #6c757d;
-        }
-
-        .back-button:hover {
-            background-color: #5a6268;
+            font-size: 14px;
+            transition: var(--transition);
+            font-weight: 500;
+            margin-right: -50px;
+        }
+
+        .remove-button:hover {
+            background-color: #c0392b;
+            transform: translateY(-1px);
         }
 
@@ -501,19 +278,29 @@
             object-fit: cover;
             border-radius: 8px;
-            border: 1px solid #ccc;
-        }
-
-        /* Mobile Styles */
+            border: 1px solid #eee;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+        }
+
+        /* Mobile Styles (unchanged from your loved version) */
         @media (max-width: 768px) {
-            .main-header {
-                display: none;
-            }
-
-            #mobile-header {
-                display: flex;
-            }
-
             .sticky-price-summary {
-                top: 70px; /* Below mobile header */
+                top: 70px;
+                flex-wrap: wrap;
+                padding: 10px;
+            }
+
+            .sticky-price-summary .summary-item {
+                font-size: 12px;
+                margin: 5px;
+            }
+
+            .sticky-price-summary .summary-item span:last-child {
+                font-size: 14px;
+            }
+
+            .sticky-price-summary .group-button {
+                order: 1;
+                margin-top: 10px;
+                width: 100%;
             }
 
@@ -534,7 +321,7 @@
 
             .shopping-list-item {
-                grid-template-columns: 40px 1fr 100px;
+                grid-template-columns: 50px 1fr auto;
                 grid-template-rows: auto auto auto;
-                gap: 10px;
+                gap: 12px;
                 padding: 15px;
                 position: relative;
@@ -546,5 +333,5 @@
             }
 
-            .product {
+            .product-name {
                 grid-column: 2;
                 grid-row: 1;
@@ -563,13 +350,12 @@
                 grid-column: 3;
                 grid-row: 2;
-                margin-right: 10px;
+                text-align: right;
             }
 
             .store {
-                grid-column: 3;
+                grid-column: 2;
                 grid-row: 3;
-                margin-top: 5px;
-                word-wrap: break-word;
-                max-width: 100px;
+                font-size: 13px;
+                color: #666;
             }
 
@@ -587,5 +373,5 @@
 
             .quantity input {
-                width: 60px;
+                width: 70px;
             }
 
@@ -595,15 +381,9 @@
             }
 
-            .action-button {
-                padding: 10px;
-                font-size: 14px;
-            }
-
-            .sticky-price-summary .summary-item {
-                font-size: 12px;
-            }
-
-            .sticky-price-summary .summary-item span:last-child {
-                font-size: 14px;
+            .remove-button {
+                padding: 6px 12px;
+                font-size: 13px;
+                {#margin-left: -50px;#}\
+                margin-right: 50px;
             }
         }
@@ -611,6 +391,7 @@
         @media (max-width: 480px) {
             .shopping-list-item {
-                grid-template-columns: 30px 1fr 80px;
-                padding: 10px;
+                grid-template-columns: 40px 1fr auto;
+                padding: 12px;
+                gap: 10px;
             }
 
@@ -621,23 +402,22 @@
 
             .quantity input {
-                width: 50px;
+                width: 60px;
+                padding: 6px;
             }
 
             .price {
-                grid-column: 3;
-                grid-row: 2;
+                font-size: 14px;
+            }
+
+            .store {
                 font-size: 12px;
             }
 
-            .store {
-                grid-column: 3;
-                grid-row: 3;
+            .remove-button {
+                padding: 5px 10px;
                 font-size: 12px;
-                max-width: 80px;
-            }
-
-            .actions button {
-                padding: 4px 8px;
-                font-size: 12px;
+                {#margin-left: -50px;#}
+                margin-right: 1px;
+
             }
 
@@ -645,31 +425,20 @@
                 font-size: 20px;
             }
-
+        }
+
+        @media (min-width: 769px) {
             .sticky-price-summary {
-                padding: 8px 10px;
-            }
-
-            .sticky-price-summary .summary-item {
-                font-size: 11px;
-            }
-
-            .sticky-price-summary .summary-item span:last-child {
-                font-size: 13px;
-            }
-        }
-
-        @media (min-width: 769px) {
-            .main-header {
-                display: block;
-            }
-
-            #mobile-header {
-                display: none;
-            }
-
-            .sticky-price-summary {
-                top: 130px; /* Below main header */
-            }
-        }
+                top: 130px;
+            }
+        }
+
+        {#isklucok#}
+        {#i.fas.fa-search{#}
+        {#    margin-right: 35px;#}
+        {#}#}
+        {#.header-search input{#}
+        {#    margin-right: -20px;#}
+        {#    padding-right: 10px;#}
+        {#}#}
     </style>
 </head>
@@ -686,78 +455,4 @@
     {% endif %}
 </div>
-
-<!-- Header -->
-<header class="main-header">
-    <div class="header-top">
-        <div class="logo">
-            <a href="{% url 'home' %}"><img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого"/></a>
-        </div>
-        <div class="header-search">
-            <form method="GET" action="{% url 'product_list' %}" id="searchForm">
-                <input type="text" name="search" id="searchInput" placeholder="Пребарај производи..."
-                       value="{{ request.GET.search }}">
-                <button type="submit"><i class="fas fa-search"></i></button>
-            </form>
-            <div id="suggestions"
-                 style="position: absolute; background: white; border: 1px solid #ddd; border-radius: 5px; width: 98%; max-height: 200px; overflow-y: auto; display: none; z-index: 2;"></div>
-        </div>
-        <div class="user-actions">
-            {% if user.is_authenticated %}
-                <form method="post" action="{% url 'logout' %}" class="auth-form">
-                    {% csrf_token %}
-                    <button type="submit" class="logout-btn" style="color: white">
-                        <i class="fas fa-sign-out-alt"></i> Одјави се
-                    </button>
-                </form>
-            {% else %}
-                <a href="{% url 'login' %}" class="auth-btn">
-                    <i class="fas fa-user"></i> Најави се
-                </a>
-                <a href="{% url 'register' %}" class="auth-btn">
-                    <i class="fas fa-user-plus"></i> Регистрирај се
-                </a>
-            {% endif %}
-        </div>
-    </div>
-    <nav class="main-nav">
-        <ul>
-            <li><a href="{% url 'home' %}">Дома</a></li>
-            <li><a href="{% url 'product_list' %}">Каталог</a></li>
-            <li><a href="{% url 'stats' %}">Статистика</a></li>
-            <li><a href="{% url 'view_lists' %}">Листи</a></li>
-        </ul>
-    </nav>
-</header>
-
-<!-- Mobile Menu -->
-<div id="mobile-header">
-    <div id="mobile-logo">
-        <img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого">
-    </div>
-    <div class="menu-toggle" onclick="toggleMobileMenu()">☰</div>
-</div>
-<div id="mobile-menu" class="mobile-menu">
-    <div class="mobile-menu-header">
-        <span class="close-btn" onclick="toggleMobileMenu()">×</span>
-    </div>
-    <form method="GET" action="{% url 'product_list' %}" class="mobile-search-form" id="mobileSearchForm">
-        <input type="text" name="search" id="mobileSearchInput" placeholder="Пребарај производ..."
-               value="{{ request.GET.search }}">
-        <button type="submit"><i class="fas fa-search"></i></button>
-    </form>
-    <nav class="mobile-nav">
-        <a href="{% url 'home' %}">Дома</a>
-        <a href="{% url 'product_list' %}">Каталог</a>
-        <a href="{% url 'stats' %}">Статистика</a>
-        <a href="{% url 'view_lists' %}">Листи</a>
-        {% if user.is_authenticated %}
-            <a href="{% url 'logout' %}">Одјави се</a>
-        {% else %}
-            <a href="{% url 'login' %}">Најави се</a>
-            <a href="{% url 'register' %}">Регистрирај се</a>
-        {% endif %}
-    </nav>
-</div>
-<div id="overlay" onclick="toggleMobileMenu()"></div>
 
 <!-- Sticky Price Summary -->
@@ -789,4 +484,5 @@
             <div class="shopping-list-header">
                 <div></div>
+                <div>Слика</div>
                 <div>Продукт</div>
                 <div>Количина</div>
@@ -806,5 +502,5 @@
                             <img src="{{ item.product.image_url }}" alt="{{ item.product.name }}">
                         </div>
-                        <div class="product">{{ item.product.name }}</div>
+                        <div class="product-name">{{ item.product.name }}</div>
                         <div class="quantity">
                             <input type="number" class="quantity-input" min="1" value="{{ item.quantity }}"
@@ -820,21 +516,10 @@
             </div>
         {% else %}
-            <p style="text-align:center; color: #555;">Немате додадено продукти во оваа листа.</p>
+            <p style="text-align:center; color: #555; font-size: 16px; margin-top: 30px;">Немате додадено продукти во оваа листа.</p>
         {% endif %}
-        <div class="shopping-list-actions">
-            {#                <a href="{% url 'product_list' %}" class="action-button back-button">Назад до производи</a>#}
-            {#                <a href="{% url 'view_lists' %}" class="action-button back-button">Назад до листи</a>#}
-        </div>
     </div>
 </div>
 
 <script>
-    function toggleMobileMenu() {
-        const menu = document.getElementById("mobile-menu");
-        const overlay = document.getElementById("overlay");
-        menu.classList.toggle("open");
-        overlay.classList.toggle("active");
-    }
-
     document.addEventListener('DOMContentLoaded', () => {
         function getCookie(name) {
@@ -868,9 +553,6 @@
             });
 
-            document.getElementById('total-price').textContent = `${checked} ден.`;
-            document.getElementById('total-price-all').textContent = `${all} ден.`;
-            document.getElementById('checked-items').textContent = checkedCount;
-            document.getElementById('sticky-total-price').textContent = `${checked} ден.`;
-            document.getElementById('sticky-total-price-all').textContent = `${all} ден.`;
+            document.getElementById('sticky-total-price').textContent = `${checked.toFixed(2)} ден.`;
+            document.getElementById('sticky-total-price-all').textContent = `${all.toFixed(2)} ден.`;
             document.getElementById('sticky-checked-items').textContent = checkedCount;
         }
@@ -878,32 +560,76 @@
         function updateCheckedCount() {
             const checkedCount = document.querySelectorAll('.item-checkbox:checked').length;
-            document.getElementById('checked-items').textContent = checkedCount;
             document.getElementById('sticky-checked-items').textContent = checkedCount;
             updateAllPriceDisplays();
         }
 
+        // Checkbox functionality
         document.querySelectorAll('.item-checkbox').forEach(cb => {
             cb.addEventListener('change', () => {
+                const itemId = cb.closest('.shopping-list-item').dataset.itemId;
                 cb.closest('.shopping-list-item').classList.toggle('checked', cb.checked);
+
+                // Send update to server
+                fetch(`/update-list-item/${itemId}/`, {
+                    method: 'POST',
+                    headers: {
+                        'X-CSRFToken': csrftoken,
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        checked: cb.checked
+                    })
+                }).then(response => {
+                    if (!response.ok) {
+                        console.error('Failed to update item');
+                    }
+                });
+
                 updateCheckedCount();
             });
         });
 
+        // Quantity input functionality
         document.querySelectorAll('.quantity-input').forEach(input => {
-            input.addEventListener('input', updateAllPriceDisplays);
+            input.addEventListener('change', function() {
+                const itemId = this.closest('.shopping-list-item').dataset.itemId;
+                const newQuantity = this.value;
+
+                // Send update to server
+                fetch(`/update-list-item/${itemId}/`, {
+                    method: 'POST',
+                    headers: {
+                        'X-CSRFToken': csrftoken,
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        quantity: newQuantity
+                    })
+                }).then(response => {
+                    if (!response.ok) {
+                        console.error('Failed to update quantity');
+                    }
+                });
+
+                updateAllPriceDisplays();
+            });
         });
 
+        // Remove button functionality
         document.querySelectorAll('.remove-button').forEach(btn => {
             btn.addEventListener('click', () => {
                 const id = btn.dataset.itemId;
                 if (!confirm('Дали сте сигурни дека сакате да го отстраните овој производ?')) return;
+
                 fetch(`/remove-from-list/${id}/`, {
                     method: 'POST',
-                    headers: {'X-CSRFToken': csrftoken, 'Content-Type': 'application/json'},
+                    headers: {
+                        'X-CSRFToken': csrftoken,
+                        'Content-Type': 'application/json'
+                    },
                 }).then(res => {
                     if (res.ok) {
                         btn.closest('.shopping-list-item').remove();
                         const itemCount = document.querySelectorAll('.shopping-list-item').length;
-                        document.getElementById('total-items').textContent = itemCount;
                         document.getElementById('sticky-total-items').textContent = itemCount;
                         updateCheckedCount();
@@ -913,4 +639,5 @@
         });
 
+        // Group by store functionality
         let isGrouped = false;
         let originalOrder = [];
@@ -932,6 +659,6 @@
                 for (const store in grouped) {
                     const section = document.createElement('div');
-                    section.style.marginBottom = '10px';
-                    section.innerHTML = `<div style="font-weight:bold; margin:10px 0;">Продавница: <span style='color: darkgreen'>${store}</span></div>`;
+                    section.style.marginBottom = '25px';
+                    section.innerHTML = `<div style="font-weight:bold; margin:15px 0 10px; padding:12px 20px; background:#f1f8e9; border-radius:8px; color:#2e652e; font-size:16px; border-left:4px solid #2e652e;">${store}</div>`;
                     grouped[store].forEach(i => section.appendChild(i));
                     container.appendChild(section);
@@ -949,59 +676,9 @@
         });
 
+        // Initialize counts
         updateCheckedCount();
-
-        // Search suggestions
-        const searchInput = document.getElementById('searchInput');
-        const suggestionsDiv = document.getElementById('suggestions');
-        const searchForm = document.getElementById('searchForm');
-
-        if (searchInput && suggestionsDiv && searchForm) {
-            searchInput.addEventListener('input', function () {
-                const query = this.value.trim();
-                if (query.length < 2) {
-                    suggestionsDiv.style.display = 'none';
-                    return;
-                }
-
-                fetch(`/search-suggestions/?q=${encodeURIComponent(query)}`)
-                    .then(response => response.json())
-                    .then(data => {
-                        suggestionsDiv.innerHTML = '';
-                        if (data.suggestions.length > 0) {
-                            data.suggestions.forEach(suggestion => {
-                                const div = document.createElement('div');
-                                div.textContent = suggestion;
-                                div.style.padding = '5px 10px';
-                                div.style.cursor = 'pointer';
-                                div.addEventListener('click', function () {
-                                    searchInput.value = suggestion;
-                                    suggestionsDiv.style.display = 'none';
-                                    searchForm.submit();
-                                });
-                                suggestionsDiv.appendChild(div);
-                            });
-                            suggestionsDiv.style.display = 'block';
-                        } else {
-                            suggestionsDiv.style.display = 'none';
-                        }
-                    });
-            });
-
-            searchInput.addEventListener('keydown', function (e) {
-                if (e.key === 'Enter') {
-                    e.preventDefault();
-                    suggestionsDiv.style.display = 'none';
-                    searchForm.submit();
-                }
-            });
-
-            document.addEventListener('click', function (e) {
-                if (!searchInput.contains(e.target) && !suggestionsDiv.contains(e.target)) {
-                    suggestionsDiv.style.display = 'none';
-                }
-            });
-        }
     });
 </script>
 </body>
+{% endblock %}
 </html>
Index: main/templates/main/lists.html
===================================================================
--- main/templates/main/lists.html	(revision fef3b4d766831b584534962ac137a311239ecc91)
+++ main/templates/main/lists.html	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
@@ -1,5 +1,9 @@
+{% extends 'main/header.html' %}
+
 {% load static %}
 {% load category_filters %}
 {% load custom_filters %}
+
+{% block content %}
 
 <!DOCTYPE html>
@@ -700,78 +704,4 @@
     {% endif %}
 </div>
-
-<!-- Header -->
-<header class="main-header">
-    <div class="header-top">
-        <div class="logo">
-            <a href="{% url 'home' %}"><img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого"/></a>
-        </div>
-        <div class="header-search">
-            <form method="GET" action="{% url 'product_list' %}" id="searchForm">
-                <input type="text" name="search" id="searchInput" placeholder="Пребарај производи..."
-                       value="{{ request.GET.search }}">
-                <button type="submit"><i class="fas fa-search"></i></button>
-            </form>
-            <div id="suggestions"
-                 style="position: absolute; background: white; border: 1px solid #ddd; border-radius: 5px; width: 98%; max-height: 200px; overflow-y: auto; display: none; z-index: 2;"></div>
-        </div>
-        <div class="user-actions">
-            {% if user.is_authenticated %}
-                <form method="post" action="{% url 'logout' %}" class="auth-form">
-                    {% csrf_token %}
-                    <button type="submit" class="logout-btn" style="color: white">
-                        <i class="fas fa-sign-out-alt"></i> Одјави се
-                    </button>
-                </form>
-            {% else %}
-                <a href="{% url 'login' %}" class="auth-btn">
-                    <i class="fas fa-user"></i> Најави се
-                </a>
-                <a href="{% url 'register' %}" class="auth-btn">
-                    <i class="fas fa-user-plus"></i> Регистрирај се
-                </a>
-            {% endif %}
-        </div>
-    </div>
-    <nav class="main-nav">
-        <ul>
-            {#                <li><a href="{% url 'home' %}">Дома</a></li>#}
-            <li><a href="{% url 'product_list' %}">Каталог</a></li>
-            <li><a href="{% url 'stats' %}">Статистика</a></li>
-            <li><a href="{% url 'view_lists' %}">Листи</a></li>
-        </ul>
-    </nav>
-</header>
-
-<!-- Mobile Menu -->
-<div id="mobile-header">
-    <div id="mobile-logo">
-        <img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого">
-    </div>
-    <div class="menu-toggle" onclick="toggleMobileMenu()">☰</div>
-</div>
-<div id="mobile-menu" class="mobile-menu">
-    <div class="mobile-menu-header">
-        <span class="close-btn" onclick="toggleMobileMenu()">×</span>
-    </div>
-     <form method="GET" action="{% url 'product_list' %}" class="mobile-search-form" id="mobileSearchForm">
-        <input type="text" name="search" id="mobileSearchInput" placeholder="Пребарај производ..."
-               value="{{ request.GET.search }}">
-        <button type="submit"><i class="fas fa-search"></i></button>
-    </form>
-    <nav class="mobile-nav">
-        <a href="{% url 'home' %}">Дома</a>
-        <a href="{% url 'product_list' %}">Каталог</a>
-        <a href="{% url 'stats' %}">Статистика</a>
-        <a href="{% url 'view_lists' %}">Листи</a>
-        {% if user.is_authenticated %}
-            <a href="{% url 'logout' %}">Одјави се</a>
-        {% else %}
-            <a href="{% url 'login' %}">Најави се</a>
-            <a href="{% url 'register' %}">Регистрирај се</a>
-        {% endif %}
-    </nav>
-</div>
-<div id="overlay" onclick="toggleMobileMenu()"></div>
 
 <!-- Main Content -->
@@ -904,130 +834,10 @@
         }
 
-        const menuToggle = document.querySelector('.menu-toggle');
-        const mobileMenu = document.getElementById('mobile-menu');
-        const overlay = document.getElementById('overlay');
-
-        if (menuToggle && mobileMenu && overlay) {
-            menuToggle.addEventListener('click', toggleMobileMenu);
-            overlay.addEventListener('click', toggleMobileMenu);
-            document.querySelector('.close-btn').addEventListener('click', toggleMobileMenu);
-        }
-
-        // Search suggestions and transliteration
-        document.addEventListener('DOMContentLoaded', function () {
-            // Desktop search elements
-            const searchInput = document.getElementById('searchInput');
-            const suggestionsDiv = document.getElementById('suggestions');
-            const searchForm = document.getElementById('searchForm');
-
-            // Mobile search elements
-            const mobileSearchInput = document.getElementById('mobileSearchInput');
-            const mobileSearchForm = document.getElementById('mobileSearchForm');
-
-            // Extended transliteration with typo correction
-            function transliterateLatinToCyrillic(text) {
-                const map = {
-                    'dzh': 'џ', 'dzs': 'џ', 'dsh': 'џ',
-                    'zh': 'ж', 'ch': 'ч', 'sh': 'ш', 'lj': 'љ', 'nj': 'њ', 'kj': 'ќ', 'dj': 'ѓ',
-                    'zs': 'ж', 'hs': 'ш', 'cx': 'ч', 'sx': 'ш', 'jx': 'ж',
-                    'tz': 'ц', 'ts': 'ц', 'tc': 'ц', 'dz': 'џ',
-                    'a': 'а', 'b': 'б', 'v': 'в', 'g': 'г', 'd': 'д', 'e': 'е', 'z': 'з', 'i': 'и',
-                    'j': 'ј', 'k': 'к', 'l': 'л', 'm': 'м', 'n': 'н', 'o': 'о', 'p': 'п', 'r': 'р',
-                    's': 'с', 't': 'т', 'u': 'у', 'f': 'ф', 'h': 'х', 'c': 'ц',
-                    'y': 'ј', 'w': 'в', 'x': 'кс', 'q': 'к',
-                    'ia': 'ја', 'ie': 'је', 'io': 'јо', 'iu': 'ју'
-                };
-
-                const typoPatterns = [
-                    {pattern: /sampon/gi, replace: 'shampon'},
-                    {pattern: /cresi/gi, replace: 'creshi'},
-                    {pattern: /stipki/gi, replace: 'shtipki'},
-                    {pattern: /sch/gi, replace: 'sh'},
-                    {pattern: /ck/gi, replace: 'k'},
-                    {pattern: /ph/gi, replace: 'f'},
-                    {pattern: /th/gi, replace: 't'},
-                    {pattern: /([a-z]),([a-z])/gi, replace: '$1$2'},
-                    {pattern: /([a-z])\.([a-z])/gi, replace: '$1$2'},
-                    {pattern: /([a-z])\1/gi, replace: '$1'}
-                ];
-
-                let normalizedText = text.toLowerCase();
-                for (const {pattern, replace} of typoPatterns) {
-                    normalizedText = normalizedText.replace(pattern, replace);
-                }
-
-                let result = '';
-                let i = 0;
-                while (i < normalizedText.length) {
-                    if (map[normalizedText.substring(i, i + 3)]) {
-                        result += map[normalizedText.substring(i, i + 3)];
-                        i += 3;
-                    } else if (map[normalizedText.substring(i, i + 2)]) {
-                        result += map[normalizedText.substring(i, i + 2)];
-                        i += 2;
-                    } else if (map[normalizedText[i]]) {
-                        result += map[normalizedText[i]];
-                        i++;
-                    } else {
-                        result += normalizedText[i];
-                        i++;
-                    }
-                }
-                return result;
-            }
-
-            function setupSearch(input, form) {
-                input.addEventListener('input', function () {
-                    const query = this.value.trim();
-                    if (query.length < 2) {
-                        suggestionsDiv.style.display = 'none';
-                        return;
-                    }
-
-                    fetch(`/search-suggestions/?q=${encodeURIComponent(query)}`)
-                        .then(response => response.json())
-                        .then(data => {
-                            suggestionsDiv.innerHTML = '';
-                            if (data.suggestions.length > 0) {
-                                data.suggestions.forEach(suggestion => {
-                                    const div = document.createElement('div');
-                                    div.textContent = suggestion;
-                                    div.style.padding = '5px 10px';
-                                    div.style.cursor = 'pointer';
-                                    div.addEventListener('click', function () {
-                                        input.value = transliterateLatinToCyrillic(suggestion);
-                                        suggestionsDiv.style.display = 'none';
-                                        form.submit();
-                                    });
-                                    suggestionsDiv.appendChild(div);
-                                });
-                                suggestionsDiv.style.display = 'block';
-                            } else {
-                                suggestionsDiv.style.display = 'none';
-                            }
-                        });
-                });
-
-                input.addEventListener('keydown', function (e) {
-                    if (e.key === 'Enter') {
-                        e.preventDefault();
-                        suggestionsDiv.style.display = 'none';
-                        input.value = transliterateLatinToCyrillic(input.value);
-                        form.submit();
-                    }
-                });
-            }
-
-            setupSearch(searchInput, searchForm);
-            setupSearch(mobileSearchInput, mobileSearchForm);
-
-            document.addEventListener('click', function (e) {
-                if (!searchInput.contains(e.target) && !suggestionsDiv.contains(e.target) &&
-                    !mobileSearchInput.contains(e.target)) {
-                    suggestionsDiv.style.display = 'none';
-                }
-            });
-        });
+
+
+
+
 </script>
 </body>
+{% endblock %}
 </html>
Index: main/templates/main/login.html
===================================================================
--- main/templates/main/login.html	(revision fef3b4d766831b584534962ac137a311239ecc91)
+++ main/templates/main/login.html	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
@@ -3,10 +3,16 @@
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Login</title>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
+
+        * {
+            box-sizing: border-box;
+        }
+
         body {
-            font-family: Arial, sans-serif;
+            font-family: 'Poppins', Arial, sans-serif;
             margin: 0;
             padding: 0;
@@ -19,4 +25,5 @@
             background-position: center;
             position: relative;
+            color: #444;
         }
 
@@ -24,32 +31,32 @@
             content: '';
             position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
+            inset: 0;
             background: inherit;
-            filter: blur(8px);
+            filter: blur(8px) brightness(0.7);
             z-index: -1;
         }
 
         .auth-container {
+            position: relative;
             width: 100%;
             max-width: 400px;
-            background-color: rgba(255, 255, 255, 0.9);
-            padding: 30px;
-            border-radius: 12px;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-            margin: 20px;
+            background-color: rgba(255, 255, 255, 0.95);
+            padding: 40px 35px;
+            border-radius: 15px;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+            text-align: center;
         }
 
         .auth-container h2 {
-            text-align: center;
-            margin-bottom: 25px;
-            color: #333;
-            font-size: 28px;
+            font-weight: 600;
+            font-size: 2.2rem;
+            margin-bottom: 30px;
+            color: #2e652e;
+            letter-spacing: 1px;
         }
 
         .form-group {
-            margin-bottom: 20px;
+            margin-bottom: 25px;
+            text-align: left;
         }
 
@@ -57,58 +64,90 @@
             display: block;
             margin-bottom: 8px;
-            font-weight: bold;
-            color: #555;
+            font-weight: 600;
+            color: #2e652e;
+            font-size: 1rem;
         }
 
         .form-group input {
             width: 100%;
-            padding: 12px;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            font-size: 16px;
-            box-sizing: border-box;
+            padding: 14px 16px;
+            border: 2px solid #ddd;
+            border-radius: 10px;
+            font-size: 1rem;
+            transition: border-color 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .form-group input:focus {
+            border-color: #28a745;
+            box-shadow: 0 0 8px rgba(40, 167, 69, 0.4);
+            outline: none;
         }
 
         button[type="submit"] {
             width: 100%;
-            padding: 12px;
-            background-color: #28a745;
+            padding: 14px;
+            background-color: #2e652e;
             color: white;
+            font-weight: 600;
+            font-size: 1.1rem;
             border: none;
-            border-radius: 6px;
-            font-size: 16px;
+            border-radius: 10px;
             cursor: pointer;
-            transition: background-color 0.3s;
+            transition: background-color 0.3s ease, transform 0.2s ease;
+            letter-spacing: 1px;
         }
 
-        button[type="submit"]:hover {
-            background-color: #218838;
+        button[type="submit"]:hover,
+        button[type="submit"]:focus {
+            background-color: #1f3f1f;
+            transform: scale(1.03);
+            outline: none;
         }
 
         .register-link {
-            text-align: center;
-            margin-top: 20px;
+            margin-top: 25px;
+            font-size: 0.9rem;
+            color: #555;
         }
 
         .register-link a {
-            color: #007bff;
+            color: #2e652e;
             text-decoration: none;
-            transition: color 0.3s;
+            font-weight: 600;
+            transition: color 0.3s ease;
         }
 
-        .register-link a:hover {
-            color: #0056b3;
+        .register-link a:hover,
+        .register-link a:focus {
+            color: #1f3f1f;
             text-decoration: underline;
         }
 
         .errorlist {
+            background: #ffe6e6;
+            border: 1px solid #dc3545;
             color: #dc3545;
-            margin-bottom: 15px;
-            padding-left: 20px;
+            padding: 12px 15px;
+            margin-bottom: 25px;
+            border-radius: 8px;
+            list-style: none;
+            font-weight: 600;
+            font-size: 0.9rem;
         }
 
         .errorlist li {
-            list-style-type: none;
-            margin-bottom: 5px;
+            margin: 0;
+        }
+
+        /* Responsive tweaks */
+        @media (max-width: 450px) {
+            .auth-container {
+                padding: 30px 20px;
+                border-radius: 12px;
+            }
+
+            .auth-container h2 {
+                font-size: 1.8rem;
+            }
         }
     </style>
@@ -116,9 +155,9 @@
 <body>
     <div class="auth-container">
-        <h2>Login</h2>
+        <h2>Најави се</h2>
 
         {% if form.errors %}
         <ul class="errorlist">
-            <li>Your username and password didn't match. Please try again.</li>
+            <li>Вашето корисничко име или лозинка не се точни. Обидете се повторно.</li>
         </ul>
         {% endif %}
@@ -126,21 +165,20 @@
         <form method="post" action="{% url 'login' %}">
             {% csrf_token %}
-
             <div class="form-group">
-                <label for="id_username">Username</label>
-                <input type="text" name="username" id="id_username" required>
+                <label for="id_username">Корисничко име</label>
+                <input type="text" name="username" id="id_username" required autofocus autocomplete="username" />
             </div>
 
             <div class="form-group">
-                <label for="id_password">Password</label>
-                <input type="password" name="password" id="id_password" required>
+                <label for="id_password">Лозинка</label>
+                <input type="password" name="password" id="id_password" required autocomplete="current-password" />
             </div>
 
-            <button type="submit">Login</button>
+            <button type="submit">Најави се</button>
+        </form>
 
-            <div class="register-link">
-                <a href="{% url 'register' %}">Don't have an account? Register</a>
-            </div>
-        </form>
+        <div class="register-link">
+            Немате корисничка сметка? <a href="{% url 'register' %}">Регистрирај се</a>
+        </div>
     </div>
 </body>
Index: main/templates/main/product_detail.html
===================================================================
--- main/templates/main/product_detail.html	(revision fef3b4d766831b584534962ac137a311239ecc91)
+++ main/templates/main/product_detail.html	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
@@ -2,4 +2,5 @@
 {% load static %}
 {% load custom_filters %}
+
 <!DOCTYPE html>
 <html lang="en">
Index: main/templates/main/product_list.html
===================================================================
--- main/templates/main/product_list.html	(revision fef3b4d766831b584534962ac137a311239ecc91)
+++ main/templates/main/product_list.html	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
@@ -1,2005 +1,1967 @@
+{% extends 'main\header.html' %}
 {% load static %}
-{% load category_filters %}  <!-- Change this line -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
-    <meta name="csrf-token" content="{{ csrf_token }}">
-    <title>Product Catalog</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-        }
-
-        /* Header image */
-        #horizontal_picture {
-            display: block;
-            text-align: center;
-            background-image: url('{% static "images/baner1.jpg" %}');
-            background-size: cover; /* Cover the entire element */
-            background-position: center; /* Center the image */
-            background-repeat: no-repeat;
-            height: 170px;
-            padding-top: 30px;
-            padding-bottom: 30px;
-            margin-bottom: 30px;
-        }
-
-        /* Main content layout */
-        .catalog-container {
-            display: flex;
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 20px;
-            margin-top: 20px;
-        }
-
-        /* Filters sidebar */
-        .filters {
-            width: 250px;
-            padding: 20px;
-            background-color: #cea274;
-            border-radius: 8px;
-        {#margin-right: 30px;#} margin-left: 20px;
-        }
-
-
-        h3 {
-            margin-top: 0;
-            margin-bottom: 15px;
-            font-size: 16px;
-        }
-
-        .filter-option {
-            margin-bottom: 10px;
-        }
-
-        .price-slider {
-            -webkit-appearance: none; /* Remove default style */
-            width: 100%;
-            height: 5px;
-            background-color: rgba(43, 86, 43, 0.93); /* Track background */
-            border-radius: 4px;
-            outline: none;
-        }
-
-        /* Chrome, Safari, Opera - Track */
-        .price-slider::-webkit-slider-runnable-track {
-            background: rgba(43, 86, 43, 0.93);
-            border-radius: 4px;
-        }
-
-        /* Firefox - Track */
-        .price-slider::-moz-range-track {
-            background: rgba(43, 86, 43, 0.93);
-            border-radius: 4px;
-        }
-
-        /* Chrome, Safari, Opera - Thumb */
-        .price-slider::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            appearance: none;
-            width: 15px;
-            height: 15px;
-            background-color: rgba(42, 82, 42, 0.93); /* Your green color */
-            border-radius: 50%;
-            cursor: pointer;
-            margin-top: -6px; /* Align thumb vertically */
-        }
-
-        /* Firefox - Thumb */
-        .price-slider::-moz-range-thumb {
-            width: 20px;
-            height: 20px;
-            background-color: rgba(42, 82, 42, 0.93); /* Your green color */
-            border-radius: 50%;
-            cursor: pointer;
-        }
-
-
-        .price-range {
-            display: flex;
-            justify-content: space-between;
-            margin-top: 5px;
-            font-size: 12px;
-            color: rgba(31, 63, 31, 0.93);
-        }
-
-        select {
-            width: 100%;
-            padding: 8px;
-            border-radius: 4px;
-            border: 1px solid #ddd;
-        }
-
-        /* Products grid */
-        .products-grid {
-            flex: 1;
-        }
-
-        .sorting-options {
-            display: flex;
-            justify-content: flex-end;
-            margin-bottom: 20px;
-            border: rgba(43, 86, 43, 0.93);
-            padding: 5px;
-            border-radius: 5px;
-        }
-
-        .sorting-options select {
-            width: auto;
-            margin-left: 10px;
-            background-color: rgba(46, 101, 46, 0.93);
-            color: white;
-        }
-
-        .grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
-            gap: 20px;
-        }
-
-        .product-card {
-            border: 1px solid #ddd;
-            border-radius: 8px;
-            overflow: hidden;
-            transition: transform 0.2s;
-        }
-
-        {##}
-        {#.product-card:hover {#}
-        {#    transform: translateY(-5px);#}
-        {#    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);#}
-
-
-        .product-image {
-            height: 180px;
-            background-color: #eee;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .product-info {
-            padding: 15px;
-        }
-
-        .product-name {
-            font-weight: bold;
-            margin-bottom: 5px;
-        }
-
-
-        .old-price {
-            text-decoration: line-through;
-            color: #999;
-            font-size: 0.9em;
-            margin-right: 5px;
-        }
-
-        .discount-badge {
-            background-color: #ff4444;
-            color: white;
-            padding: 2px 5px;
-            border-radius: 3px;
-            font-size: 0.8em;
-            margin-left: 5px;
-        }
-
-        .product-category {
-            font-size: 12px;
-            color: #666;
-            margin-bottom: 10px;
-        }
-
-
-        /* Pagination */
-        .pagination {
-            margin-top: 30px;
-            text-align: center;
-        }
-
-        .pagination .step-links {
-            display: inline-block;
-        }
-
-        .pagination .step-links a {
-            text-decoration: none;
-            color: #549249;
-            padding: 5px 10px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            margin: 0 5px 20px;
-        }
-
-        .pagination .step-links a:hover {
-            background-color: #f0f0f0;
-        }
-
-        .pagination .current {
-            font-weight: bold;
-            padding: 5px 10px;
-            background-color: #2e652e;
-            color: white;
-            border-radius: 4px;
-            margin-bottom: 20px;
-        }
-
-        /* Responsive adjustments */
-        @media (max-width: 768px) {
+{% load category_filters %}
+{% block content %}
+
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+        <meta name="csrf-token" content="{{ csrf_token }}">
+        <title>Product Catalog</title>
+        <style>
+            body {
+                font-family: Arial, sans-serif;
+                margin: 0;
+                padding: 0;
+            {#background-color: rgba(35,99,35,0.76);#}
+            }
+
+            /* Main content layout */
             .catalog-container {
+                display: flex;
+                max-width: 1200px;
+                margin: 0 auto;
+                padding: 0 20px;
+                margin-top: 20px;
+            }
+
+            /* Enhanced Filters sidebar */
+            .filters {
+                width: 280px;
+                padding: 25px;
+                background: linear-gradient(145deg, #f5f5f5, #ffffff);
+                border-radius: 15px;
+                margin-right: 30px;
+                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+                border: 1px solid #e0e0e0;
+                transition: all 0.3s ease;
+                position: sticky;
+                top: 20px;
+                height: fit-content;
+                max-height: 90vh;
+                overflow-y: auto;
+            }
+
+            .filters:hover {
+                box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
+                transform: translateY(-2px);
+            }
+
+            .filters::-webkit-scrollbar {
+                width: 6px;
+            }
+
+            .filters::-webkit-scrollbar-track {
+                background: #f1f1f1;
+                border-radius: 10px;
+            }
+
+            .filters::-webkit-scrollbar-thumb {
+                background: #2e652e;
+                border-radius: 10px;
+            }
+
+            .filters h3 {
+                font-weight: 600;
+                font-size: 1.2rem;
+                margin-bottom: 15px;
+                color: #333;
+                position: relative;
+                padding-bottom: 8px;
+                user-select: none;
+            }
+
+            .filters h3::after {
+                content: '';
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                width: 50px;
+                height: 3px;
+                background: linear-gradient(90deg, #2e652e, #4CAF50);
+                border-radius: 3px;
+            }
+
+            .filter-section {
+                margin-bottom: 25px;
+                border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+                padding-bottom: 15px;
+                max-height: 200px;
+                overflow-y: auto;
+                scrollbar-width: thin;
+                scrollbar-color: #2e652e #f1f1f1;
+            }
+
+            .filter-section:last-child {
+                border-bottom: none;
+            }
+
+            .filter-option {
+                display: flex;
+                align-items: center;
+                margin-bottom: 12px;
+                padding: 8px 10px;
+                border-radius: 8px;
+                transition: all 0.3s ease;
+                background: rgba(255, 255, 255, 0.7);
+                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+            }
+
+            .filter-option:hover {
+                background: rgba(46, 101, 46, 0.1);
+                transform: translateX(5px);
+            }
+
+            .filter-option input[type="checkbox"] {
+                width: 18px;
+                height: 18px;
+                margin-right: 12px;
+                cursor: pointer;
+                appearance: none;
+                -webkit-appearance: none;
+                border: 2px solid #ddd;
+                border-radius: 4px;
+                outline: none;
+                transition: all 0.2s;
+                position: relative;
+            }
+
+            .filter-option input[type="checkbox"]:checked {
+                background-color: #2e652e;
+                border-color: #2e652e;
+            }
+
+            .filter-option input[type="checkbox"]:checked::after {
+                content: '✓';
+                position: absolute;
+                color: white;
+                font-size: 12px;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
+
+            .filter-option label {
+                font-size: 0.95rem;
+                color: #555;
+                transition: color 0.3s ease;
+                cursor: pointer;
+                flex-grow: 1;
+            }
+
+            .filter-option:hover label {
+                color: #2e652e;
+                font-weight: 500;
+            }
+
+            /* Price slider enhancements */
+            .price-slider-container {
+                padding: 15px 10px;
+                background: rgba(255, 255, 255, 0.7);
+                border-radius: 10px;
+                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+            }
+
+            .price-slider {
+                -webkit-appearance: none;
+                width: 100%;
+                height: 8px;
+                background: #e0e0e0;
+                border-radius: 10px;
+                outline: none;
+                margin: 15px 0;
+                transition: all 0.3s;
+            }
+
+            .price-slider:hover {
+                background: #d0d0d0;
+            }
+
+            .price-slider::-webkit-slider-thumb {
+                -webkit-appearance: none;
+                appearance: none;
+                width: 20px;
+                height: 20px;
+                background: #2e652e;
+                border-radius: 50%;
+                cursor: pointer;
+                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+                transition: all 0.2s;
+                border: 2px solid white;
+            }
+
+            .price-slider::-webkit-slider-thumb:hover {
+                transform: scale(1.1);
+                background: #3e7e3e;
+            }
+
+            .price-range {
+                display: flex;
+                justify-content: space-between;
+                font-size: 0.9rem;
+                color: #666;
+                margin-top: 5px;
+            }
+
+            .price-range span {
+                background: rgba(46, 101, 46, 0.1);
+                padding: 3px 8px;
+                border-radius: 4px;
+                font-weight: 500;
+            }
+
+            /* Filter submit button */
+            .filter-submit-btn {
+                background: linear-gradient(135deg, #2e652e, #4CAF50);
+                color: white;
+                border: none;
+                padding: 12px 20px;
+                border-radius: 8px;
+                width: 100%;
+                font-size: 1rem;
+                font-weight: 600;
+                cursor: pointer;
+                transition: all 0.3s;
+                box-shadow: 0 4px 15px rgba(46, 101, 46, 0.3);
+                text-transform: uppercase;
+                letter-spacing: 1px;
+                margin-top: 10px;
+            }
+
+            .filter-submit-btn:hover {
+                background: linear-gradient(135deg, #3e7e3e, #5CBF50);
+                transform: translateY(-2px);
+                box-shadow: 0 6px 20px rgba(46, 101, 46, 0.4);
+            }
+
+            .filter-submit-btn:active {
+                transform: translateY(0);
+            }
+
+            /* Mobile filter toggle */
+            .filter-toggle {
+                display: none;
+                background: linear-gradient(135deg, #2e652e, #4CAF50);
+                color: white;
+                padding: 12px 20px;
+                border: none;
+                border-radius: 8px;
+                width: 100%;
+                margin-bottom: 15px;
+                cursor: pointer;
+                font-weight: 600;
+                text-transform: uppercase;
+                letter-spacing: 1px;
+                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+                transition: all 0.3s;
+            }
+
+            .filter-toggle:hover {
+                background: linear-gradient(135deg, #3e7e3e, #5CBF50);
+            }
+
+            /* Reset filters button */
+            .reset-filters {
+                background: transparent;
+                color: #e74c3c;
+                border: 1px solid #e74c3c;
+                padding: 10px 15px;
+                border-radius: 8px;
+                width: 100%;
+                font-size: 0.9rem;
+                cursor: pointer;
+                transition: all 0.3s;
+                margin-top: 10px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 8px;
+            }
+
+            .reset-filters:hover {
+                background: rgba(231, 76, 60, 0.1);
+            }
+
+            /* Favorite button styles */
+            .favorite-btn {
+                position: absolute;
+                top: 10px;
+                right: 10px;
+                background: rgba(255, 255, 255, 0.9);
+                border: none;
+                border-radius: 50%;
+                width: 36px;
+                height: 36px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
+                z-index: 2;
+                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+                transition: all 0.3s ease;
+            }
+
+            .favorite-btn:hover {
+                background: white;
+                transform: scale(1.1);
+            }
+
+            .favorite-btn i {
+                font-size: 18px;
+                color: #ccc;
+                transition: all 0.3s ease;
+            }
+
+            .favorite-btn.active i {
+                color: #e74c3c;
+            }
+
+            .favorite-btn.pulse {
+                animation: pulseHeart 0.6s ease;
+            }
+
+            @keyframes pulseHeart {
+                0% {
+                    transform: scale(1);
+                }
+                50% {
+                    transform: scale(1.3);
+                }
+                100% {
+                    transform: scale(1);
+                }
+            }
+
+            /* Products grid */
+            .products-grid {
+                flex: 1;
+            }
+
+            .sorting-options {
+                display: flex;
+                justify-content: flex-end;
+                margin-bottom: 20px;
+                padding: 10px;
+                border-radius: 10px;
+                background: rgba(255, 255, 255, 0.8);
+                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+            }
+
+            .sorting-options select {
+                width: auto;
+                margin-left: 10px;
+                padding: 8px 15px;
+                border-radius: 8px;
+                border: 1px solid #ddd;
+                background: white;
+                color: #333;
+                font-size: 0.9rem;
+                cursor: pointer;
+                transition: all 0.3s;
+            }
+
+            .sorting-options select:hover {
+                border-color: #2e652e;
+            }
+
+            .sorting-options select:focus {
+                outline: none;
+                box-shadow: 0 0 0 2px rgba(46, 101, 46, 0.3);
+            }
+
+            .grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+                gap: 20px;
+            }
+
+            .product-card {
+                border: 1px solid #e0e0e0;
+                border-radius: 12px;
+                overflow: hidden;
+                transition: all 0.3s ease;
+                background: white;
+                position: relative;
+            }
+
+            .product-card:hover {
+                transform: translateY(-5px);
+                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+                border-color: #2e652e;
+            }
+
+            .product-image {
+                height: 200px;
+                background-color: #f9f9f9;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 15px;
+                position: relative;
+            }
+
+            .product-image img {
+                max-height: 100%;
+                max-width: 100%;
+                object-fit: contain;
+                transition: transform 0.3s ease;
+            }
+
+            .product-card:hover .product-image img {
+                transform: scale(1.05);
+            }
+
+            .product-info {
+                padding: 15px;
+            }
+
+            .product-name {
+                font-weight: bold;
+                margin-bottom: 5px;
+                color: #333;
+                font-size: 0.95rem;
+                line-height: 1.3;
+                height: 2.6em;
+                overflow: hidden;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+            }
+
+            .product-price {
+                font-size: 1.1rem;
+                color: #2e652e;
+                font-weight: bold;
+                margin-top: 10px;
+                display: flex;
                 flex-direction: column;
-            }
-
-            .filters {
-                width: auto;
-                margin-right: 0;
-                margin-bottom: 20px;
-            }
-
-            .grid {
-                grid-template-columns: repeat(2, 1fr);
-                gap: 10px;
-            }
-        }
-
-        .no-products {
-            grid-column: 1 / -1;
-            text-align: center;
-            padding: 40px;
-            color: #666;
-        }
-
-        .product-actions {
-            display: flex;
-            justify-content: space-between;
-            margin-top: 10px;
-            padding-bottom: -10px;
-            flex-direction: column;
-        {#margin-bottom: -px;#}
-        }
-
-        .view-product {
-            font-size: 12px;
-        {#color: #007bff;#} text-decoration: none;
-        }
-
-        .search-form {
-            margin: 20px auto;
-            max-width: 800px;
-        }
-
-        .search-form input {
-            padding: 10px;
-            width: 70%;
-            border-radius: 20px;
-            border: 1px solid #ddd;
-            font-size: 16px;
-        }
-
-        .search-form button {
-            padding: 10px 20px;
-            background-color: #cb7e31;
-            color: white;
-            border: none;
-            border-radius: 20px;
-            margin-left: 10px;
-            cursor: pointer;
-            font-size: 16px;
-        }
-
-        .search-form button:hover {
-            background-color: #cb7e31;
-        }
-
-        .discount-badge {
-            background-color: #ff4444;
-            color: white;
-            padding: 2px 5px;
-            border-radius: 3px;
-            font-size: 0.8em;
-            margin-left: 5px;
-        }
-
-        .discount-valid {
-            font-size: 0.7em;
-            color: #666;
-            margin-top: 7px;
-        }
-
-        .search-form {
-            margin: 20px auto;
-            max-width: 800px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding: 0 15px;
-        }
-
-        .search-form input {
-            padding: 12px;
-            width: 100%;
-            max-width: 500px;
-            border-radius: 20px;
-            border: 1px solid #ddd;
-            font-size: 16px;
-            margin-bottom: 10px;
-        }
-
-        .search-form button {
-            padding: 12px 24px;
-            width: auto;
-        }
-
-        @media (min-width: 768px) {
-            .search-form {
-                flex-direction: row;
-            }
-
-            .search-form input {
-                margin-bottom: 0;
-                margin-right: 10px;
-            }
-        }
-
-        {##}
-        {#.grid {#}
-        {#    display: grid;#}
-        {#    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));#}
-        {#gap: 20px;#}
-
-
-        @media (max-width: 600px) {
-            .grid {
-                grid-template-columns: repeat(2, 1fr);
-                gap: 10px;
-            }
-
-            .product-image {
-                height: 140px;
-            }
-        }
-
-        @media (max-width: 400px) {
-            .grid {
-                grid-template-columns: repeat(2, 1fr);
-            }
-        }
-
-
-        .filters {
-            width: 250px;
-            padding: 20px;
-            background-color: #f8f8f8;
-            border-radius: 8px;
-        {#margin-right: 30px;#} margin-left: 0px;
-        }
-
-        .filter-toggle {
-            display: none;
-            background: #cb7e31;
-            color: white;
-            padding: 12px;
-            border: none;
-            border-radius: 5px;
-            width: 100%;
-            margin-bottom: 15px;
-            cursor: pointer;
-        }
-
-        @media (max-width: 768px) {
-            .catalog-container {
-                flex-direction: column;
-            }
-
-            .filters {
-                width: 90%;
-                margin-right: 0;
-                margin-bottom: 20px;
-            }
-
-            .filter-toggle {
-                display: block;
-            }
-
-            .filter-section {
-                display: none;
-            }
-
-            .filter-section.active {
-                display: block;
-            }
-        }
-
-        #other a:hover, #other button:hover {
-            color: lightgreen;
-        }
-
-        /* Mobile styles */
-        @media (max-width: 768px) {
-            #navbar {
-                flex-wrap: wrap;
-            }
-
-            #mobile-header {
+                gap: 5px;
+            }
+
+            .old-price {
+                color: #999;
+                text-decoration: line-through;
+                font-size: 0.9rem;
+            }
+
+            .discount-badge {
+                background: linear-gradient(135deg, #e74c3c, #c0392b);
+                color: white;
+                padding: 3px 8px;
+                border-radius: 4px;
+                font-size: 0.8rem;
+                font-weight: 600;
+                display: inline-block;
+                margin-top: 5px;
+            }
+
+            .product-store {
+                margin-top: 10px;
+            }
+
+            .product-category {
+                font-size: 0.8rem;
+                color: #777;
+                margin-bottom: 10px;
+            }
+
+            .product-actions {
                 display: flex;
-                width: 90%;
                 justify-content: space-between;
                 align-items: center;
-            }
-
-            #logo {
-                margin-right: 0;
-                order: 2;
-                flex-grow: 1;
+                margin-top: 10px;
+            }
+
+            .view-product {
+                font-size: 0.85rem;
+                color: #2e652e;
+                text-decoration: none;
+                font-weight: 500;
+                transition: color 0.3s;
+            }
+
+            .view-product:hover {
+                color: #4CAF50;
+                text-decoration: underline;
+            }
+
+            .add-to-list-btn {
+                background: linear-gradient(135deg, #2e652e, #4CAF50);
+                color: white;
+                border: none;
+                padding: 8px 15px;
+                border-radius: 6px;
+                font-size: 0.85rem;
+                font-weight: 500;
+                cursor: pointer;
+                transition: all 0.3s;
+            }
+
+            .add-to-list-btn:hover {
+                background: linear-gradient(135deg, #3e7e3e, #5CBF50);
+                transform: translateY(-2px);
+            }
+
+            /* Pagination */
+            .pagination {
+                margin-top: 30px;
                 text-align: center;
             }
 
-            .menu-toggle {
+            .pagination .step-links {
+                display: inline-block;
+            }
+
+            .pagination .step-links a {
+                text-decoration: none;
+                color: #549249;
+                padding: 8px 12px;
+                border: 1px solid #ddd;
+                border-radius: 6px;
+                margin: 0 3px;
+                transition: all 0.3s;
+            }
+
+            .pagination .step-links a:hover {
+                background-color: #f0f0f0;
+                color: #2e652e;
+            }
+
+            .pagination .current {
+                font-weight: bold;
+                padding: 8px 12px;
+                background: linear-gradient(135deg, #2e652e, #4CAF50);
+                color: white;
+                border-radius: 6px;
+                margin: 0 3px;
+            }
+
+            /* No products message */
+            .no-products {
+                grid-column: 1 / -1;
+                text-align: center;
+                padding: 40px;
+                color: #666;
+                background: rgba(255, 255, 255, 0.8);
+                border-radius: 10px;
+                margin: 20px 0;
+            }
+
+            /* Responsive adjustments */
+            @media (max-width: 768px) {
+                .catalog-container {
+                    flex-direction: column;
+                }
+
+                .filters {
+                    width: 100%;
+                    margin-right: 0;
+                    margin-bottom: 20px;
+                    position: static;
+                    max-height: none;
+                }
+
+                .filter-toggle {
+                    display: block;
+                }
+
+                .filter-section {
+                    display: none;
+                    max-height: none;
+                }
+
+                .filter-section.active {
+                    display: block;
+                }
+
+                .grid {
+                    grid-template-columns: repeat(2, 1fr);
+                    gap: 15px;
+                }
+
+                .product-image {
+                    height: 160px;
+                }
+            }
+
+            @media (max-width: 480px) {
+                .grid {
+                    grid-template-columns: 1fr;
+                }
+
+                .sorting-options {
+                    flex-direction: column;
+                    gap: 10px;
+                }
+
+                .sorting-options select {
+                    width: 100%;
+                    margin-left: 0;
+                }
+            }
+
+            /* Ribbon styles */
+            .ribbon-flag {
+                position: absolute;
+                top: 0;
+                right: 0;
+                width: 0;
+                height: 0;
+                border-style: solid;
+                border-width: 0 0 0 0;
+                border-color: transparent #e74c3c transparent transparent;
+                z-index: 1;
+                visibility: visible !important;
+                opacity: 1 !important;
+            }
+
+            .ribbon-flag-text {
+                position: absolute;
+                top: -4px;
+                right: -10px;
+                color: white;
+                font-size: 15px;
+                font-weight: bold;
+                transform: rotate(70deg);
+                z-index: 5;
+                visibility: visible !important;
+            }
+
+            /* Instruction Modal Styles */
+            .instruction-modal {
+                display: none;
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background-color: rgba(0, 0, 0, 0.85);
+                z-index: 9999;
+                font-family: Arial, sans-serif;
+            }
+
+            .modal-content {
+                background: white;
+                border-radius: 15px;
+                width: 90%;
+                max-width: 450px;
+                margin: auto;
+                position: relative;
+                overflow: hidden;
+                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+                transform: scale(0.9);
+                opacity: 0;
+                animation: modalEntrance 0.4s forwards;
+            }
+
+            @keyframes modalEntrance {
+                to {
+                    transform: scale(1);
+                    opacity: 1;
+                }
+            }
+
+            .modal-header {
+                background: linear-gradient(135deg, #2e652e, #4CAF50);
+                color: white;
+                padding: 20px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+
+            .modal-header h3 {
+                margin: 0;
+                font-size: 1.4rem;
+            }
+
+            .modal-body {
+                padding: 20px;
+            }
+
+            .instruction-step {
+                display: flex;
+                align-items: flex-start;
+                margin-bottom: 15px;
+                padding: 15px;
+                border-radius: 8px;
+                background: #f8f8f8;
+                transition: all 0.3s;
+            }
+
+            .instruction-step:hover {
+                background: #f0f0f0;
+                transform: translateX(5px);
+            }
+
+            .step-number {
+                background: linear-gradient(135deg, #2e652e, #4CAF50);
+                color: white;
+                width: 25px;
+                height: 25px;
+                border-radius: 50%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin-right: 15px;
+                font-weight: bold;
+                flex-shrink: 0;
+            }
+
+            .hint-text {
+                color: #666;
+                font-size: 0.9em;
+                font-style: italic;
+            }
+
+            .modal-action-btn {
+                background: linear-gradient(135deg, #2e652e, #4CAF50);
+                color: white;
+                border: none;
+                padding: 12px 25px;
+                border-radius: 30px;
+                margin: 20px auto;
                 display: block;
+                font-size: 1rem;
+                font-weight: bold;
+                cursor: pointer;
+                transition: all 0.3s;
+            }
+
+            .modal-action-btn:hover {
+                background: linear-gradient(135deg, #3e7e3e, #5CBF50);
+                transform: translateY(-2px);
+                box-shadow: 0 5px 15px rgba(46, 101, 46, 0.3);
+            }
+
+            .modal-close-btn {
+                background: none;
+                border: none;
+                color: white;
                 font-size: 1.8rem;
                 cursor: pointer;
-                padding: 5px 15px;
-                order: 1;
-            }
-
-            #other {
+                padding: 0 10px;
+                transition: transform 0.3s;
+            }
+
+            .modal-close-btn:hover {
+                transform: rotate(90deg);
+            }
+
+            /* Arrow animations */
+            .arrow-pointer {
+                width: 100px;
+                height: 100px;
+                pointer-events: none;
+                z-index: 10000;
+            }
+
+            .pulse-arrow {
+                animation: pulse 1.5s infinite, float 3s ease-in-out infinite;
+            }
+
+            @keyframes pulse {
+                0% {
+                    transform: scale(1);
+                }
+                50% {
+                    transform: scale(1.2);
+                }
+                100% {
+                    transform: scale(1);
+                }
+            }
+
+            @keyframes float {
+                0%, 100% {
+                    transform: translateY(0);
+                }
+                50% {
+                    transform: translateY(-10px);
+                }
+            }
+
+
+            /* Main content layout */
+            .catalog-container {
+                display: flex;
+                max-width: 1200px;
+                margin: 0 auto;
+                padding: 0 20px;
+                margin-top: 20px;
+            }
+
+            /* Filters sidebar */
+            .filters {
+                width: 250px;
+                padding: 20px;
+                background-color: #cea274;
+                border-radius: 8px;
+            {#margin-right: 30px;#} margin-left: 20px;
+            }
+
+
+            h3 {
+                margin-top: 0;
+                margin-bottom: 15px;
+                font-size: 16px;
+            }
+
+            .filter-option {
+                margin-bottom: 10px;
+            }
+
+            .price-slider {
+                -webkit-appearance: none;
+                width: 100%;
+                height: 5px;
+                background-color: rgba(43, 86, 43, 0.93);
+                border-radius: 4px;
+                outline: none;
+            }
+
+            /* Chrome, Safari, Opera - Track */
+            .price-slider::-webkit-slider-runnable-track {
+                background: rgba(43, 86, 43, 0.93);
+                border-radius: 4px;
+            }
+
+            /* Firefox - Track */
+            .price-slider::-moz-range-track {
+                background: rgba(43, 86, 43, 0.93);
+                border-radius: 4px;
+            }
+
+            /* Chrome, Safari, Opera - Thumb */
+            .price-slider::-webkit-slider-thumb {
+                -webkit-appearance: none;
+                appearance: none;
+                width: 15px;
+                height: 15px;
+                background-color: rgba(42, 82, 42, 0.93); /* Your green color */
+                border-radius: 50%;
+                cursor: pointer;
+                margin-top: -6px; /* Align thumb vertically */
+            }
+
+            /* Firefox - Thumb */
+            .price-slider::-moz-range-thumb {
+                width: 20px;
+                height: 20px;
+                background-color: rgba(42, 82, 42, 0.93); /* Your green color */
+                border-radius: 50%;
+                cursor: pointer;
+            }
+
+
+            .price-range {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 5px;
+                font-size: 12px;
+                color: rgba(31, 63, 31, 0.93);
+            }
+
+            select {
+                width: 100%;
+                padding: 8px;
+                border-radius: 4px;
+                border: 1px solid #ddd;
+            }
+
+            /* Products grid */
+            .products-grid {
+                flex: 1;
+            }
+
+            .sorting-options {
+                display: flex;
+                justify-content: flex-end;
+                margin-bottom: 20px;
+                border: rgba(43, 86, 43, 0.93);
+                padding: 5px;
+                border-radius: 5px;
+            }
+
+            .sorting-options select {
+                width: auto;
+                margin-left: 10px;
+                background-color: rgba(46, 101, 46, 0.93);
+                color: white;
+            }
+
+            .grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+                gap: 20px;
+            }
+
+            .product-card {
+                border: 1px solid #ddd;
+                border-radius: 8px;
+                overflow: hidden;
+                transition: transform 0.2s;
+            }
+
+            .product-image {
+                height: 180px;
+                background-color: #eee;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            .product-info {
+                padding: 15px;
+            }
+
+            .product-name {
+                font-weight: bold;
+                margin-bottom: 5px;
+            }
+
+
+            .old-price {
+                text-decoration: line-through;
+                color: #999;
+                font-size: 0.9em;
+                margin-right: 5px;
+            }
+
+            .discount-badge {
+                background-color: #ff4444;
+                color: white;
+                padding: 2px 5px;
+                border-radius: 3px;
+                font-size: 0.8em;
+                margin-left: 5px;
+            }
+
+            .product-category {
+                font-size: 12px;
+                color: #666;
+                margin-bottom: 10px;
+            }
+
+
+            /* Pagination */
+            .pagination {
+                margin-top: 30px;
+                text-align: center;
+            }
+
+            .pagination .step-links {
+                display: inline-block;
+            }
+
+            .pagination .step-links a {
+                text-decoration: none;
+                color: #549249;
+                padding: 5px 10px;
+                border: 1px solid #ddd;
+                border-radius: 4px;
+                margin: 0 5px 20px;
+            }
+
+            .pagination .step-links a:hover {
+                background-color: #f0f0f0;
+            }
+
+            .pagination .current {
+                font-weight: bold;
+                padding: 5px 10px;
+                background-color: #2e652e;
+                color: white;
+                border-radius: 4px;
+                margin-bottom: 20px;
+            }
+
+            /* Responsive adjustments */
+            @media (max-width: 768px) {
+                .catalog-container {
+                    flex-direction: column;
+                }
+
+                .filters {
+                    width: auto;
+                    margin-right: 0;
+                    margin-bottom: 20px;
+                }
+
+                .grid {
+                    grid-template-columns: repeat(2, 1fr);
+                    gap: 10px;
+                }
+            }
+
+            .no-products {
+                grid-column: 1 / -1;
+                text-align: center;
+                padding: 40px;
+                color: #666;
+            }
+
+            .product-actions {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 10px;
+                padding-bottom: -10px;
+                flex-direction: column;
+            }
+
+            .view-product {
+                font-size: 12px;
+                text-decoration: none;
+            }
+
+
+            .search-form button:hover {
+                background-color: #cb7e31;
+            }
+
+            .discount-badge {
+                background-color: #ff4444;
+                color: white;
+                padding: 2px 5px;
+                border-radius: 3px;
+                font-size: 0.8em;
+                margin-left: 5px;
+            }
+
+            .discount-valid {
+                font-size: 0.7em;
+                color: #666;
+                margin-top: 7px;
+            }
+
+
+            .search-form input {
+                padding: 12px;
+                width: 100%;
+                max-width: 500px;
+                border-radius: 20px;
+                border: 1px solid #ddd;
+                font-size: 16px;
+                margin-bottom: 10px;
+            }
+
+            .search-form button {
+                padding: 12px 24px;
+                width: auto;
+            }
+
+            @media (min-width: 768px) {
+
+                .search-form input {
+                    margin-bottom: 0;
+                    margin-right: 10px;
+                }
+            }
+
+            @media (max-width: 600px) {
+                .grid {
+                    grid-template-columns: repeat(2, 1fr);
+                    gap: 10px;
+                }
+
+                .product-image {
+                    height: 140px;
+                }
+            }
+
+            @media (max-width: 400px) {
+                .grid {
+                    grid-template-columns: repeat(2, 1fr);
+                }
+            }
+
+
+            .filters {
+                width: 250px;
+                padding: 20px;
+                background-color: #f8f8f8;
+                border-radius: 8px;
+                margin-left: 0px;
+            }
+
+            .filter-toggle {
                 display: none;
+                background: #cb7e31;
+                color: white;
+                padding: 12px;
+                border: none;
+                border-radius: 5px;
                 width: 100%;
+                margin-bottom: 15px;
+                cursor: pointer;
+            }
+
+            @media (max-width: 768px) {
+                .catalog-container {
+                    flex-direction: column;
+                }
+
+                .filters {
+                    width: 90%;
+                    margin-right: 0;
+                    margin-bottom: 20px;
+                }
+
+                .filter-toggle {
+                    display: block;
+                }
+
+                .filter-section {
+                    display: none;
+                }
+
+                .filter-section.active {
+                    display: block;
+                }
+            }
+
+            #other a:hover, #other button:hover {
+                color: lightgreen;
+            }
+
+            .modal-content {
+                background-color: white;
+                padding: 20px;
+                border-radius: 8px;
+                width: 90%;
+                max-width: 400px;
+                max-height: 80vh;
+                overflow-y: auto;
+            }
+
+            .modal-header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 15px;
+            }
+
+            .new-list-form input {
+                width: 100%;
+                padding: 8px;
+                margin-bottom: 10px;
+                border: 1px solid #ddd;
+                border-radius: 4px;
+            }
+
+            .new-list-form button {
+                padding: 8px 15px;
+                background-color: #b42824;
+                color: white;
+                border: none;
+                border-radius: 4px;
+                cursor: pointer;
+            }
+
+
+            .remember-choice input {
+                margin-right: 8px;
+            }
+
+            .quantity-input label {
+                margin-right: 10px;
+            }
+
+            .quantity-input input {
+                width: 60px;
+                padding: 5px;
+                border: 1px solid #ddd;
+                border-radius: 4px;
+            }
+
+            a {
+                text-decoration: none;
+            }
+
+            .filter-section::-webkit-scrollbar {
+                width: 8px;
+            }
+
+            .filter-section::-webkit-scrollbar-track {
+                background: #f1f1f1;
+                border-radius: 10px;
+            }
+
+            .filter-section::-webkit-scrollbar-thumb {
+                background: #888;
+                border-radius: 10px;
+            }
+
+            .filter-section::-webkit-scrollbar-thumb:hover {
+                background: #555;
+            }
+
+            .filter-section {
+                margin-bottom: 25px;
+                border-bottom: 1px solid #ddd;
+                padding-bottom: 15px;
+                max-height: 200px;
+                overflow-y: auto;
+                scrollbar-width: thin;
+                scrollbar-color: #888 #f1f1f1;
+            }
+
+            /* Стилови за скролбар за различни прелистувачи */
+            .filter-section::-webkit-scrollbar {
+                width: 8px;
+            }
+
+            .filter-section::-webkit-scrollbar-track {
+                background: #f1f1f1;
+                border-radius: 10px;
+            }
+
+            .filter-section::-webkit-scrollbar-thumb {
+                background: #888;
+                border-radius: 10px;
+            }
+
+            .filter-section::-webkit-scrollbar-thumb:hover {
+                background: #555;
+            }
+
+            .filter-option {
+                margin-bottom: 10px;
+                padding: 5px;
+                border-radius: 4px;
+                transition: background-color 0.2s;
+            }
+
+            .filter-option:hover {
+                background-color: rgba(0, 0, 0, 0.05);
+            }
+
+            @media (max-width: 768px) {
+                .filter-section {
+                    max-height: 150px;
+                }
+            }
+
+            @keyframes pulse {
+                0% {
+                    transform: scale(1);
+                }
+                50% {
+                    transform: scale(1.1);
+                }
+                100% {
+                    transform: scale(1);
+                }
+            }
+
+            .pulse-on-click {
+                animation: pulse 0.4s ease;
+            }
+
+            .category-filter {
+                padding: 15px 20px;
+                background: #f9f9f9;
+                border-radius: 12px;
+                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+                max-width: 300px;
+                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            }
+
+            .filters h3 {
+                font-weight: 600;
+                font-size: 1.3rem;
+                margin-bottom: 15px;
+                color: #333;
+                border-bottom: 2px solid #4CAF50;
+                padding-bottom: 6px;
+                user-select: none;
+            }
+
+            .price-filter h3 {
+                font-weight: 600;
+                font-size: 1.3rem;
+                margin-bottom: 15px;
+                color: #333;
+                border-bottom: 2px solid #4CAF50;
+                padding-bottom: 6px;
+                user-select: none;
+            }
+
+            .store-filter h3 {
+                font-weight: 600;
+                font-size: 1.3rem;
+                margin-bottom: 15px;
+                color: #333;
+                border-bottom: 2px solid #4CAF50;
+                padding-bottom: 6px;
+                user-select: none;
+            }
+
+            .filter-option {
+                display: flex;
+                align-items: center;
+                margin-bottom: 10px;
+                cursor: pointer;
+                user-select: none;
+            }
+
+            .filter-option input[type="checkbox"] {
+                width: 18px;
+                height: 18px;
+                margin-right: 12px;
+                accent-color: #4CAF50; /* modern browsers */
+                cursor: pointer;
+                transition: transform 0.15s ease-in-out;
+            }
+
+            .filter-option input[type="checkbox"]:hover {
+                transform: scale(1.1);
+            }
+
+            .filter-option label {
+                font-size: 1rem;
+                color: #555;
+                transition: color 0.3s ease;
+            }
+
+            .filter-option:hover label {
+                color: #4CAF50;
+            }
+
+
+            .filters {
+                width: 280px;
+                padding: 25px;
+                background-color: #f5f5f5;
+                border-radius: 10px;
+                margin-right: 30px;
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+                border: 1px solid #e0e0e0;
+            }
+
+            .filter-submit-btn {
+                background-color: #2e652e;
+                color: white;
+                border: none;
+                padding: 10px 20px;
+                border-radius: 5px;
+                width: 100%;
+                font-size: 1rem;
+                cursor: pointer;
+                transition: background-color 0.3s;
+            }
+
+            .filter-submit-btn:hover {
+                background-color: #3e7e3e;
+            }
+
+            .product-card {
+                border: 1px solid #e0e0e0;
+                border-radius: 10px;
+                overflow: hidden;
+                transition: all 0.3s ease;
+                background: white;
+            }
+
+            .product-card:hover {
+                transform: translateY(-5px);
+                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+                border-color: #2e652e;
+            }
+
+            .product-image {
+                height: 200px;
+                background-color: #f9f9f9;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 15px;
+            }
+
+            .product-image img {
+                max-height: 100%;
+                max-width: 100%;
+                object-fit: contain;
+            }
+
+            .product-info {
+                padding: 20px;
+            }
+
+            .product-price {
+                font-size: 1.2rem;
+                color: #2e652e;
+                font-weight: bold;
+                margin-top: 20px;
+                display: flex;
                 flex-direction: column;
-                margin-top: 10px;
-                padding: 0;
+                gap: 5px;
+            }
+
+            .old-price {
+                color: #999;
+                text-decoration: line-through;
+                font-size: 0.9rem;
+            }
+
+            .discount-badge {
+                background-color: #e74c3c;
+                color: white;
+                padding: 3px 8px;
+                border-radius: 3px;
+                font-size: 0.8rem;
+                margin-left: 8px;
+            }
+
+            @keyframes spin {
+                0% {
+                    transform: rotate(0deg);
+                }
+                100% {
+                    transform: rotate(360deg);
+                }
+            }
+
+            .view-product:hover {
+                color: rgba(57, 146, 47, 0.93);
+            }
+
+
+            /* Alternative ribbon style 1 - corner flag */
+            .ribbon-flag {
+                position: absolute;
+                top: 0;
+                right: 0;
+                width: 0;
+                height: 0;
+                border-style: solid;
+                border-width: 0 0 0 0;
+                border-color: transparent #e74c3c transparent transparent;
+            {#z-index: 1;#} visibility: visible !important; /* Force visibility */
+                opacity: 1 !important; /* Force visibility */
+
+
+            }
+
+            .ribbon-flag-text {
+                position: absolute;
+                top: -4px;
+                right: -10px;
+                color: white;
+                font-size: 15px;
+                font-weight: bold;
+                transform: rotate(70deg);
+                z-index: 5;
+                visibility: visible !important;
+            / opacity: 1 !important; /* Force visibility */
+
+
+            }
+
+            .product-card, .product-image {
+                position: relative;
+            {#overflow: visible !important;#}
+            }
+
+            /* Instruction Modal Styles */
+            /* Enhanced Instruction Modal */
+            .instruction-modal {
+                display: none;
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background-color: rgba(0, 0, 0, 0.85);
+                z-index: 9999;
+                font-family: Arial, sans-serif;
+            }
+
+            .modal-content {
+                background: white;
+                border-radius: 15px;
+                width: 90%;
+                max-width: 450px;
+                margin: auto;
+                position: relative;
+                overflow: hidden;
+                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+                transform: scale(0.9);
+                opacity: 0;
+                animation: modalEntrance 0.4s forwards;
+            }
+
+            @keyframes modalEntrance {
+                to {
+                    transform: scale(1);
+                    opacity: 1;
+                }
+            }
+
+            .modal-header {
+                background: #2e652e;
+                color: white;
+                padding: 20px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+
+            .modal-header h3 {
+                margin: 0;
+                font-size: 1.4rem;
+            }
+
+            .modal-body {
+                padding: 20px;
+            }
+
+            .instruction-step {
+                display: flex;
+                align-items: flex-start;
+                margin-bottom: 15px;
+                padding: 10px;
+                border-radius: 8px;
+                background: #f8f8f8;
+            }
+
+            .step-number {
+                background: #2e652e;
+                color: white;
+                width: 25px;
+                height: 25px;
+                border-radius: 50%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin-right: 15px;
+                font-weight: bold;
+                flex-shrink: 0;
+            }
+
+            .hint-text {
+                color: #666;
+                font-size: 0.9em;
+                font-style: italic;
+            }
+
+            .modal-action-btn {
+                background: #2e652e;
+                color: white;
+                border: none;
+                padding: 12px 25px;
+                border-radius: 30px;
+                margin: 20px auto;
+                display: block;
+                font-size: 1rem;
+                font-weight: bold;
+                cursor: pointer;
+                transition: all 0.3s;
+            }
+
+            .modal-action-btn:hover {
+                background: #3e7e3e;
+                transform: translateY(-2px);
+                box-shadow: 0 5px 15px rgba(46, 101, 46, 0.3);
+            }
+
+            .modal-close-btn {
                 background: none;
-                border-radius: 0;
-                margin-left: 0;
-            }
-
-            #other.active {
+                border: none;
+                color: white;
+                font-size: 1.8rem;
+                cursor: pointer;
+                padding: 0 10px;
+            }
+
+            /* Enhanced Arrows */
+            .arrow-pointer {
+                width: 100px;
+                height: 100px;
+                pointer-events: none;
+                z-index: 10000;
+            }
+
+
+            .pulse-arrow {
+                animation: pulse 1.5s infinite, float 3s ease-in-out infinite;
+            }
+
+            @keyframes pulse {
+                0% {
+                    transform: scale(1);
+                }
+                50% {
+                    transform: scale(1.2);
+                }
+                100% {
+                    transform: scale(1);
+                }
+            }
+
+            @keyframes float {
+                0%, 100% {
+                    transform: translateY(0);
+                }
+                50% {
+                    transform: translateY(-10px);
+                }
+            }
+
+            /* Favorite button styles */
+            .favorite-btn {
+                position: absolute;
+                top: 10px;
+                right: 10px;
+                background: rgba(255, 255, 255, 0.9);
+                border: none;
+                border-radius: 50%;
+                width: 36px;
+                height: 36px;
                 display: flex;
-            }
-
-            #other a, #other button {
-                padding: 12px 20px;
-                border-bottom: 1px solid #eee;
-                text-align: center;
-            }
-
-            .user-actions {
-                margin-top: 10px;
-                border-top: 1px solid #eee;
-                padding-top: 10px;
-                flex-direction: column;
-                gap: 10px;
-            }
-        }
-
-
-        /* Add these new styles for the modal */
-        .modal-overlay {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: rgba(0, 0, 0, 0.5);
-            z-index: 1000;
-            justify-content: center;
-            align-items: center;
-        }
-
-        .modal-content {
-            background-color: white;
-            padding: 20px;
-            border-radius: 8px;
-            width: 90%;
-            max-width: 400px;
-            max-height: 80vh;
-            overflow-y: auto;
-        }
-
-        .modal-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 15px;
-        }
-
-        .modal-title {
-            font-size: 1.2rem;
-            font-weight: bold;
-        }
-
-        .close-modal {
-            background: none;
-            border: none;
-            font-size: 1.5rem;
-            cursor: pointer;
-        }
-
-        .create-new-list {
-            margin-top: 15px;
-            padding: 10px;
-            text-align: center;
-            border: 1px dashed #549249;
-            border-radius: 4px;
-            cursor: pointer;
-            color: #549249;
-        }
-
-        .create-new-list:hover {
-            background-color: #f0f8ff;
-        }
-
-        .new-list-form {
-            margin-top: 15px;
-            display: none;
-        }
-
-        .new-list-form input {
-            width: 100%;
-            padding: 8px;
-            margin-bottom: 10px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-        }
-
-        .new-list-form button {
-            padding: 8px 15px;
-            background-color: #b42824;
-            color: white;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-        }
-
-
-        .remember-choice input {
-            margin-right: 8px;
-        }
-
-        .lists-header h4 {
-            margin: 0;
-        }
-
-        .lists-header button {
-            background: #28a745;
-            color: white;
-            border: none;
-            padding: 5px 10px;
-            border-radius: 4px;
-            cursor: pointer;
-        }
-
-
-        /* Quantity input styles in modal */
-        .quantity-input label {
-            margin-right: 10px;
-        }
-
-        .quantity-input input {
-            width: 60px;
-            padding: 5px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-        }
-
-        #horizontal_picture {
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-        }
-
-        #horizontal_picture:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 25px 40px rgba(0, 0, 0, 0.25);
-        }
-
-        #horizontal_picture {
-            position: relative;
-            text-align: center;
-            background-image: url('{% static "images/baner1.jpg" %}');
-            background-size: cover;
-            background-position: center;
-            height: 170px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            color: white;
-            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
-            margin-bottom: 30px;
-            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); /* ← Floating shadow */
-            border-radius: 10px; /* Optional: rounded edges look cleaner */
-        }
-
-        /* ===== DESKTOP NAVBAR ===== */
-        #desktop-navbar {
-            display: flex;
-            justify-content: space-evenly;
-            align-items: center;
-            padding: 15px 40px;
-            background-color: white;
-            border-bottom: 1px solid #e2e2e2; /* design line under links */
-            position: sticky;
-            top: 0;
-            z-index: 999;
-            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); /* ← Floating shadow */
-
-        }
-
-        #logo img {
-            height: 90px;
-        }
-
-        #other {
-            display: flex;
-            align-items: center;
-        }
-
-        #other a,
-        .user-actions a,
-        .user-actions button {
-            margin-left: 10px;
-            text-decoration: none;
-            font-weight: 600;
-            color: black;
-        }
-
-        .user-actions button {
-            background: none;
-            border: none;
-            cursor: pointer;
-            font-weight: 600;
-        }
-
-        /* ===== MOBILE HEADER ===== */
-        #mobile-header {
-            display: none;
-            justify-content: space-between;
-            align-items: center;
-            padding: 15px 20px;
-            background-color: white;
-            border-bottom: 1px solid #e2e2e2;
-            z-index: 1001;
-            position: relative;
-            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); /* ← Floating shadow */
-
-        }
-
-        #mobile-logo img {
-            height: 40px;
-        }
-
-        .menu-toggle {
-            font-size: 28px;
-            cursor: pointer;
-        }
-
-        /* ===== MOBILE SLIDE MENU ===== */
-        .mobile-menu {
-            position: fixed;
-            top: 0;
-            right: -100%;
-            width: 75%;
-            height: 100vh;
-            background-color: white;
-            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
-            transition: right 0.3s ease;
-            padding: 20px;
-            z-index: 1002;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .mobile-menu.open {
-            right: 0;
-        }
-
-        .mobile-menu-header {
-            display: flex;
-            justify-content: flex-end;
-            font-size: 24px;
-        }
-
-        .close-btn {
-            cursor: pointer;
-        }
-
-        .mobile-search input {
-            width: 100%;
-            padding: 10px;
-            margin: 15px 0;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-        }
-
-        .mobile-menu nav a,
-        .mobile-menu nav button {
-            display: block;
-            margin: 15px 0;
-            font-size: 18px;
-            text-decoration: none;
-            color: black;
-            background: none;
-            border: none;
-            text-align: left;
-        }
-
-        #desktop-navbar {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 20px 50px;
-            background-color: white;
-            border-bottom: 2px solid #e5e5e5;
-            position: sticky;
-            top: 0;
-            z-index: 1000;
-        }
-
-        /* Logo on the left */
-        #logo img {
-            height: 90px;
-        }
-
-        /* Links on the right */
-        #nav-links {
-            display: flex;
-            align-items: center;
-            gap: 25px;
-        }
-
-        /* Style all links and buttons */
-        #nav-links a,
-        .user-actions a,
-        .user-actions button {
-            color: black;
-            text-decoration: none;
-            font-weight: 600;
-            font-size: 1rem;
-            background: none;
-            border: none;
-            cursor: pointer;
-            transition: color 0.3s ease;
-        }
-
-        /* Hover color */
-        #nav-links a:hover,
-        .user-actions a:hover,
-        .user-actions button:hover {
-            color: #2ecc71; /* Green hover */
-        }
-
-        /* Group login/register or logout properly */
-        .user-actions {
-            display: flex;
-            gap: 15px;
-            align-items: center;
-        }
-
-        .logout-btn {
-            background-color: #2ecc71; /* Green background */
-            color: white;
-            border: none;
-            padding: 8px 16px;
-            border-radius: 20px;
-            font-weight: 600;
-            font-size: 0.95rem;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-
-        .logout-btn:hover {
-        {#background-color: #27ae60;#}
-        }
-
-
-        #login:hover {
-            color: #cb7e31 !important;
-
-        }
-
-        #signup:hover {
-            color: black !important;
-        }
-
-        #signup {
-            background-color: #cb7e31 !important;
-            padding: 10px !important;
-            border-radius: 10px;
-            color: white !important;
-        }
-
-        #signup:hover {
-            color: black !important;
-
-        }
-
-
-        /* ===== OVERLAY FOR MOBILE ===== */
-        #overlay {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100vw;
-            height: 100vh;
-            background: rgba(0, 0, 0, 0.4);
-            z-index: 1000;
-            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
-
-        }
-
-        #overlay.active {
-            display: block;
-        }
-
-        /* ===== RESPONSIVENESS ===== */
-        @media (max-width: 768px) {
-            .main-header{
-                display: none;
-            }
-
-            #mobile-header {
-                display: flex;
-            }
-        }
-
-
-        /* Mobile and smaller screens */
-        @media (max-width: 768px) {
-            #horizontal_picture {
-                padding: 40px 10px; /* Reduce padding for smaller screens */
-            }
-
-            #horizontal_picture h2 {
-                font-size: 2.5rem; /* Smaller font size */
-            }
-
-            #horizontal_picture h3 {
-                font-size: 1.2rem;
-            }
-
-            .search-form {
-                width: 90%;
-                max-width: 100%;
-                margin-top: 20px;
-            }
-
-            .search-form input {
-                padding: 10px 15px;
-                font-size: 0.9rem;
-            }
-
-            .search-form button {
-                padding: 10px 25px;
-                font-size: 0.9rem;
-            }
-        }
-
-        @media (min-width: 769px) and (max-width: 1024px) {
-            #horizontal_picture {
-                padding: 50px 20px;
-            }
-
-            .search-form {
-                width: 80%;
-            }
-        }
-
-        /* Large screens */
-        @media (min-width: 1025px) {
-            #horizontal_picture {
-                padding: 50px 20px;
-            }
-
-            .search-form {
-                width: 60%;
-            }
-        }
-
-        a {
-            text-decoration: none;
-        }
-
-
-        .filter-section::-webkit-scrollbar {
-            width: 8px;
-        }
-
-        .filter-section::-webkit-scrollbar-track {
-            background: #f1f1f1;
-            border-radius: 10px;
-        }
-
-        .filter-section::-webkit-scrollbar-thumb {
-            background: #888;
-            border-radius: 10px;
-        }
-
-        .filter-section::-webkit-scrollbar-thumb:hover {
-            background: #555;
-        }
-
-        .filter-section {
-            margin-bottom: 25px;
-            border-bottom: 1px solid #ddd;
-            padding-bottom: 15px;
-            max-height: 200px;
-            overflow-y: auto;
-            scrollbar-width: thin;
-            scrollbar-color: #888 #f1f1f1;
-        }
-
-
-        /* Стилови за скролбар за различни прелистувачи */
-        .filter-section::-webkit-scrollbar {
-            width: 8px;
-        }
-
-        .filter-section::-webkit-scrollbar-track {
-            background: #f1f1f1;
-            border-radius: 10px;
-        }
-
-        .filter-section::-webkit-scrollbar-thumb {
-            background: #888;
-            border-radius: 10px;
-        }
-
-        .filter-section::-webkit-scrollbar-thumb:hover {
-            background: #555;
-        }
-
-        .filter-option {
-            margin-bottom: 10px;
-            padding: 5px;
-            border-radius: 4px;
-            transition: background-color 0.2s;
-        }
-
-        .filter-option:hover {
-            background-color: rgba(0, 0, 0, 0.05);
-        }
-
-        @media (max-width: 768px) {
-            .filter-section {
-                max-height: 150px; /* Помал скрол контејнер за мобилни */
-            }
-        }
-
-        @keyframes pulse {
-            0% {
-                transform: scale(1);
-            }
-            50% {
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
+                z-index: 2;
+                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+                transition: all 0.3s ease;
+            }
+
+            .favorite-btn:hover {
+                background: white;
                 transform: scale(1.1);
             }
-            100% {
-                transform: scale(1);
-            }
-        }
-
-        .pulse-on-click {
-            animation: pulse 0.4s ease;
-        }
-
-        /* Header */
-        .main-header {
-            background-color: white;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            position: sticky;
-            top: 0;
-            z-index: 1000;
-        }
-
-        .header-top {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px 20px;
-            border-bottom: 1px solid #e5e5e5;
-        }
-
-        .logo img {
-            height: 60px;
-        }
-
-        /* Update the header-search styles */
-        .header-search {
-            flex-grow: 1;
-            margin: 0 20px;
-            position: relative;
-        }
-
-        .header-search input {
-            width: 98%;
-            padding: 12px 20px;
-            border: 1px solid #ddd;
-            border-radius: 30px;
-            font-size: 16px;
-            background-color: #f5f5f5;
-        }
-
-        .header-search button {
-            position: absolute;
-            right: 15px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: none;
-            border: none;
-            color: #666;
-            cursor: pointer;
-            font-size: 18px;
-        }
-
-        .header-search button:hover {
-            color: #2e652e;
-        }
-
-        .user-actions {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-
-        .user-actions a {
-            color: #333;
-            text-decoration: none;
-            font-size: 14px;
-            display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-
-        .user-actions a:hover {
-            color: #2e652e;
-        }
-
-        .logout-btn {
-            background: none;
-            border: none;
-            padding: 0;
-            cursor: pointer;
-        }
-
-        /* Navigation */
-        .main-nav {
-            padding: 15px 30px;
-            background-color: #2e652e;
-        }
-
-        .main-nav ul {
-            display: flex;
-            list-style: none;
-            margin: 0;
-            padding: 0;
-        }
-
-        .main-nav li {
-            margin-right: 20px;
-        }
-
-        .main-nav a {
-            color: white;
-            text-decoration: none;
-            font-weight: 600;
-            padding: 5px 0;
-            position: relative;
-        }
-
-        .main-nav a:hover {
-            color: #fdd835;
-        }
-
-        .main-nav a::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 0;
-            height: 2px;
-            background-color: #fdd835;
-            transition: width 0.3s ease;
-        }
-
-        .main-nav a:hover::after {
-            width: 100%;
-        }
-
-        /* Mobile Menu */
-        #mobile-header {
-            display: none;
-            justify-content: space-between;
-            align-items: center;
-            padding: 15px 20px;
-            background: linear-gradient(135deg, #2e652e, #1f3f1f);
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-            z-index: 1001;
-            position: relative;
-        }
-
-        #mobile-logo img {
-            height: 50px;
-        }
-
-        .menu-toggle {
-            font-size: 28px;
-            color: white;
-            cursor: pointer;
-            transition: transform 0.3s ease;
-        }
-
-        .menu-toggle:hover {
-            transform: scale(1.1);
-        }
-
-        .mobile-menu {
-            position: fixed;
-            top: 0;
-            right: -100%;
-            width: 75%;
-            height: 100vh;
-            background: linear-gradient(135deg, #f0f7f0, #e0e8e0);
-            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
-            transition: right 0.3s ease;
-            padding: 20px;
-            z-index: 1002;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .mobile-menu.open {
-            right: 0;
-        }
-
-        .mobile-menu-header {
-            display: flex;
-            justify-content: flex-end;
-            margin-bottom: 20px;
-        }
-
-        .close-btn {
-            cursor: pointer;
-            font-size: 28px;
-            color: #2e652e;
-            transition: color 0.3s ease;
-        }
-
-        .close-btn:hover {
-            color: #1f3f1f;
-        }
-
-        .mobile-search-form {
-            display: flex;
-            align-items: center;
-            padding: 12px 16px;
-            gap: 10px;
-            background: white;
-            border-radius: 25px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            margin-bottom: 20px;
-        }
-
-        .mobile-search-form input {
-            flex: 1;
-            padding: 10px 15px;
-            border: none;
-            border-radius: 20px;
-            font-size: 14px;
-            outline: none;
-            background: #f5f5f5;
-        }
-
-        .mobile-search-form button {
-            background-color: #2e652e;
-            color: white;
-            border: none;
-            padding: 10px 15px;
-            border-radius: 50%;
-            font-size: 16px;
-            cursor: pointer;
-            transition: background-color 0.3s ease, transform 0.3s ease;
-        }
-
-        .mobile-search-form button:hover {
-            background-color: #1f3f1f;
-            transform: scale(1.1);
-        }
-
-        .mobile-nav {
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-        }
-
-        .mobile-nav a {
-            color: #2e652e;
-            text-decoration: none;
-            font-size: 18px;
-            padding: 10px 15px;
-            border-radius: 8px;
-            transition: background-color 0.3s ease, color 0.3s ease;
-        }
-
-        .mobile-nav a:hover {
-            background-color: #2e652e;
-            color: white;
-            transform: translateX(5px);
-        }
-
-        #overlay {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100vw;
-            height: 100vh;
-            background: rgba(0, 0, 0, 0.5);
-            z-index: 1000;
-        }
-
-        #overlay.active {
-            display: block;
-        }
-
-        .category-filter {
-            padding: 15px 20px;
-            background: #f9f9f9;
-            border-radius: 12px;
-            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-            max-width: 300px;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }
-
-        .filters h3 {
-            font-weight: 600;
-            font-size: 1.3rem;
-            margin-bottom: 15px;
-            color: #333;
-            border-bottom: 2px solid #4CAF50;
-            padding-bottom: 6px;
-            user-select: none;
-        }
-
-        .price-filter h3 {
-            font-weight: 600;
-            font-size: 1.3rem;
-            margin-bottom: 15px;
-            color: #333;
-            border-bottom: 2px solid #4CAF50;
-            padding-bottom: 6px;
-            user-select: none;
-        }
-
-        .store-filter h3 {
-            font-weight: 600;
-            font-size: 1.3rem;
-            margin-bottom: 15px;
-            color: #333;
-            border-bottom: 2px solid #4CAF50;
-            padding-bottom: 6px;
-            user-select: none;
-        }
-
-        .filter-option {
-            display: flex;
-            align-items: center;
-            margin-bottom: 10px;
-            cursor: pointer;
-            user-select: none;
-        }
-
-        .filter-option input[type="checkbox"] {
-            width: 18px;
-            height: 18px;
-            margin-right: 12px;
-            accent-color: #4CAF50; /* modern browsers */
-            cursor: pointer;
-            transition: transform 0.15s ease-in-out;
-        }
-
-        .filter-option input[type="checkbox"]:hover {
-            transform: scale(1.1);
-        }
-
-        .filter-option label {
-            font-size: 1rem;
-            color: #555;
-            transition: color 0.3s ease;
-        }
-
-        .filter-option:hover label {
-            color: #4CAF50;
-        }
-
-
-        .filters {
-            width: 280px;
-            padding: 25px;
-            background-color: #f5f5f5;
-            border-radius: 10px;
-            margin-right: 30px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            border: 1px solid #e0e0e0;
-        }
-
-        {##}
-        {#.filter-section h3 {#}
-        {#    background-color: #2e652e;#}
-        {#    color: white;#}
-        {#    padding: 10px 15px;#}
-        {#    border-radius: 5px;#}
-        {#    margin: 0 -15px 15px -15px;#}
-        {#    font-size: 1rem;#}
-
-        {##}
-        {#        .price-filter h3 {#}
-        {#            background-color: #2e652e;#}
-        {#            color: white;#}
-        {#            padding: 10px 15px;#}
-        {#            border-radius: 5px;#}
-        {#            margin: 0 -15px 15px -15px;#}
-        {#            font-size: 1rem;#}
-        {#        }#}
-
-        {#.store-filter h3 {#}
-        {#    background-color: #2e652e;#}
-        {#    color: white;#}
-        {#    padding: 10px 15px;#}
-        {#    border-radius: 5px;#}
-        {#    margin: 0 -15px 15px -15px;#}
-        {#    font-size: 1rem;#}
-        {
-        #}#}
-
-        .filter-submit-btn {
-            background-color: #2e652e;
-            color: white;
-            border: none;
-            padding: 10px 20px;
-            border-radius: 5px;
-            width: 100%;
-            font-size: 1rem;
-            cursor: pointer;
-            transition: background-color 0.3s;
-        }
-
-        .filter-submit-btn:hover {
-            background-color: #3e7e3e;
-        }
-
-        .product-card {
-            border: 1px solid #e0e0e0;
-            border-radius: 10px;
-            overflow: hidden;
-            transition: all 0.3s ease;
-            background: white;
-        }
-
-        .product-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-            border-color: #2e652e;
-        }
-
-        .product-image {
-            height: 200px;
-            background-color: #f9f9f9;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 15px;
-        }
-
-        .product-image img {
-            max-height: 100%;
-            max-width: 100%;
-            object-fit: contain;
-        }
-
-        .product-info {
-            padding: 20px;
-        }
-
-        .product-price {
-            font-size: 1.2rem;
-            color: #2e652e;
-            font-weight: bold;
-            margin-top: 20px;
-            display: flex; /* Use flexbox for vertical stacking */
-            flex-direction: column; /* Stack children vertically */
-            gap: 5px; /* Add spacing between elements */
-        }
-
-        .old-price {
-            color: #999;
-            text-decoration: line-through;
-            font-size: 0.9rem;
-        }
-
-        .discount-badge {
-            background-color: #e74c3c;
-            color: white;
-            padding: 3px 8px;
-            border-radius: 3px;
-            font-size: 0.8rem;
-            margin-left: 8px;
-        }
-
-        @keyframes spin {
-            0% {
-                transform: rotate(0deg);
-            }
-            100% {
-                transform: rotate(360deg);
-            }
-        }
-
-        .view-product:hover {
-            color: rgba(57, 146, 47, 0.93);
-        }
-
-
-        /* Alternative ribbon style 1 - corner flag */
-        .ribbon-flag {
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 0;
-            height: 0;
-            border-style: solid;
-            border-width: 0 0 0 0;
-            border-color: transparent #e74c3c transparent transparent;
-        {#z-index: 1;#} visibility: visible !important; /* Force visibility */
-            opacity: 1 !important; /* Force visibility */
-
-
-        }
-
-        .ribbon-flag-text {
-            position: absolute;
-            top: -4px;
-            right: -10px;
-            color: white;
-            font-size: 15px;
-            font-weight: bold;
-            transform: rotate(70deg);
-            z-index: 5;
-            visibility: visible !important;
-        / opacity: 1 !important; /* Force visibility */
-
-
-        }
-
-        .product-card, .product-image {
-            position: relative;
-        {#overflow: visible !important;#}
-        }
-
-        /* Instruction Modal Styles */
-        /* Enhanced Instruction Modal */
-        .instruction-modal {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.85);
-            z-index: 9999;
-            font-family: Arial, sans-serif;
-        }
-
-        .modal-content {
-            background: white;
-            border-radius: 15px;
-            width: 90%;
-            max-width: 450px;
-            margin: auto;
-            position: relative;
-            overflow: hidden;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-            transform: scale(0.9);
-            opacity: 0;
-            animation: modalEntrance 0.4s forwards;
-        }
-
-        @keyframes modalEntrance {
-            to {
-                transform: scale(1);
-                opacity: 1;
-            }
-        }
-
-        .modal-header {
-            background: #2e652e;
-            color: white;
-            padding: 20px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .modal-header h3 {
-            margin: 0;
-            font-size: 1.4rem;
-        }
-
-        .modal-body {
-            padding: 20px;
-        }
-
-        .instruction-step {
-            display: flex;
-            align-items: flex-start;
-            margin-bottom: 15px;
-            padding: 10px;
-            border-radius: 8px;
-            background: #f8f8f8;
-        }
-
-        .step-number {
-            background: #2e652e;
-            color: white;
-            width: 25px;
-            height: 25px;
-            border-radius: 50%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin-right: 15px;
-            font-weight: bold;
-            flex-shrink: 0;
-        }
-
-        .hint-text {
-            color: #666;
-            font-size: 0.9em;
-            font-style: italic;
-        }
-
-        .modal-action-btn {
-            background: #2e652e;
-            color: white;
-            border: none;
-            padding: 12px 25px;
-            border-radius: 30px;
-            margin: 20px auto;
-            display: block;
-            font-size: 1rem;
-            font-weight: bold;
-            cursor: pointer;
-            transition: all 0.3s;
-        }
-
-        .modal-action-btn:hover {
-            background: #3e7e3e;
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(46, 101, 46, 0.3);
-        }
-
-        .modal-close-btn {
-            background: none;
-            border: none;
-            color: white;
-            font-size: 1.8rem;
-            cursor: pointer;
-            padding: 0 10px;
-        }
-
-        /* Enhanced Arrows */
-        .arrow-pointer {
-        {#position: absolute;#} width: 100px;
-            height: 100px;
-            pointer-events: none;
-            z-index: 10000;
-        }
-
-
-        .pulse-arrow {
-            animation: pulse 1.5s infinite, float 3s ease-in-out infinite;
-        }
-
-        @keyframes pulse {
-            0% {
-                transform: scale(1);
-            }
-            50% {
-                transform: scale(1.2);
-            }
-            100% {
-                transform: scale(1);
-            }
-        }
-
-        @keyframes float {
-            0%, 100% {
-                transform: translateY(0);
-            }
-            50% {
-                transform: translateY(-10px);
-            }
-        }
-
-        }
-
-
-    </style>
-</head>
-<body>
-{% load static %}
-<div id="navbar">
-
-    <!-- Header -->
-    <header class="main-header">
-        <div class="header-top">
-            <div class="logo">
-                <a href="{% url 'home' %}"><img src="{% static 'images/shtedko_official1.png' %}"
-                                                alt="Штедко лого"/></a>
+
+            .favorite-btn i {
+                font-size: 18px;
+                color: #ccc;
+                transition: all 0.3s ease;
+            }
+
+            .favorite-btn.active i {
+                color: #e74c3c;
+            }
+
+            .favorite-btn.pulse {
+                animation: pulseHeart 0.6s ease;
+            }
+
+            @keyframes pulseHeart {
+                0% {
+                    transform: scale(1);
+                }
+                50% {
+                    transform: scale(1.3);
+                }
+                100% {
+                    transform: scale(1);
+                }
+            }
+        </style>
+    </head>
+    <body>
+    {% load static %}
+
+    <div class="catalog-container">
+        <div class="filters">
+            <button class="filter-toggle" onclick="toggleFilters()">☰ Филтри</button>
+            <form id="filterForm" method="GET" action=".">
+
+                {% if request.GET.search %}
+                    <input type="hidden" name="search" value="{{ request.GET.search }}">
+                {% endif %}
+
+                <div class="filter-section category-filter">
+                    <h3>Категории</h3>
+                    {% for category in categories %}
+                        <div class="filter-option">
+                            <input
+                                    type="checkbox"
+                                    id="cat-{{ forloop.counter }}"
+                                    name="category"
+                                    value="{{ category }}"
+                                    {% if category in selected_categories %}checked{% endif %}
+                            >
+                            <label for="cat-{{ forloop.counter }}">{{ category|translate_category }}</label>
+                        </div>
+                    {% endfor %}
+                </div>
+
+                <div class="filter-section price-filter">
+                    <h3>Цена</h3>
+                    <input
+                            type="range"
+                            min="0"
+                            max="6000"
+                            value="{{ selected_max_price|default:'6000' }}"
+                            class="price-slider"
+                            id="priceRange"
+                            name="max_price"
+                            style="width: 270px"
+                    />
+                    <div class="price-range">
+                        <span>0 ден.</span>
+                        <span id="maxPriceDisplay">6000 ден.</span>
+                    </div>
+                </div>
+
+                <div class="filter-section store-filter">
+                    <h3>Продавници</h3>
+                    <div class="filter-option">
+                        <input type="checkbox" id="store-vero" name="store" value="Vero"
+                               {% if 'Vero' in selected_stores %}checked{% endif %}>
+                        <label for="store-vero">Vero</label>
+                    </div>
+                    <div class="filter-option">
+                        <input type="checkbox" id="store-reptil" name="store" value="Reptil"
+                               {% if 'Reptil' in selected_stores %}checked{% endif %}>
+                        <label for="store-reptil">Reptil</label>
+                    </div>
+                    <div class="filter-option">
+                        <input type="checkbox" id="store-ramstore" name="store" value="Ramstore"
+                               {% if 'Ramstore' in selected_stores %}checked{% endif %}>
+                        <label for="store-ramstore">Ramstore</label>
+                    </div>
+                    <div class="filter-option">
+                        <input type="checkbox" id="store-zito" name="store" value="Zito"
+                               {% if 'Zito' in selected_stores %}checked{% endif %}>
+                        <label for="store-zito">Zito</label>
+                    </div>
+                    <div class="filter-option">
+                        <input type="checkbox" id="store-kam" name="store" value="Kam"
+                               {% if 'Kam' in selected_stores %}checked{% endif %}>
+                        <label for="store-kam">Kam</label>
+                    </div>
+                </div>
+                <input type="hidden" name="sort" id="sortValue" value="{{ selected_sort }}">
+
+                <button type="submit" class="filter-submit-btn"
+                        style="background-color: #2e652e; border-radius: 10px; padding: 7px; color:white; border-color: white">
+                    Филтрирај
+                </button>
+            </form>
+        </div>
+
+
+        <!-- Products Grid -->
+        <div class="products-grid">
+            <!-- Sorting Options -->
+            {% if request.GET.search %}
+                <div style="margin-bottom: 15px; text-align: center;">
+                    <h3>Резултати за пребарување: "<strong>{{ request.GET.search }}</strong>"</h3>
+                    <a href="?" style="color: #666; text-decoration: none;">× Откажи пребарување</a>
+                </div>
+
+
+
+            {% endif %}
+            <div class="sorting-options">
+                <b>
+                    <label style="margin-top: 7px; color: rgba(31,70,31,0.9)"
+                           for="sort">Сортирај по:</label>
+                    <select id="sort" onchange="updateSort()">
+                        <option value="popular" {% if selected_sort == 'popular' %}selected{% endif %}>Најпопуларни
+                        </option>
+                        <option value="price_asc" {% if selected_sort == 'price_asc' %}selected{% endif %}>Цена
+                            (најниска)
+                        </option>
+                        <option value="price_desc" {% if selected_sort == 'price_desc' %}selected{% endif %}>Цена
+                            (највисока)
+                        </option>
+                        <option value="name_asc" {% if selected_sort == 'name_asc' %}selected{% endif %}>Име (А-Ш)
+                        </option>
+                        <option value="name_desc" {% if selected_sort == 'name_desc' %}selected{% endif %}>Име (Ш-А)
+                        </option>
+                    </select>
+                    {#            <select id="listSelector" class="form-select">#}
+                    {#                <option value="">-- Избери листа --</option>#}
+                    {#            </select>#}
+                </b>
             </div>
 
-            <div class="header-search">
-                <form method="GET" action="{% url 'product_list' %}" id="searchForm">
-                    <input type="text" name="search" id="searchInput" placeholder="Пребарај производи..."
-                           value="{{ request.GET.search }}">
-                    <button type="submit"><i class="fas fa-search"></i></button>
-                </form>
-                <div id="suggestions"
-                     style="position: absolute; background: white; border: 1px solid #ddd; border-radius: 5px; width: 98%; max-height: 200px; overflow-y: auto; display: none; z-index: 2"></div>
-            </div>
-
-            <div class="user-actions">
-                {% if user.is_authenticated %}
-                    <a href="{% url 'view_lists' %}" class="list-icon">
-                        {#                        <img src="{% static 'images/final_icon_listi.png' %}" width="60px" alt="Листи">#}
-                        мои листи
-                    </a>
-                    <select id="listSelector" class="form-select">
-                        листа:
-                        <option value="">-- Избери листа --</option>
-                    </select>
-                    {#                    <a href="{% url 'stats' %}" class="stats-icon">#}
-                    {#                        <img src="{% static 'images/stats.png' %}" width="57px" alt="Статистика">#}
-                    {#                    </a>#}
-                    <form method="post" action="{% url 'logout' %}">
-                        {% csrf_token %}
-                        <button type="submit" class="logout-btn">
-                            <img src="{% static 'images/log_out.png' %}" width="35px" alt="Одјави се">
-                        </button>
-                    </form>
-                {% else %}
-                    <a href="{% url 'login' %}"
-                       style=" padding: 8px 16px; border-radius: 20px; background-color: #f5f5f5; margin-right: -10px"><i
-                            class="fas fa-user"></i> Најави се</a>
-                    <a href="{% url 'register' %}"
-                       style=" padding: 8px 16px; border-radius: 20px; background-color: #f5f5f5"><i
-                            class="fas fa-user-plus"></i> Регистрирај се</a>
-                {% endif %}
-            </div>
-        </div>
-
-        <nav class="main-nav">
-            <ul>
-                <li><a href="{% url 'product_list' %}">Каталог</a></li>
-                <li style="z-index: 0"><a href="{% url 'stats' %}">Статистика</a></li>
-                {#                <li><a href="#">Попусти</a></li>#}
-                {#                <li><a href="#">Продавници</a></li>#}
-            </ul>
-        </nav>
-    </header>
-
-    <!-- Mobile Header -->
-    <div id="mobile-header">
-        <div id="mobile-logo">
-            <img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого">
-        </div>
-        <div class="menu-toggle" onclick="toggleMobileMenu()">☰</div>
-    </div>
-
-    <!-- Mobile Menu -->
-    <div id="mobile-menu" class="mobile-menu">
-        <div class="mobile-menu-header">
-            <span class="close-btn" onclick="toggleMobileMenu()">×</span>
-        </div>
-
-        <form method="GET" action="{% url 'product_list' %}" class="mobile-search-form" id="mobileSearchForm">
-            <input type="text" name="search" id="mobileSearchInput" placeholder="Пребарај производ..."
-                   value="{{ request.GET.search }}">
-            <button type="submit"><i class="fas fa-search"></i></button>
-        </form>
-
-        <nav class="mobile-nav">
-            <a href="{% url 'home' %}">Дома</a>
-            <a href="{% url 'product_list' %}">Каталог</a>
-            <a href="{% url 'stats' %}">Статистика</a>
-            {#            <a href="#">Попусти</a>#}
-            {#            <a href="#">Продавници</a>#}
-            <a href="{% url 'view_lists' %}">Листи</a>
-
-            {% if user.is_authenticated %}
-                <a href="{% url 'logout' %}">Одјави се</a>
-            {% else %}
-                <a href="{% url 'login' %}">Најави се</a>
-                <a href="{% url 'register' %}">Регистрирај се</a>
-            {% endif %}
-        </nav>
-    </div>
-</div>
-
-{#    <div id="horizontal_picture"#}
-{#         style="background-image: url('{% static 'images/baner1.jpg' %}');#}
-{#                 background-size: cover;#}
-{#                 background-position: center;#}
-{#                 height: 250px;#}
-{#                 display: flex;#}
-{#                 flex-direction: column;#}
-{#                 justify-content: center;#}
-{#                 align-items: center;#}
-{#                 color: white;#}
-{#                 text-shadow: 2px 2px 4px rgba(0,0,0,0.5);#}
-{#                 margin-bottom: 30px;#}
-{#                 position: relative;">#}
-{##}
-{#        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: 0;"></div>#}
-{##}
-{#        <div style="position: relative; z-index: 1; text-align: center; padding: 20px;">#}
-{#            <h1 style="font-size: 2.5rem; margin-bottom: 10px;">Нашите Производи</h1>#}
-{#            <p style="font-size: 1.2rem; max-width: 600px;">Откријте ги најдобрите производи по најниски цени</p>#}
-{#        </div>#}
-{#    </div>#}
-
-{#    <div id="overlay" onclick="toggleMobileMenu()"></div>#}
-
-{#    <div id="horizontal_picture"#}
-{#         style="background-image: url('{% static 'images/baner1.jpg' %}'); background-size: cover;margin-top: 20px; background-position: center; padding: 10px 30px; text-align: center; color: white; position: relative; z-index: 1;">#}
-<!-- Heading Section -->
-{#    <h2 style="font-size: 3rem; font-weight: bold; margin-bottom: 10px;">Каталог</h2>#}
-{#    <h3 style="font-size: 1.5rem; font-weight: 300; margin-bottom: 20px;">Избери го вистинското!</h3>#}
-
-{#        <!-- Search Form -->#}
-{#        <form method="GET" action="." class="search-form"#}
-{#              style="display: inline-block; position: relative; z-index: 2; width: 100%; max-width: 800px;">#}
-{#            <input type="text" name="search" placeholder="Пребарај производи по име..."#}
-{#                   value="{{ request.GET.search }}"#}
-{#                   style="padding: 12px 20px; width: 80%; max-width: 600px; border-radius: 50px; border: 1px solid #ddd; font-size: 1rem; outline: none; transition: all 0.3s ease;">#}
-{#            <button type="submit"#}
-{#                    style="padding: 12px 30px; color: white; background-color: #cb7e31; border: none; border-radius: 50px; margin-left: 10px; cursor: pointer; font-size: 1rem; font-weight: 600; transition: all 0.3s ease;">#}
-{#                Пребарај#}
-{#            </button>#}
-{#        </form>#}
-
-<!-- Overlay for Text Contrast -->
-{#        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 0;"></div>#}
-{#    </div>#}
-
-<!-- Add this modal at the bottom of your body -->
-{#    <div class="modal-overlay" id="listModal">#}
-{#        <div class="modal-content">#}
-{#            <div class="modal-header">#}
-{#                <div class="modal-title">Избери листа</div>#}
-{#                <button class="close-modal" onclick="closeModal()">×</button>#}
-{#            </div>#}
-{#            <div id="listsContainer">#}
-{#                <!-- Lists will be dynamically populated here -->#}
-{#            </div>#}
-{#            <div class="create-new-list" onclick="showNewListForm()">+ Креирај нова листа</div>#}
-{#            <div class="new-list-form" id="newListForm">#}
-{#                <input type="text" id="newListName" placeholder="Име на листата">#}
-{#                <button onclick="createNewList()">Креирај</button>#}
-{#            </div>#}
-{#        </div>#}
-{#    </div>#}
-{#    <div class="featured-section" style="margin-bottom: 40px;">#}
-{#        <h2 style="text-align: center; margin-bottom: 30px; color: #333;">Препорачани Производи</h2>#}
-{#        <div class="grid" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));">#}
-{#            <!-- Featured products here -->#}
-{#        </div>#}
-{#    </div>#}
-{#    <div class="cta-section"#}
-{#         style="background-color: #f9f9f9; padding: 50px 20px; text-align: center; margin-top: 50px;">#}
-{#        <h2 style="color: #2e652e; margin-bottom: 20px;">Не ги најдовте што го баравте?</h2>#}
-{#        <p style="max-width: 600px; margin: 0 auto 30px; color: #555;">Контактирајте не и ќе ви помогнеме да го најдете#}
-{#            саканиот производ</p>#}
-{#        <a href="#"#}
-{#           style="background-color: #2e652e; color: white; padding: 12px 30px; border-radius: 5px; text-decoration: none; font-weight: bold;">Контактирај#}
-{#            не</a>#}
-{#    </div>#}
-
-<div class="catalog-container">
-    <div class="filters">
-        <button class="filter-toggle" onclick="toggleFilters()">☰ Филтри</button>
-        <form id="filterForm" method="GET" action=".">
-
-            {% if request.GET.search %}
-                <input type="hidden" name="search" value="{{ request.GET.search }}">
-            {% endif %}
-
-            <div class="filter-section category-filter">
-                <h3>Категории</h3>
-                {% for category in categories %}
-                    <div class="filter-option">
-                        <input
-                                type="checkbox"
-                                id="cat-{{ forloop.counter }}"
-                                name="category"
-                                value="{{ category }}"
-                                {% if category in selected_categories %}checked{% endif %}
-                        >
-                        <label for="cat-{{ forloop.counter }}">{{ category|translate_category }}</label>
+            <!-- Product Grid -->
+            <div class="grid">
+                {% for product in page_obj %}
+                    <div class="product-card">
+                        {% if product.popust %}
+                            <div class="ribbon-flag"></div>
+                            <div class="ribbon-flag-text">
+                                {#                            Попуст!#}
+                                <img src="{% static 'images/novo_disc.png' %}" width="90px">
+                            </div>
+                        {% endif %}
+                        <a href="{% url 'product_detail' product.id %}">
+                            <div class="product-image">
+                                {% if product.image_url %}
+                                    <img src="{{ product.image_url }}" alt="{{ product.name }}"
+                                         style="max-width: 100%; max-height: 100%;">
+                                {% else %}
+                                    [No Image]
+                                {% endif %}
+                            </div>
+                            <div class="product-info">
+
+                                <div style="color: rgba(10,12,15,0.71)" class="product-name">{{ product.name }}</div>
+                                <div style="display: block">
+                                    <div class="product-price">
+                                        {% if product.popust %}
+
+                                            <span class="old-price">{{ product.price }} ден.</span>
+                                            {{ product.actual_price }} ден.
+                                            <span class="discount-badge"
+                                                  style="width: 50px; margin-left: -1px">Попуст!</span>
+                                            {% if product.popust_date %}
+                                                <div class="discount-valid">
+                                                    Важи до: {{ product.popust_date|date:"d.m.Y" }}
+                                                </div>
+                                            {% endif %}
+                                        {% else %}
+                                            {{ product.price }} ден.
+                                        {% endif %}
+                                    </div>
+                                </div>
+
+
+                                <div class="product-store">
+                                    {% if product.store == 'Vero' %}
+                                        <img src="{% static 'images/vero_logo1.png' %}" alt="Vero"
+                                             style="height: 35px;">
+                                    {% elif product.store == 'Ramstore' %}
+                                        <img src="{% static 'images/ramstore_logo.png' %}" alt="Ramstore"
+                                             style="height: 35px;">
+                                    {% elif product.store == 'Reptil' %}
+                                        <img src="{% static 'images/reptil_logo.jpg' %}" alt="Reptil"
+                                             style="height: 35px;">
+                                    {% elif product.store == 'Zito' %}
+                                        <img src="{% static 'images/zito_logo.png' %}" alt="Zito"
+                                             style="height: 35px;">
+                                    {% endif %}
+                                </div>
+                                <div class="product-category"
+                                     style="color: rgba(42,82,42,0.76)">{{ product.category|translate_category }}</div>
+                                <div class="product-actions">
+                                    <a href="{{ product.product_url }}" target="_blank" class="view-product"
+                                       style="color: rgba(22,53,22,0.93); ">Види
+                                        производ</a>
+                                    <div class="product-actions">
+                                        <button class="btn btn-success add-to-list-btn"
+                                                style="padding: 7px; background-color: #2e652e; color: white; border-radius: 10px; border-color: rgba(84,146,73,0.71); cursor: pointer; "
+                                                data-product-id="{{ product.id }}"><b>Додај</b>
+                                        </button>
+                                        <button onclick="toggleFavorite(this, {{ product.id }})" class="favorite-btn">
+                                            <i class="far fa-heart"></i>
+                                        </button>
+                                    </div>
+
+
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                {% empty %}
+                    <div class="no-products">
+                        Нема пронајдени продукти што ги задоволуваат избраните филтри
                     </div>
                 {% endfor %}
             </div>
 
-            <div class="filter-section price-filter">
-                <h3>Цена</h3>
-                <input
-                        type="range"
-                        min="0"
-                        max="6000"
-                        value="{{ selected_max_price|default:'6000' }}"
-                        class="price-slider"
-                        id="priceRange"
-                        name="max_price"
-                        style="width: 270px"
-                />
-                <div class="price-range">
-                    <span>0 ден.</span>
-                    <span id="maxPriceDisplay">6000 ден.</span>
+            <!-- Add similar products section -->
+            {% if similar_products %}
+                <div style="margin: 30px 0;">
+                    <h3 style="text-align: center;
+                  padding-bottom: 15px;
+                  margin-bottom: 30px;
+                  font-size: 28px;
+                  font-weight: 600;
+                  color: #2e652e;
+                  position: relative;
+                  letter-spacing: 1px;">
+                        <span style="background: #f8f9fa; padding: 0 20px; position: relative; z-index: 1;">Слични продукти</span>
+                        <span style="content: '';
+                        position: absolute;
+                        bottom: 0;
+                        left: 0;
+                        right: 0;
+                        height: 3px;
+                        background: linear-gradient(90deg, transparent, #2e652e, transparent);
+                        z-index: 0;"></span>
+                    </h3>
+                    <div class="grid">
+                        {% for product in similar_products %}
+                            <div class="product-card">
+                                {% if product.popust %}
+                                    <div class="ribbon-flag"></div>
+                                    <div class="ribbon-flag-text">
+                                        <img src="{% static 'images/novo_disc.png' %}" width="90px">
+                                    </div>
+                                {% endif %}
+                                <a href="{% url 'product_detail' product.id %}">
+                                    <div class="product-image">
+                                        {% if product.image_url %}
+                                            <img src="{{ product.image_url }}" alt="{{ product.name }}"
+                                                 style="max-width: 100%; max-height: 100%;">
+                                        {% else %}
+                                            [No Image]
+                                        {% endif %}
+                                    </div>
+                                    <div class="product-info">
+                                        <div style="color: rgba(10,12,15,0.71)"
+                                             class="product-name">{{ product.name }}</div>
+                                        <div style="display: block">
+                                            <div class="product-price">
+                                                {% if product.popust %}
+                                                    <span class="old-price">{{ product.price }} ден.</span>
+                                                    {{ product.actual_price }} ден.
+                                                    <span class="discount-badge"
+                                                          style="width: 50px; margin-left: -1px">Попуст!</span>
+                                                    {% if product.popust_date %}
+                                                        <div class="discount-valid">
+                                                            Важи до: {{ product.popust_date|date:"d.m.Y" }}
+                                                        </div>
+                                                    {% endif %}
+                                                {% else %}
+                                                    {{ product.price }} ден.
+                                                {% endif %}
+                                            </div>
+                                        </div>
+                                        <div class="product-store">
+                                            {% if product.store == 'Vero' %}
+                                                <img src="{% static 'images/vero_logo1.png' %}" alt="Vero"
+                                                     style="height: 35px;">
+                                            {% elif product.store == 'Ramstore' %}
+                                                <img src="{% static 'images/ramstore_logo.png' %}" alt="Ramstore"
+                                                     style="height: 35px;">
+                                            {% elif product.store == 'Reptil' %}
+                                                <img src="{% static 'images/reptil_logo.jpg' %}" alt="Reptil"
+                                                     style="height: 35px;">
+                                            {% elif product.store == 'Zito' %}
+                                                <img src="{% static 'images/zito_logo.png' %}" alt="Zito"
+                                                     style="height: 35px;">
+                                            {% endif %}
+                                        </div>
+                                        <div class="product-category">{{ product.category|translate_category }}</div>
+                                        <div class="product-actions">
+                                            <a href="{{ product.product_url }}" target="_blank" class="view-product"
+                                               style="color: rgba(22,53,22,0.93); ">Види производ</a>
+                                            <div class="product-actions">
+                                                <button class="btn btn-success add-to-list-btn"
+                                                        style="padding: 7px; background-color: #2e652e; color: white; border-radius: 10px; border-color: rgba(84,146,73,0.71); cursor: pointer; "
+                                                        data-product-id="{{ product.id }}"><b>Додај</b>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </a>
+                            </div>
+                        {% endfor %}
+                    </div>
                 </div>
-            </div>
-
-            <div class="filter-section store-filter">
-                <h3>Продавници</h3>
-                <div class="filter-option">
-                    <input type="checkbox" id="store-vero" name="store" value="Vero"
-                           {% if 'Vero' in selected_stores %}checked{% endif %}>
-                    <label for="store-vero">Vero</label>
-                </div>
-                <div class="filter-option">
-                    <input type="checkbox" id="store-reptil" name="store" value="Reptil"
-                           {% if 'Reptil' in selected_stores %}checked{% endif %}>
-                    <label for="store-reptil">Reptil</label>
-                </div>
-                <div class="filter-option">
-                    <input type="checkbox" id="store-ramstore" name="store" value="Ramstore"
-                           {% if 'Ramstore' in selected_stores %}checked{% endif %}>
-                    <label for="store-ramstore">Ramstore</label>
-                </div>
-                <div class="filter-option">
-                    <input type="checkbox" id="store-zito" name="store" value="Zito"
-                           {% if 'Zito' in selected_stores %}checked{% endif %}>
-                    <label for="store-zito">Zito</label>
-                </div>
-            </div>
-
-
-            <input type="hidden" name="sort" id="sortValue" value="{{ selected_sort }}">
-
-            <button type="submit" class="filter-submit-btn"
-                    style="background-color: #2e652e; border-radius: 10px; padding: 7px; color:white; border-color: white">
-                Филтрирај
-            </button>
-        </form>
-    </div>
-
-
-    <!-- Products Grid -->
-    <div class="products-grid">
-        <!-- Sorting Options -->
-        {% if request.GET.search %}
-            <div style="margin-bottom: 15px; text-align: center;">
-                <h3>Резултати за пребарување: "<strong>{{ request.GET.search }}</strong>"</h3>
-                <a href="?" style="color: #666; text-decoration: none;">× Откажи пребарување</a>
-            </div>
-        {% endif %}
-        <div class="sorting-options">
-            <b>
-                <label style="margin-top: 7px; color: rgba(43,86,43,0.93)"
-                       for="sort">Сортирај по:</label>
-                <select id="sort" onchange="updateSort()">
-                    <option value="popular" {% if selected_sort == 'popular' %}selected{% endif %}>Најпопуларни</option>
-                    <option value="price_asc" {% if selected_sort == 'price_asc' %}selected{% endif %}>Цена (најниска)
-                    </option>
-                    <option value="price_desc" {% if selected_sort == 'price_desc' %}selected{% endif %}>Цена
-                        (највисока)
-                    </option>
-                    <option value="name_asc" {% if selected_sort == 'name_asc' %}selected{% endif %}>Име (А-Ш)</option>
-                    <option value="name_desc" {% if selected_sort == 'name_desc' %}selected{% endif %}>Име (Ш-А)
-                    </option>
-                </select>
-                {#            <select id="listSelector" class="form-select">#}
-                {#                <option value="">-- Избери листа --</option>#}
-                {#            </select>#}
-            </b>
-        </div>
-
-        <!-- Product Grid -->
-        <div class="grid">
-            {% for product in page_obj %}
-                <div class="product-card">
-                    {% if product.popust %}
-                        <div class="ribbon-flag"></div>
-                        <div class="ribbon-flag-text">
-                            {#                            Попуст!#}
-                            <img src="{% static 'images/novo_disc.png' %}" width="90px">
-                        </div>
-                    {% endif %}
-                    <a href="{% url 'product_detail' product.id %}">
-                        <div class="product-image">
-                            {% if product.image_url %}
-                                <img src="{{ product.image_url }}" alt="{{ product.name }}"
-                                     style="max-width: 100%; max-height: 100%;">
-                            {% else %}
-                                [No Image]
-                            {% endif %}
-                        </div>
-                        <div class="product-info">
-
-                            <div style="color: rgba(10,12,15,0.71)" class="product-name">{{ product.name }}</div>
-                            <div style="display: block">
-                                <div class="product-price">
-                                    {% if product.popust %}
-
-                                        <span class="old-price">{{ product.price }} ден.</span>
-                                        {{ product.actual_price }} ден.
-                                        <span class="discount-badge"
-                                              style="width: 50px; margin-left: -1px">Попуст!</span>
-                                        {% if product.popust_date %}
-                                            <div class="discount-valid">
-                                                Важи до: {{ product.popust_date|date:"d.m.Y" }}
-                                            </div>
-                                        {% endif %}
-                                    {% else %}
-                                        {{ product.price }} ден.
-                                    {% endif %}
-                                </div>
-                            </div>
-
-
-                            <div class="product-store">
-                                {% if product.store == 'Vero' %}
-                                    <img src="{% static 'images/vero_logo1.png' %}" alt="Vero" style="height: 35px;">
-                                {% elif product.store == 'Ramstore' %}
-                                    <img src="{% static 'images/ramstore_logo.png' %}" alt="Ramstore"
-                                         style="height: 35px;">
-                                {% elif product.store == 'Reptil' %}
-                                    <img src="{% static 'images/reptil_logo.jpg' %}" alt="Reptil"
-                                         style="height: 35px;">
-                                {% elif product.store == 'Zito' %}
-                                    <img src="{% static 'images/zito_logo.png' %}" alt="Zito"
-                                         style="height: 35px;">
-                                {% endif %}
-                            </div>
-                            <div class="product-category">{{ product.category|translate_category }}</div>
-                            <div class="product-actions">
-                                <a href="{{ product.product_url }}" target="_blank" class="view-product"
-                                   style="color: rgba(22,53,22,0.93); ">Види
-                                    производ</a>
-                                <div class="product-actions">
-                                    <button class="btn btn-success add-to-list-btn"
-                                            style="padding: 7px; background-color: #2e652e; color: white; border-radius: 10px; border-color: rgba(84,146,73,0.71); cursor: pointer; "
-                                            data-product-id="{{ product.id }}"><b>Додај</b>
-                                    </button>
-                                </div>
-
-
-                            </div>
-                        </div>
-                    </a>
-                </div>
-            {% empty %}
-                <div class="no-products">
-                    Нема пронајдени продукти што ги задоволуваат избраните филтри
-                </div>
-            {% endfor %}
-        </div>
-
-        {% if page_obj.has_other_pages %}
-            <div class="pagination">
+            {% endif %}
+
+            {% if page_obj.has_other_pages %}
+                <div class="pagination">
             <span class="step-links" style="margin-bottom: 40px">
                 {% if page_obj.has_previous %}
@@ -2115,6 +2077,40 @@
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
                             {% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">&laquo;</a>
                     <a href="?page=
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
@@ -2346,6 +2342,40 @@
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
                             {{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">&rsaquo;</a>
                     <a href="?page=
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
@@ -2461,467 +2491,690 @@
                 {% endif %}
             </span>
-            </div>
-        {% endif %}
+                </div>
+            {% endif %}
+        </div>
     </div>
-</div>
-
-<script>
-    function toggleMenu() {
-        const menu = document.getElementById('other');
-        menu.style.display = menu.style.display === 'flex' ? 'none' : 'flex';
-    }
-
-
-    // Filter toggle for mobile
-    function toggleFilters() {
-        document.querySelectorAll('.filter-section').forEach(section => {
-            section.classList.toggle('active');
-        });
-    }
-
-    document.addEventListener('DOMContentLoaded', function () {
-        // Initialize filters as collapsed on mobile
-        if (window.innerWidth <= 768) {
+
+
+    <script>
+        function toggleMenu() {
+            const menu = document.getElementById('other');
+            menu.style.display = menu.style.display === 'flex' ? 'none' : 'flex';
+        }
+
+
+        // Filter toggle for mobile
+        function toggleFilters() {
             document.querySelectorAll('.filter-section').forEach(section => {
-                section.classList.remove('active');
+                section.classList.toggle('active');
             });
         }
 
-        // Close filters when clicking outside
-        document.addEventListener('click', function (e) {
-            if (!e.target.closest('.filters') && !e.target.classList.contains('filter-toggle')) {
+        document.addEventListener('DOMContentLoaded', function () {
+            // Initialize filters as collapsed on mobile
+            if (window.innerWidth <= 768) {
                 document.querySelectorAll('.filter-section').forEach(section => {
                     section.classList.remove('active');
                 });
             }
+
+            // Close filters when clicking outside
+            document.addEventListener('click', function (e) {
+                if (!e.target.closest('.filters') && !e.target.classList.contains('filter-toggle')) {
+                    document.querySelectorAll('.filter-section').forEach(section => {
+                        section.classList.remove('active');
+                    });
+                }
+            });
         });
-    });
-    document.addEventListener('DOMContentLoaded', function () {
-        // Price range slider functionality
-        const priceSlider = document.getElementById('priceRange');
-        const maxPriceDisplay = document.getElementById('maxPriceDisplay');
-
-        if (priceSlider && maxPriceDisplay) {
-            // Set initial value if filter is active
-            if ("{{ selected_max_price }}" && "{{ selected_max_price }}" !== "1000") {
-                priceSlider.value = "{{ selected_max_price }}";
-                maxPriceDisplay.textContent = "{{ selected_max_price }}" + ' ден.';
-            }
-
-            // Update display when slider moves
-            priceSlider.addEventListener('input', function () {
-                maxPriceDisplay.textContent = this.value + ' ден.';
+        document.addEventListener('DOMContentLoaded', function () {
+            // Price range slider functionality
+            const priceSlider = document.getElementById('priceRange');
+            const maxPriceDisplay = document.getElementById('maxPriceDisplay');
+
+            if (priceSlider && maxPriceDisplay) {
+                // Set initial value if filter is active
+                if ("{{ selected_max_price }}" && "{{ selected_max_price }}" !== "1000") {
+                    priceSlider.value = "{{ selected_max_price }}";
+                    maxPriceDisplay.textContent = "{{ selected_max_price }}" + ' ден.';
+                }
+
+                // Update display when slider moves
+                priceSlider.addEventListener('input', function () {
+                    maxPriceDisplay.textContent = this.value + ' ден.';
+                });
+            }
+
+            // Connect the sorting dropdown
+            const sortSelect = document.getElementById('sort');
+            if (sortSelect) {
+                sortSelect.addEventListener('change', function () {
+                    // Get the selected sort value
+                    const sortValue = this.value;
+
+                    // Get current URL parameters
+                    const urlParams = new URLSearchParams(window.location.search);
+
+                    // Update or add the sort parameter
+                    urlParams.set('sort', sortValue);
+
+                    // Reset to first page when changing sort
+                    urlParams.set('page', '1');
+
+                    // Reload the page with new parameters
+                    window.location.search = urlParams.toString();
+                });
+            }
+
+            // Function to handle checkbox changes (immediate filter application)
+            document.querySelectorAll('.filter-option input[type="checkbox"]').forEach(checkbox => {
+                checkbox.addEventListener('change', function () {
+                    document.getElementById('filterForm').submit();
+                });
+            });
+
+            // Ensure form submits properly
+            document.getElementById('filterForm').addEventListener('submit', function (e) {
+                // You can add any pre-submit logic here if needed
+            });
+
+            // Add to shopping list functionality
+            document.querySelectorAll('.add-to-list').forEach(button => {
+                button.addEventListener('click', function () {
+                    const productId = this.getAttribute('data-product-id');
+
+                    // Send AJAX request to add to shopping list
+                    fetch('/add-to-list/', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRFToken': '{{ csrf_token }}'
+                        },
+                        body: JSON.stringify({
+                            product_id: productId
+                        })
+                    })
+                        .then(response => response.json())
+                        .then(data => {
+                            if (data.success) {
+                                alert('Продуктот е додаден во вашата листа!');
+                            } else {
+                                alert('Грешка: ' + data.message);
+                            }
+                        })
+                        .catch(error => {
+                            console.error('Error:', error);
+                            alert('Настана грешка при додавање на продуктот.');
+                        });
+                });
+            });
+        });
+        // Global variables for list management
+
+        let selectedListId = null;
+        let rememberChoice = localStorage.getItem('rememberListChoice') === 'true';
+
+        // Toggle lists dropdown
+        function toggleListsDropdown() {
+            const dropdown = document.getElementById('listsDropdown');
+            dropdown.classList.toggle('show');
+
+            // Load lists if not already loaded
+            if (dropdown.classList.contains('show') && userLists.length === 0) {
+                fetchUserLists();
+            }
+        }
+
+        // Close dropdown when clicking outside
+        window.addEventListener('click', function (e) {
+            if (!e.target.closest('.lists-dropdown') && !e.target.classList.contains('lists-toggle')) {
+                const dropdown = document.getElementById('listsDropdown');
+                dropdown.classList.remove('show');
+            }
+        });
+
+        // Fetch user's shopping lists
+        let userLists = [];
+        let currentProductId = null;
+
+        // Fetch user's lists
+        async function fetchUserLists() {
+            try {
+                const response = await fetch('/api/lists/');
+                const data = await response.json();
+                console.log("Fetched data from /api/lists/:", data); // 🔍 Check structure
+
+                // Access the lists properly based on the received data structure
+                if (data.lists && Array.isArray(data.lists)) {
+                    userLists = data.lists;  // Now userLists gets the correct array
+                } else {
+                    console.error("Unexpected response format:", data);
+                    userLists = []; // Fallback to empty
+                }
+            } catch (error) {
+                console.error('Error fetching lists:', error);
+                alert('Грешка при вчитување на листите.');
+            }
+        }
+
+
+        // Render user's shopping lists in navbar
+        function renderUserLists() {
+            const container = document.getElementById('navbarListsContainer');
+
+            if (userLists.length === 0) {
+                container.innerHTML = '<div class="no-lists">Немате креирано листи</div>';
+                return;
+            }
+
+            container.innerHTML = '';
+
+            userLists.forEach(list => {
+                const listItem = document.createElement('div');
+                listItem.className = 'list-item';
+                listItem.textContent = list.name;
+                listItem.dataset.listId = list.id;
+
+                if (selectedListId === list.id) {
+                    listItem.classList.add('active');
+                }
+
+                listItem.addEventListener('click', (e) => {
+                    e.stopPropagation(); // Prevent event bubbling
+                    window.location.href = `/lists/${list.id}/`; // Navigate to list detail
+                });
+
+                container.appendChild(listItem);
             });
         }
 
-        // Connect the sorting dropdown
-        const sortSelect = document.getElementById('sort');
-        if (sortSelect) {
-            sortSelect.addEventListener('change', function () {
-                // Get the selected sort value
-                const sortValue = this.value;
-
-                // Get current URL parameters
-                const urlParams = new URLSearchParams(window.location.search);
-
-                // Update or add the sort parameter
-                urlParams.set('sort', sortValue);
-
-                // Reset to first page when changing sort
-                urlParams.set('page', '1');
-
-                // Reload the page with new parameters
-                window.location.search = urlParams.toString();
-            });
+        // Create new list from dropdown
+        function createNewListFromDropdown() {
+            const listName = prompt('Внесете име за новата листа:');
+            if (!listName) return;
+
+            fetch('/api/lists/create/', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRFToken': '{{ csrf_token }}'
+                },
+                body: JSON.stringify({name: listName})
+            })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Network response was not ok');
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    if (data.success) {
+                        userLists.push({id: data.list_id, name: listName});
+                        renderUserLists();
+                        alert('Листата е успешно креирана!');
+                    } else {
+                        alert('Грешка: ' + data.message);
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    alert('Настана грешка при креирање на листата.');
+                });
         }
 
-        // Function to handle checkbox changes (immediate filter application)
-        document.querySelectorAll('.filter-option input[type="checkbox"]').forEach(checkbox => {
-            checkbox.addEventListener('change', function () {
-                document.getElementById('filterForm').submit();
-            });
-        });
-
-        // Ensure form submits properly
-        document.getElementById('filterForm').addEventListener('submit', function (e) {
-            // You can add any pre-submit logic here if needed
-        });
-
-        // Add to shopping list functionality
-        document.querySelectorAll('.add-to-list').forEach(button => {
-            button.addEventListener('click', function () {
-                const productId = this.getAttribute('data-product-id');
-
-                // Send AJAX request to add to shopping list
-                fetch('/add-to-list/', {
+
+        async function showListOptions(button) {
+            currentProductId = button.getAttribute('data-product-id');
+
+            // Check authentication
+            {% if not user.is_authenticated %}
+                window.location.href = "{% url 'login' %}?next={{ request.path }}";
+                return;
+            {% endif %}
+
+            // Fetch lists if not already loaded
+            if (userLists.length === 0) {
+                await fetchUserLists();
+            }
+
+            // Populate modal
+            const modal = document.getElementById('listModal');
+            const listsContainer = document.getElementById('listsContainer');
+            listsContainer.innerHTML = '';
+
+            if (userLists.length === 0) {
+                listsContainer.innerHTML = `
+                <p>Немате креирано листи.</p>
+                <div class="create-new-list" onclick="showNewListForm()">Креирај нова листа</div>
+            `;
+            } else {
+                userLists.forEach(list => {
+                    const listOption = document.createElement('div');
+                    listOption.className = 'list-option';
+                    listOption.textContent = list.name;
+                    listOption.onclick = () => addProductToList(currentProductId, list.id);
+                    listsContainer.appendChild(listOption);
+                });
+            }
+
+            modal.style.display = 'flex';
+        }
+
+        async function showListOptionsModal(productId) {
+            const modal = document.getElementById('listModal');
+            const listsContainer = document.getElementById('listsContainer');
+
+            try {
+                const response = await fetch('/api/lists/');
+                const userLists = await response.json();
+
+                console.log("Fetched user lists:", userLists); // 🔍 ADD THIS LINE HERE
+
+                // Clear old list options
+                listsContainer.innerHTML = '';
+
+                // Add new list options
+                userLists.forEach(list => {
+                    console.log("Rendering option →", list.name, list.id); // Optional: log each list's name & id
+
+                    const listOption = document.createElement('div');
+                    listOption.className = 'list-option';
+                    listOption.innerHTML = list.name;
+                    listOption.onclick = () => addProductToList(productId, list.id);
+                    listsContainer.appendChild(listOption);
+                });
+
+                modal.style.display = 'block';
+            } catch (error) {
+                console.error('Error loading user lists:', error);
+            }
+        }
+
+        async function addProductToList(productId, listId) {
+            if (!productId || !listId) {
+                alert('Недостасува ID на продукт или листа!');
+                return;
+            }
+
+            console.log("Sending to server → Product ID:", productId, "List ID:", listId);
+
+            try {
+                const response = await fetch('/add-to-list/', {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
-                        'X-CSRFToken': '{{ csrf_token }}'
+                        'X-CSRFToken': getCSRFToken()
                     },
                     body: JSON.stringify({
-                        product_id: productId
+                        product_id: productId,
+                        list_id: listId
                     })
-                })
-                    .then(response => response.json())
-                    .then(data => {
-                        if (data.success) {
-                            alert('Продуктот е додаден во вашата листа!');
-                        } else {
-                            alert('Грешка: ' + data.message);
-                        }
-                    })
-                    .catch(error => {
-                        console.error('Error:', error);
-                        alert('Настана грешка при додавање на продуктот.');
-                    });
-            });
-        });
-    });
-    // Global variables for list management
-
-    let selectedListId = null;
-    let rememberChoice = localStorage.getItem('rememberListChoice') === 'true';
-
-    // Toggle lists dropdown
-    function toggleListsDropdown() {
-        const dropdown = document.getElementById('listsDropdown');
-        dropdown.classList.toggle('show');
-
-        // Load lists if not already loaded
-        if (dropdown.classList.contains('show') && userLists.length === 0) {
-            fetchUserLists();
-        }
-    }
-
-    // Close dropdown when clicking outside
-    window.addEventListener('click', function (e) {
-        if (!e.target.closest('.lists-dropdown') && !e.target.classList.contains('lists-toggle')) {
-            const dropdown = document.getElementById('listsDropdown');
-            dropdown.classList.remove('show');
-        }
-    });
-
-    // Fetch user's shopping lists
-    let userLists = [];
-    let currentProductId = null;
-
-    // Fetch user's lists
-    async function fetchUserLists() {
-        try {
-            const response = await fetch('/api/lists/');
-            const data = await response.json();
-            console.log("Fetched data from /api/lists/:", data); // 🔍 Check structure
-
-            // Access the lists properly based on the received data structure
-            if (data.lists && Array.isArray(data.lists)) {
-                userLists = data.lists;  // Now userLists gets the correct array
-            } else {
-                console.error("Unexpected response format:", data);
-                userLists = []; // Fallback to empty
-            }
-        } catch (error) {
-            console.error('Error fetching lists:', error);
-            alert('Грешка при вчитување на листите.');
-        }
-    }
-
-
-    // Render user's shopping lists in navbar
-    function renderUserLists() {
-        const container = document.getElementById('navbarListsContainer');
-
-        if (userLists.length === 0) {
-            container.innerHTML = '<div class="no-lists">Немате креирано листи</div>';
-            return;
-        }
-
-        container.innerHTML = '';
-
-        userLists.forEach(list => {
-            const listItem = document.createElement('div');
-            listItem.className = 'list-item';
-            listItem.textContent = list.name;
-            listItem.dataset.listId = list.id;
-
-            if (selectedListId === list.id) {
-                listItem.classList.add('active');
-            }
-
-            listItem.addEventListener('click', (e) => {
-                e.stopPropagation(); // Prevent event bubbling
-                window.location.href = `/lists/${list.id}/`; // Navigate to list detail
-            });
-
-            container.appendChild(listItem);
-        });
-    }
-
-    // Create new list from dropdown
-    function createNewListFromDropdown() {
-        const listName = prompt('Внесете име за новата листа:');
-        if (!listName) return;
-
-        fetch('/api/lists/create/', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-CSRFToken': '{{ csrf_token }}'
-            },
-            body: JSON.stringify({name: listName})
-        })
-            .then(response => {
-                if (!response.ok) {
-                    throw new Error('Network response was not ok');
-                }
-                return response.json();
-            })
-            .then(data => {
+                });
+
+                const data = await response.json();
+
                 if (data.success) {
-                    userLists.push({id: data.list_id, name: listName});
-                    renderUserLists();
-                    alert('Листата е успешно креирана!');
+                    alert('Продуктот е успешно додаден во листата!');
+                    closeModal();
                 } else {
                     alert('Грешка: ' + data.message);
                 }
-            })
-            .catch(error => {
+            } catch (error) {
                 console.error('Error:', error);
-                alert('Настана грешка при креирање на листата.');
-            });
-    }
-
-
-    async function showListOptions(button) {
-        currentProductId = button.getAttribute('data-product-id');
-
-        // Check authentication
-        {% if not user.is_authenticated %}
-            window.location.href = "{% url 'login' %}?next={{ request.path }}";
-            return;
-        {% endif %}
-
-        // Fetch lists if not already loaded
-        if (userLists.length === 0) {
-            await fetchUserLists();
+                alert('Настана грешка при додавање на продуктот.');
+            }
         }
 
-        // Populate modal
-        const modal = document.getElementById('listModal');
-        const listsContainer = document.getElementById('listsContainer');
-        listsContainer.innerHTML = '';
-
-        if (userLists.length === 0) {
-            listsContainer.innerHTML = `
-                <p>Немате креирано листи.</p>
-                <div class="create-new-list" onclick="showNewListForm()">Креирај нова листа</div>
-            `;
-        } else {
-            userLists.forEach(list => {
-                const listOption = document.createElement('div');
-                listOption.className = 'list-option';
-                listOption.textContent = list.name;
-                listOption.onclick = () => addProductToList(currentProductId, list.id);
-                listsContainer.appendChild(listOption);
-            });
+        // Helper function to get CSRF token from cookies
+        function getCSRFToken() {
+            return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
         }
 
-        modal.style.display = 'flex';
-    }
-
-    async function showListOptionsModal(productId) {
-        const modal = document.getElementById('listModal');
-        const listsContainer = document.getElementById('listsContainer');
-
-        try {
-            const response = await fetch('/api/lists/');
-            const userLists = await response.json();
-
-            console.log("Fetched user lists:", userLists); // 🔍 ADD THIS LINE HERE
-
-            // Clear old list options
-            listsContainer.innerHTML = '';
-
-            // Add new list options
-            userLists.forEach(list => {
-                console.log("Rendering option →", list.name, list.id); // Optional: log each list's name & id
-
-                const listOption = document.createElement('div');
-                listOption.className = 'list-option';
-                listOption.innerHTML = list.name;
-                listOption.onclick = () => addProductToList(productId, list.id);
-                listsContainer.appendChild(listOption);
-            });
-
-            modal.style.display = 'block';
-        } catch (error) {
-            console.error('Error loading user lists:', error);
-        }
-    }
-
-    async function addProductToList(productId, listId) {
-        if (!productId || !listId) {
-            alert('Недостасува ID на продукт или листа!');
-            return;
-        }
-
-        console.log("Sending to server → Product ID:", productId, "List ID:", listId);
-
-        try {
-            const response = await fetch('/add-to-list/', {
+
+        // Function to create new list
+        function createNewList() {
+            const listName = document.getElementById('newListName').value.trim();
+            if (!listName) return;
+
+            fetch('/api/lists/create/', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
-                    'X-CSRFToken': getCSRFToken()
+                    'X-CSRFToken': '{{ csrf_token }}'
                 },
-                body: JSON.stringify({
-                    product_id: productId,
-                    list_id: listId
+                body: JSON.stringify({name: listName})
+            })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        userLists.push({id: data.list_id, name: listName});
+                        showListOptionsModal(currentProductId);
+                        document.getElementById('newListForm').style.display = 'none';
+                        document.getElementById('newListName').value = '';
+                    } else {
+                        alert('Грешка: ' + data.message);
+                    }
                 })
+                .catch(error => {
+                    console.error('Error:', error);
+                    alert('Настана грешка при креирање на листата.');
+                });
+        }
+
+        function showNewListForm() {
+            document.getElementById('newListForm').style.display = 'block';
+        }
+
+        function closeModal() {
+            document.getElementById('listModal').style.display = 'none';
+        }
+
+
+        // Initialize on page load
+        document.addEventListener('DOMContentLoaded', function () {
+            // Close modal when clicking outside
+            document.getElementById('listModal').addEventListener('click', function (e) {
+                if (e.target === this) {
+                    closeModal();
+                }
             });
 
-            const data = await response.json();
-
-            if (data.success) {
-                alert('Продуктот е успешно додаден во листата!');
-                closeModal();
-            } else {
-                alert('Грешка: ' + data.message);
-            }
-        } catch (error) {
-            console.error('Error:', error);
-            alert('Настана грешка при додавање на продуктот.');
+            // Pre-fetch user lists if authenticated
+            {% if user.is_authenticated %}
+                fetchUserLists();
+            {% endif %}
+        });
+
+        function toggleMobileMenu() {
+            const menu = document.getElementById("mobile-menu");
+            const overlay = document.getElementById("overlay");
+
+            menu.classList.toggle("open");
+            overlay.classList.toggle("active");
         }
-    }
-
-    // Helper function to get CSRF token from cookies
-    function getCSRFToken() {
-        return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
-    }
-
-
-    // Function to create new list
-    function createNewList() {
-        const listName = document.getElementById('newListName').value.trim();
-        if (!listName) return;
-
-        fetch('/api/lists/create/', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-CSRFToken': '{{ csrf_token }}'
-            },
-            body: JSON.stringify({name: listName})
-        })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    userLists.push({id: data.list_id, name: listName});
-                    showListOptionsModal(currentProductId);
-                    document.getElementById('newListForm').style.display = 'none';
-                    document.getElementById('newListName').value = '';
-                } else {
-                    alert('Грешка: ' + data.message);
-                }
-            })
-            .catch(error => {
-                console.error('Error:', error);
-                alert('Настана грешка при креирање на листата.');
-            });
-    }
-
-    function showNewListForm() {
-        document.getElementById('newListForm').style.display = 'block';
-    }
-
-    function closeModal() {
-        document.getElementById('listModal').style.display = 'none';
-    }
-
-
-    // Initialize on page load
-    document.addEventListener('DOMContentLoaded', function () {
-        // Close modal when clicking outside
-        document.getElementById('listModal').addEventListener('click', function (e) {
-            if (e.target === this) {
-                closeModal();
-            }
+
+        document.addEventListener("DOMContentLoaded", function () {
+            fetch('/api/lists/')
+                .then(response => response.json())
+                .then(data => {
+                    const dropdown = document.getElementById('listSelector');
+                    data.lists.forEach(list => {
+                        const option = document.createElement('option');
+                        option.value = list.id;
+                        option.text = list.name;
+                        dropdown.appendChild(option);
+                    });
+                });
         });
 
-        // Pre-fetch user lists if authenticated
-        {% if user.is_authenticated %}
-            fetchUserLists();
-        {% endif %}
-    });
-
-    function toggleMobileMenu() {
-        const menu = document.getElementById("mobile-menu");
-        const overlay = document.getElementById("overlay");
-
-        menu.classList.toggle("open");
-        overlay.classList.toggle("active");
-    }
-
-    document.addEventListener("DOMContentLoaded", function () {
-        fetch('/api/lists/')
-            .then(response => response.json())
-            .then(data => {
-                const dropdown = document.getElementById('listSelector');
-                data.lists.forEach(list => {
-                    const option = document.createElement('option');
-                    option.value = list.id;
-                    option.text = list.name;
-                    dropdown.appendChild(option);
+        document.addEventListener('DOMContentLoaded', function () {
+            const addToListButtons = document.querySelectorAll('.add-to-list-btn');
+
+            addToListButtons.forEach(button => {
+                button.addEventListener('click', async () => {
+                    const productId = button.dataset.productId;
+                    const selectedListId = document.getElementById('listSelector').value;
+
+                    if (!selectedListId) {
+                        alert("Ве молиме изберете листа.");
+                        return;
+                    }
+
+                    try {
+                        const response = await fetch('/api/lists/add-product/', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRFToken': getCookie('csrftoken'),
+                            },
+                            body: JSON.stringify({
+                                product_id: productId,
+                                list_id: selectedListId
+                            })
+                        });
+
+                        const result = await response.json();
+                        if (result.success) {
+                            {#alert("Производот е додаден во листата!");#}
+                        } else {
+                            alert("Грешка: " + result.message);
+                        }
+                    } catch (error) {
+                        console.error("Fetch error:", error);
+                        alert("Настана грешка. Обидете се повторно.");
+                    }
                 });
             });
-    });
-
-    document.addEventListener('DOMContentLoaded', function () {
-        const addToListButtons = document.querySelectorAll('.add-to-list-btn');
-
-        addToListButtons.forEach(button => {
-            button.addEventListener('click', async () => {
-                const productId = button.dataset.productId;
-                const selectedListId = document.getElementById('listSelector').value;
-
-                if (!selectedListId) {
-                    alert("Ве молиме изберете листа.");
-                    return;
-                }
-
-                try {
-                    const response = await fetch('/api/lists/add-product/', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'X-CSRFToken': getCookie('csrftoken'),
-                        },
-                        body: JSON.stringify({
-                            product_id: productId,
-                            list_id: selectedListId
-                        })
-                    });
-
-                    const result = await response.json();
-                    if (result.success) {
-                        {#alert("Производот е додаден во листата!");#}
-                    } else {
-                        alert("Грешка: " + result.message);
+
+            // Helper for CSRF token
+            function getCookie(name) {
+                let cookieValue = null;
+                if (document.cookie && document.cookie !== '') {
+                    const cookies = document.cookie.split(';');
+                    for (let i = 0; i < cookies.length; i++) {
+                        const cookie = cookies[i].trim();
+                        if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                            break;
+                        }
                     }
-                } catch (error) {
-                    console.error("Fetch error:", error);
-                    alert("Настана грешка. Обидете се повторно.");
-                }
+                }
+                return cookieValue;
+            }
+        });
+        document.querySelectorAll('.add-to-list-btn').forEach(button => {
+            button.addEventListener('click', function () {
+                button.classList.remove('pulse-on-click'); // reset animation if applied
+                void button.offsetWidth; // force reflow so animation can be reapplied
+                button.classList.add('pulse-on-click');
             });
         });
 
-        // Helper for CSRF token
+        document.addEventListener('DOMContentLoaded', function () {
+            // Desktop search elements
+            const searchInput = document.getElementById('searchInput');
+            const suggestionsDiv = document.getElementById('suggestions');
+            const searchForm = document.getElementById('searchForm');
+
+            // Mobile search elements
+            const mobileSearchInput = document.getElementById('mobileSearchInput');
+            const mobileSearchForm = document.getElementById('mobileSearchForm');
+
+            // Extended transliteration with typo correction
+            function transliterateLatinToCyrillic(text) {
+                const map = {
+                    'dzh': 'џ', 'dzs': 'џ', 'dsh': 'џ',
+                    'zh': 'ж', 'ch': 'ч', 'sh': 'ш', 'lj': 'љ', 'nj': 'њ', 'kj': 'ќ', 'dj': 'ѓ',
+                    'zs': 'ж', 'hs': 'ш', 'cx': 'ч', 'sx': 'ш', 'jx': 'ж',
+                    'tz': 'ц', 'ts': 'ц', 'tc': 'ц', 'dz': 'џ',
+                    'a': 'а', 'b': 'б', 'v': 'в', 'g': 'г', 'd': 'д', 'e': 'е', 'z': 'з', 'i': 'и',
+                    'j': 'ј', 'k': 'к', 'l': 'л', 'm': 'м', 'n': 'н', 'o': 'о', 'p': 'п', 'r': 'р',
+                    's': 'с', 't': 'т', 'u': 'у', 'f': 'ф', 'h': 'х', 'c': 'ц',
+                    'y': 'ј', 'w': 'в', 'x': 'кс', 'q': 'к',
+                    'ia': 'ја', 'ie': 'је', 'io': 'јо', 'iu': 'ју'
+                };
+
+                const typoPatterns = [
+                    {pattern: /sampon/gi, replace: 'shampon'},
+                    {pattern: /cresi/gi, replace: 'creshi'},
+                    {pattern: /stipki/gi, replace: 'shtipki'},
+                    {pattern: /sch/gi, replace: 'sh'},
+                    {pattern: /ck/gi, replace: 'k'},
+                    {pattern: /ph/gi, replace: 'f'},
+                    {pattern: /th/gi, replace: 't'},
+                    {pattern: /([a-z]),([a-z])/gi, replace: '$1$2'},
+                    {pattern: /([a-z])\.([a-z])/gi, replace: '$1$2'},
+                    {pattern: /([a-z])\1/gi, replace: '$1'}
+                ];
+
+                let normalizedText = text.toLowerCase();
+                for (const {pattern, replace} of typoPatterns) {
+                    normalizedText = normalizedText.replace(pattern, replace);
+                }
+
+                let result = '';
+                let i = 0;
+                while (i < normalizedText.length) {
+                    if (map[normalizedText.substring(i, i + 3)]) {
+                        result += map[normalizedText.substring(i, i + 3)];
+                        i += 3;
+                    } else if (map[normalizedText.substring(i, i + 2)]) {
+                        result += map[normalizedText.substring(i, i + 2)];
+                        i += 2;
+                    } else if (map[normalizedText[i]]) {
+                        result += map[normalizedText[i]];
+                        i++;
+                    } else {
+                        result += normalizedText[i];
+                        i++;
+                    }
+                }
+                return result;
+            }
+
+            function setupSearch(input, form) {
+                input.addEventListener('input', function () {
+                    const query = this.value.trim();
+                    if (query.length < 2) {
+                        suggestionsDiv.style.display = 'none';
+                        return;
+                    }
+
+                    fetch(`/search-suggestions/?q=${encodeURIComponent(query)}`)
+                        .then(response => response.json())
+                        .then(data => {
+                            suggestionsDiv.innerHTML = '';
+                            if (data.suggestions.length > 0) {
+                                data.suggestions.forEach(suggestion => {
+                                    const div = document.createElement('div');
+                                    div.textContent = suggestion;
+                                    div.style.padding = '5px 10px';
+                                    div.style.cursor = 'pointer';
+                                    div.addEventListener('click', function () {
+                                        input.value = transliterateLatinToCyrillic(suggestion);
+                                        suggestionsDiv.style.display = 'none';
+                                        form.submit();
+                                    });
+                                    suggestionsDiv.appendChild(div);
+                                });
+                                suggestionsDiv.style.display = 'block';
+                            } else {
+                                suggestionsDiv.style.display = 'none';
+                            }
+                        });
+                });
+
+                input.addEventListener('keydown', function (e) {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        suggestionsDiv.style.display = 'none';
+                        input.value = transliterateLatinToCyrillic(input.value);
+                        form.submit();
+                    }
+                });
+            }
+
+            setupSearch(searchInput, searchForm);
+            setupSearch(mobileSearchInput, mobileSearchForm);
+
+            document.addEventListener('click', function (e) {
+                if (!searchInput.contains(e.target) && !suggestionsDiv.contains(e.target) &&
+                    !mobileSearchInput.contains(e.target)) {
+                    suggestionsDiv.style.display = 'none';
+                }
+            });
+        });
+        const priceRange = document.getElementById('priceRange');
+        const maxPriceDisplay = document.getElementById('maxPriceDisplay');
+
+        priceRange.addEventListener('input', () => {
+            maxPriceDisplay.textContent = priceRange.value + ' ден.';
+        });
+        document.addEventListener('DOMContentLoaded', function () {
+            // Check if this is the first visit to the catalog page
+            if (!localStorage.getItem('catalogTourShown')) {
+                // Show the instruction modal after a short delay
+                setTimeout(showInstructionModal, 1000);
+
+                // Mark that the tour has been shown
+                localStorage.setItem('catalogTourShown', 'true');
+            }
+
+            // Close button handler
+            document.getElementById('closeInstruction')?.addEventListener('click', function () {
+                document.getElementById('instructionModal').style.display = 'none';
+            });
+        });
+
+        document.addEventListener('DOMContentLoaded', function () {
+            // Check if first visit
+            if (!localStorage.getItem('catalogTourShown')) {
+                setTimeout(showEnhancedTour, 1000);
+                localStorage.setItem('catalogTourShown', 'true');
+            }
+
+            // Close button
+            document.getElementById('closeInstruction')?.addEventListener('click', closeTour);
+            document.getElementById('gotItBtn')?.addEventListener('click', closeTour);
+
+            // Optional: Replay button
+            document.getElementById('showInstructionsAgain')?.addEventListener('click', showEnhancedTour);
+        });
+
+        function showEnhancedTour() {
+            const modal = document.getElementById('instructionModal');
+            const listArrow = document.getElementById('listArrow');
+            const navArrow = document.getElementById('navArrow');
+            const listSelector = document.getElementById('listSelector');
+            const navLists = document.querySelector('.user-actions .list-icon');
+            // In showEnhancedTour():
+            {#listArrow.style.left = '300px';  // Fixed test position#}
+            {#listArrow.style.top = '100px';#}
+            {#navArrow.style.left = '200px';#}
+            {#navArrow.style.top = '200px';#}
+
+            if (modal && listArrow && navArrow) {
+                // Position arrows
+                if (listSelector) {
+                    const listRect = listSelector.getBoundingClientRect();
+                    listArrow.style.left = `${listRect.left + listRect.width / 2 - 50}px`; // Adjust X position
+                    listArrow.style.top = `${listRect.top - 80}px`; // Adjust Y position
+                }
+
+                if (navLists) {
+                    const navRect = navLists.getBoundingClientRect();
+                    navArrow.style.left = `${navRect.left + navRect.width / 2 - 50}px`; // Adjust X position
+                    navArrow.style.top = `${navRect.bottom - 30}px`; // Adjust Y position
+                }
+
+                // Show modal and arrows
+                modal.style.display = 'flex';
+                setTimeout(() => {
+                    listArrow.style.opacity = '1';
+                    navArrow.style.opacity = '1';
+                }, 500);
+            }
+        }
+
+        function closeTour() {
+            const modal = document.getElementById('instructionModal');
+            if (modal) {
+                modal.style.animation = 'modalExit 0.3s forwards';
+                setTimeout(() => {
+                    modal.style.display = 'none';
+                }, 300);
+            }
+        }
+
+        document.getElementById('showInstructionsAgain')?.addEventListener('click', showInstructionModal);
+
+        // Add this script to your template
         function getCookie(name) {
             let cookieValue = null;
             if (document.cookie && document.cookie !== '') {
                 const cookies = document.cookie.split(';');
-                for (let i = 0; i < cookies.length; i++) {
-                    const cookie = cookies[i].trim();
-                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                for (let cookie of cookies) {
+                    cookie = cookie.trim();
+                    if (cookie.startsWith(name + '=')) {
                         cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                         break;
@@ -2931,273 +3184,61 @@
             return cookieValue;
         }
-    });
-    document.querySelectorAll('.add-to-list-btn').forEach(button => {
-        button.addEventListener('click', function () {
-            button.classList.remove('pulse-on-click'); // reset animation if applied
-            void button.offsetWidth; // force reflow so animation can be reapplied
-            button.classList.add('pulse-on-click');
-        });
-    });
-    {#// Add this to your existing JavaScript#}
-    {#document.addEventListener('DOMContentLoaded', function () {#}
-    {#    // Handle navbar search form submission#}
-    {#    const navbarSearchForm = document.querySelector('.header-search form');#}
-    {#    if (navbarSearchForm) {#}
-    {#        navbarSearchForm.addEventListener('submit', function (e) {#}
-    {#            const searchInput = this.querySelector('input[name="search"]');#}
-    {#            if (searchInput.value.trim() === '') {#}
-    {#                e.preventDefault(); // Prevent empty searches#}
-    {#            }#}
-    {#        });#}
-    {#    }#}
-
-    // Handle mobile search form submission
-    {#    const mobileSearchForm = document.querySelector('.mobile-search-form');#}
-    {#    if (mobileSearchForm) {#}
-    {#        mobileSearchForm.addEventListener('submit', function (e) {#}
-    {#            const searchInput = this.querySelector('input[name="search"]');#}
-    {#            if (searchInput.value.trim() === '') {#}
-    {#                e.preventDefault(); // Prevent empty searches#}
-    {#            }#}
-    {#        });#}
-    {#    }#}
-    {#{}#}
-    {#);#}
-
-    document.addEventListener('DOMContentLoaded', function () {
-        // Desktop search elements
-        const searchInput = document.getElementById('searchInput');
-        const suggestionsDiv = document.getElementById('suggestions');
-        const searchForm = document.getElementById('searchForm');
-
-        // Mobile search elements
-        const mobileSearchInput = document.getElementById('mobileSearchInput');
-        const mobileSearchForm = document.getElementById('mobileSearchForm');
-
-        // Extended transliteration with typo correction
-        function transliterateLatinToCyrillic(text) {
-            const map = {
-                'dzh': 'џ', 'dzs': 'џ', 'dsh': 'џ',
-                'zh': 'ж', 'ch': 'ч', 'sh': 'ш', 'lj': 'љ', 'nj': 'њ', 'kj': 'ќ', 'dj': 'ѓ',
-                'zs': 'ж', 'hs': 'ш', 'cx': 'ч', 'sx': 'ш', 'jx': 'ж',
-                'tz': 'ц', 'ts': 'ц', 'tc': 'ц', 'dz': 'џ',
-                'a': 'а', 'b': 'б', 'v': 'в', 'g': 'г', 'd': 'д', 'e': 'е', 'z': 'з', 'i': 'и',
-                'j': 'ј', 'k': 'к', 'l': 'л', 'm': 'м', 'n': 'н', 'o': 'о', 'p': 'п', 'r': 'р',
-                's': 'с', 't': 'т', 'u': 'у', 'f': 'ф', 'h': 'х', 'c': 'ц',
-                'y': 'ј', 'w': 'в', 'x': 'кс', 'q': 'к',
-                'ia': 'ја', 'ie': 'је', 'io': 'јо', 'iu': 'ју'
-            };
-
-            const typoPatterns = [
-                {pattern: /sampon/gi, replace: 'shampon'},
-                {pattern: /cresi/gi, replace: 'creshi'},
-                {pattern: /stipki/gi, replace: 'shtipki'},
-                {pattern: /sch/gi, replace: 'sh'},
-                {pattern: /ck/gi, replace: 'k'},
-                {pattern: /ph/gi, replace: 'f'},
-                {pattern: /th/gi, replace: 't'},
-                {pattern: /([a-z]),([a-z])/gi, replace: '$1$2'},
-                {pattern: /([a-z])\.([a-z])/gi, replace: '$1$2'},
-                {pattern: /([a-z])\1/gi, replace: '$1'}
-            ];
-
-            let normalizedText = text.toLowerCase();
-            for (const {pattern, replace} of typoPatterns) {
-                normalizedText = normalizedText.replace(pattern, replace);
-            }
-
-            let result = '';
-            let i = 0;
-            while (i < normalizedText.length) {
-                if (map[normalizedText.substring(i, i + 3)]) {
-                    result += map[normalizedText.substring(i, i + 3)];
-                    i += 3;
-                } else if (map[normalizedText.substring(i, i + 2)]) {
-                    result += map[normalizedText.substring(i, i + 2)];
-                    i += 2;
-                } else if (map[normalizedText[i]]) {
-                    result += map[normalizedText[i]];
-                    i++;
-                } else {
-                    result += normalizedText[i];
-                    i++;
-                }
-            }
-            return result;
+
+        function toggleFavorite(button, productId) {
+            fetch('/toggle-favorite/', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRFToken': getCookie('csrftoken')  // <-- Get CSRF from cookie
+                },
+                body: JSON.stringify({product_id: productId})
+            })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        // Update heart icon
+                        const icon = button.querySelector('i');
+                        icon.classList.toggle('far');
+                        icon.classList.toggle('fas');
+
+                        // Reload favorites list page to reflect changes
+                        if (window.location.pathname === '/favorites/') {
+                            window.location.reload();
+                        }
+                    } else {
+                        console.error('Failed to toggle favorite:', data.message);
+                    }
+                })
+                .catch(error => {
+                    console.error('Error toggling favorite:', error);
+                });
         }
 
-        function setupSearch(input, form) {
-            input.addEventListener('input', function () {
-                const query = this.value.trim();
-                if (query.length < 2) {
-                    suggestionsDiv.style.display = 'none';
-                    return;
-                }
-
-                fetch(`/search-suggestions/?q=${encodeURIComponent(query)}`)
-                    .then(response => response.json())
-                    .then(data => {
-                        suggestionsDiv.innerHTML = '';
-                        if (data.suggestions.length > 0) {
-                            data.suggestions.forEach(suggestion => {
-                                const div = document.createElement('div');
-                                div.textContent = suggestion;
-                                div.style.padding = '5px 10px';
-                                div.style.cursor = 'pointer';
-                                div.addEventListener('click', function () {
-                                    input.value = transliterateLatinToCyrillic(suggestion);
-                                    suggestionsDiv.style.display = 'none';
-                                    form.submit();
-                                });
-                                suggestionsDiv.appendChild(div);
-                            });
-                            suggestionsDiv.style.display = 'block';
-                        } else {
-                            suggestionsDiv.style.display = 'none';
-                        }
-                    });
-            });
-
-            input.addEventListener('keydown', function (e) {
-                if (e.key === 'Enter') {
-                    e.preventDefault();
-                    suggestionsDiv.style.display = 'none';
-                    input.value = transliterateLatinToCyrillic(input.value);
-                    form.submit();
-                }
-            });
-        }
-
-        setupSearch(searchInput, searchForm);
-        setupSearch(mobileSearchInput, mobileSearchForm);
-
-        document.addEventListener('click', function (e) {
-            if (!searchInput.contains(e.target) && !suggestionsDiv.contains(e.target) &&
-                !mobileSearchInput.contains(e.target)) {
-                suggestionsDiv.style.display = 'none';
-            }
-        });
-    });
-    const priceRange = document.getElementById('priceRange');
-    const maxPriceDisplay = document.getElementById('maxPriceDisplay');
-
-    priceRange.addEventListener('input', () => {
-        maxPriceDisplay.textContent = priceRange.value + ' ден.';
-    });
-    document.addEventListener('DOMContentLoaded', function () {
-        // Check if this is the first visit to the catalog page
-        if (!localStorage.getItem('catalogTourShown')) {
-            // Show the instruction modal after a short delay
-            setTimeout(showInstructionModal, 1000);
-
-            // Mark that the tour has been shown
-            localStorage.setItem('catalogTourShown', 'true');
-        }
-
-        // Close button handler
-        document.getElementById('closeInstruction')?.addEventListener('click', function () {
-            document.getElementById('instructionModal').style.display = 'none';
-        });
-    });
-
-    document.addEventListener('DOMContentLoaded', function () {
-        // Check if first visit
-        if (!localStorage.getItem('catalogTourShown')) {
-            setTimeout(showEnhancedTour, 1000);
-            localStorage.setItem('catalogTourShown', 'true');
-        }
-
-        // Close button
-        document.getElementById('closeInstruction')?.addEventListener('click', closeTour);
-        document.getElementById('gotItBtn')?.addEventListener('click', closeTour);
-
-        // Optional: Replay button
-        document.getElementById('showInstructionsAgain')?.addEventListener('click', showEnhancedTour);
-    });
-
-    function showEnhancedTour() {
-        const modal = document.getElementById('instructionModal');
-        const listArrow = document.getElementById('listArrow');
-        const navArrow = document.getElementById('navArrow');
-        const listSelector = document.getElementById('listSelector');
-        const navLists = document.querySelector('.user-actions .list-icon');
-        // In showEnhancedTour():
-        {#listArrow.style.left = '300px';  // Fixed test position#}
-        {#listArrow.style.top = '100px';#}
-        {#navArrow.style.left = '200px';#}
-        {#navArrow.style.top = '200px';#}
-
-        if (modal && listArrow && navArrow) {
-            // Position arrows
-            if (listSelector) {
-                const listRect = listSelector.getBoundingClientRect();
-                listArrow.style.left = `${listRect.left + listRect.width / 2 - 50}px`; // Adjust X position
-                listArrow.style.top = `${listRect.top - 80}px`; // Adjust Y position
-            }
-
-            if (navLists) {
-                const navRect = navLists.getBoundingClientRect();
-                navArrow.style.left = `${navRect.left + navRect.width / 2 - 50}px`; // Adjust X position
-                navArrow.style.top = `${navRect.bottom - 30}px`; // Adjust Y position
-            }
-
-            // Show modal and arrows
-            modal.style.display = 'flex';
-            setTimeout(() => {
-                listArrow.style.opacity = '1';
-                navArrow.style.opacity = '1';
-            }, 500);
-        }
-    }
-
-    function closeTour() {
-        const modal = document.getElementById('instructionModal');
-        if (modal) {
-            modal.style.animation = 'modalExit 0.3s forwards';
-            setTimeout(() => {
-                modal.style.display = 'none';
-            }, 300);
-        }
-    }
-
-    // Add to your existing CSS:
-    {#@keyframes#}
-    {#modalExit#}
-    {#{#}
-    {#    to#}
-    {#    {#}
-    {#        transform: scale(0.9);#}
-    {#        opacity: 0;#}
-    {#    }#}
-
-
-    document.getElementById('showInstructionsAgain')?.addEventListener('click', showInstructionModal);
-
-</script>
-<!-- Instruction Modal - Enhanced -->
-<div id="instructionModal" class="instruction-modal">
-    <div class="modal-content">
-        <div class="modal-header" style="border-radius: 7px;">
-            <h3>Како да ги користите листите?</h3>
-            <button id="closeInstruction" class="modal-close-btn">&times;</button>
+    </script>
+    <!-- Instruction Modal - Enhanced -->
+    <div id="instructionModal" class="instruction-modal">
+        <div class="modal-content">
+            <div class="modal-header" style="border-radius: 7px;">
+                <h3>Како да ги користите вашите листи?</h3>
+                <button id="closeInstruction" class="modal-close-btn">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div class="instruction-step">
+                    <div class="step-number">1</div>
+                    <p>Одберете ја листата од паѓачкото мени за да почнете.</p>
+                </div>
+                <div class="instruction-step">
+                    <div class="step-number">2</div>
+                    <p>Кликнете на копчето <strong>"Додај"</strong> за да го вметнете производот во избраната листа.</p>
+                </div>
+                <div class="instruction-step">
+                    <div class="step-number">3</div>
+                    <p>Вашите листи можете да ги најдете и управувате преку менито <strong>"Листи"</strong></p>
+                </div>
+            </div>
+            <button id="gotItBtn" class="modal-action-btn">Разбрав!</button>
         </div>
-        <div class="modal-body">
-            {#            <p>Како да користите листи:</p>#}
-            <div class="instruction-step">
-                <div class="step-number">1</div>
-                <p>Изберете листа од паѓачкото мени!</p>
-            </div>
-            <div class="instruction-step">
-                <div class="step-number">2</div>
-                <p>Кликнете на <strong>"Додај"</strong> за да го додадете производот во листа.</p>
-            </div>
-            <div class="instruction-step">
-                <div class="step-number">3</div>
-                <p>Пристапете ги вашите листи од менито <strong>"Мои листи"</strong><span
-                        class="hint-text">(горе десно)</span></p>
-            </div>
-        </div>
-        <button id="gotItBtn" class="modal-action-btn">Разбрав!</button>
     </div>
+
 
     <!-- Arrow pointing to list selector -->
@@ -3222,9 +3263,10 @@
 
 
-</div>
-<button id="showInstructionsAgain"
-        style="position: fixed; bottom: 20px; right: 20px; background: #2e652e; color: white; border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; font-size: 20px;">
-    ?
-</button>
-</body>
+    </div>
+    <button id="showInstructionsAgain"
+            style="position: fixed; bottom: 20px; right: 20px; background: #2e652e; color: white; border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; font-size: 20px;">
+        ?
+    </button>
+    </body>
+{% endblock %}
 </html>
Index: main/templates/main/register.html
===================================================================
--- main/templates/main/register.html	(revision fef3b4d766831b584534962ac137a311239ecc91)
+++ main/templates/main/register.html	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
@@ -1,179 +1,162 @@
 {% load static %}
 <!DOCTYPE html>
-<html lang="en">
+<html lang="mk">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Register</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-            height: 100vh;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background-image: url('{% static "images/baner1.jpg" %}');
-            background-size: cover;
-            background-position: center;
-            position: relative;
-        }
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Регистрација</title>
+<style>
+    body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+        height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-image: url('{% static "images/baner1.jpg" %}');
+        background-size: cover;
+        background-position: center;
+        position: relative;
+    }
 
-        body::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: inherit;
-            filter: blur(8px);
-            z-index: -1;
-        }
+    body::before {
+        content: '';
+        position: absolute;
+        top: 0; left: 0; right: 0; bottom: 0;
+        background: inherit;
+        filter: blur(8px);
+        z-index: -1;
+    }
 
-        .auth-container {
-            width: 100%;
-            max-width: 400px;
-            background-color: rgba(255, 255, 255, 0.9);
-            padding: 30px;
-            border-radius: 12px;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-            margin: 20px;
-        }
+    .auth-container {
+        width: 100%;
+        max-width: 400px;
+        background-color: rgba(255, 255, 255, 0.9);
+        padding: 30px;
+        border-radius: 12px;
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        margin: 20px;
+        box-sizing: border-box;
+    }
 
-        .auth-container h2 {
-            text-align: center;
-            margin-bottom: 25px;
-            color: #333;
-            font-size: 28px;
-        }
+    .auth-container h2 {
+        text-align: center;
+        margin-bottom: 25px;
+        color: #333;
+        font-size: 28px;
+    }
 
-        .form-group {
-            margin-bottom: 20px;
-        }
+    .form-group {
+        margin-bottom: 20px;
+    }
 
-        .form-group label {
-            display: block;
-            margin-bottom: 8px;
-            font-weight: bold;
-            color: #555;
-        }
+    .form-group label {
+        display: block;
+        margin-bottom: 8px;
+        font-weight: bold;
+        color: #555;
+    }
 
-        .form-group input {
-            width: 100%;
-            padding: 12px;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            font-size: 16px;
-            box-sizing: border-box;
-        }
+    .form-group input {
+        width: 100%;
+        padding: 12px;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        font-size: 16px;
+        box-sizing: border-box;
+        transition: border-color 0.3s;
+    }
+    .form-group input:focus {
+        border-color: #28a745;
+        outline: none;
+    }
 
-        button[type="submit"] {
-            width: 100%;
-            padding: 12px;
-            background-color: #28a745;
-            color: white;
-            border: none;
-            border-radius: 6px;
-            font-size: 16px;
-            cursor: pointer;
-            transition: background-color 0.3s;
-        }
+    button[type="submit"] {
+        width: 100%;
+        padding: 12px;
+        background-color: #28a745;
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-size: 16px;
+        cursor: pointer;
+        transition: background-color 0.3s;
+    }
 
-        button[type="submit"]:hover {
-            background-color: #218838;
-        }
+    button[type="submit"]:hover {
+        background-color: #218838;
+    }
 
-        .login-link {
-            text-align: center;
-            margin-top: 20px;
-        }
+    .login-link {
+        text-align: center;
+        margin-top: 20px;
+    }
 
-        .login-link a {
-            color: #007bff;
-            text-decoration: none;
-            transition: color 0.3s;
-        }
+    .login-link a {
+        color: #007bff;
+        text-decoration: none;
+        transition: color 0.3s;
+    }
 
-        .login-link a:hover {
-            color: #0056b3;
-            text-decoration: underline;
-        }
+    .login-link a:hover {
+        color: #0056b3;
+        text-decoration: underline;
+    }
 
-        .errorlist {
-            color: #dc3545;
-            margin-bottom: 15px;
-            padding-left: 20px;
-        }
+    .errorlist {
+        color: #dc3545;
+        margin-bottom: 15px;
+        padding-left: 20px;
+    }
 
-        .errorlist li {
-            list-style-type: none;
-            margin-bottom: 5px;
-        }
+    .errorlist li {
+        list-style-type: none;
+        margin-bottom: 5px;
+    }
 
-        /* Style form paragraphs to match form-group styling */
-        .auth-container p {
-            margin-bottom: 20px;
-        }
-
-        .auth-container p label {
-            display: block;
-            margin-bottom: 8px;
-            font-weight: bold;
-            color: #555;
-        }
-
-        .auth-container p input {
-            width: 100%;
-            padding: 12px;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            font-size: 16px;
-            box-sizing: border-box;
-        }
-
-        .auth-container p .helptext {
-            font-size: 12px;
-            color: #666;
-            display: block;
-            margin-top: 5px;
-        }
-    </style>
+    /* Help text styling */
+    .auth-container small.helptext {
+        font-size: 12px;
+        color: #666;
+        display: block;
+        margin-top: 5px;
+    }
+</style>
 </head>
 <body>
-    <div class="auth-container">
-        <h2>Register</h2>
-        
-        {% if form.errors %}
-        <ul class="errorlist">
-            {% for field, errors in form.errors.items %}
-                {% for error in errors %}
-                    <li>{{ error }}</li>
-                {% endfor %}
+<div class="auth-container">
+    <h2>Регистрација</h2>
+
+    {% if form.errors %}
+    <ul class="errorlist">
+        {% for field, errors in form.errors.items %}
+            {% for error in errors %}
+                <li>{{ error }}</li>
             {% endfor %}
-        </ul>
-        {% endif %}
-        
-        <form method="post">
-            {% csrf_token %}
-            
-            {% for field in form %}
-                <div class="form-group">
-                    {{ field.label_tag }}
-                    {{ field }}
-                    {% if field.help_text %}
-                        <small class="helptext">{{ field.help_text }}</small>
-                    {% endif %}
-                </div>
-            {% endfor %}
-            
-            <button type="submit">Register</button>
-            
-            <div class="login-link">
-                <a href="{% url 'login' %}">Already have an account? Login</a>
-            </div>
-        </form>
-    </div>
+        {% endfor %}
+    </ul>
+    {% endif %}
+
+    <form method="post" novalidate>
+        {% csrf_token %}
+
+        {% for field in form %}
+        <div class="form-group">
+            {{ field.label_tag }}
+            {{ field }}
+            {% if field.help_text %}
+                <small class="helptext">{{ field.help_text }}</small>
+            {% endif %}
+        </div>
+        {% endfor %}
+
+        <button type="submit">Регистрирај се</button>
+
+        <div class="login-link">
+            <a href="{% url 'login' %}">Веќе имате профил? Најави се</a>
+        </div>
+    </form>
+</div>
 </body>
 </html>
Index: main/templates/main/stats.html
===================================================================
--- main/templates/main/stats.html	(revision fef3b4d766831b584534962ac137a311239ecc91)
+++ main/templates/main/stats.html	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
@@ -1,497 +1,167 @@
+{% extends 'main/header.html' %}
 {% load static %}
 
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
-    <title>Статистика</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <style>
-        /* Common Styles */
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            flex-direction: column;
-            min-height: 100vh;
-            background-color: #f5f5f5;
-        }
-
-        /* Header */
-        .main-header {
-            background-color: white;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            position: sticky;
-            top: 0;
-            z-index: 1000;
-        }
-
-        .header-top {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px 20px;
-            border-bottom: 1px solid #e5e5e5;
-        }
-
-        .logo img {
-            height: 60px;
-        }
-
-        .header-search {
-            flex-grow: 1;
-            margin: 0 20px;
-            position: relative;
-        }
-
-        .header-search input {
-            width: 97%;
-            padding: 12px 20px;
-            border: 1px solid #ddd;
-            border-radius: 30px;
-            font-size: 16px;
-            background-color: #f5f5f5;
-        }
-
-        .header-search button {
-            position: absolute;
-            right: 15px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: none;
-            border: none;
-            color: #666;
-            cursor: pointer;
-            font-size: 18px;
-        }
-
-        .user-actions {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-
-        .user-actions a {
-            color: #333;
-            text-decoration: none;
-            font-size: 14px;
-            display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-
-        .user-actions a:hover {
-            color: #2e652e;
-        }
-
-        .logout-btn {
-            background-color: #2e652e;
-            color: white;
-            border: none;
-            padding: 8px 16px;
-            border-radius: 20px;
-            font-weight: 600;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-
-        .logout-btn:hover {
-            background-color: #1f3f1f;
-        }
-
-        /* Navigation */
-        .main-nav {
-            padding: 15px 30px;
-            background-color: #2e652e;
-        }
-
-        .main-nav ul {
-            display: flex;
-            list-style: none;
-            margin: 0;
-            padding: 0;
-        }
-
-        .main-nav li {
-            margin-right: 20px;
-        }
-
-        .main-nav a {
-            color: white;
-            text-decoration: none;
-            font-weight: 600;
-            padding: 5px 0;
-            position: relative;
-        }
-
-        .main-nav a:hover {
-            color: #fdd835;
-        }
-
-        .main-nav a::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 0;
-            height: 2px;
-            background-color: #fdd835;
-            transition: width 0.3s ease;
-        }
-
-        .main-nav a:hover::after {
-            width: 100%;
-        }
-
-        /* Stats Page Styles */
-        .stats-wrapper {
-            flex: 1;
-            padding: 20px;
-            background-color: #f9f9f9;
-        }
-
-        .stats-container {
-            max-width: 1200px;
-            margin: 20px auto;
-            background-color: white;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            padding: 30px;
-        }
-
-        .stats-main-title {
-            background: linear-gradient(135deg, #2e652e, #1f3f1f);
-            color: white;
-            padding: 15px;
-            border-radius: 8px;
-            text-align: center;
-            font-size: 24px;
-            font-weight: 600;
-            margin-bottom: 30px;
-        }
-
-        .back-button {
-            margin-bottom: 20px;
-        }
-
-        .back-button a {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 10px 20px;
-            background-color: #f5f5f5;
-            color: #2e652e;
-            border-radius: 30px;
-            text-decoration: none;
-            font-weight: 600;
-            transition: all 0.3s ease;
-        }
-
-        .back-button a:hover {
-            background-color: #e0e8e0;
-        }
-
-        .stats-form {
-            margin-bottom: 30px;
-        }
-
-        .form-row {
-            display: flex;
-            gap: 20px;
-            margin-bottom: 15px;
-        }
-
-        .form-group {
-            flex: 1;
-        }
-
-        .form-group label {
-            display: block;
-            margin-bottom: 8px;
-            font-weight: 500;
-            color: #2e652e;
-        }
-
-        .form-input {
-            width: 100%;
-            padding: 12px 15px;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            font-size: 16px;
-            background-color: #f9f9f9;
-            transition: all 0.3s ease;
-        }
-
-        .form-input:focus {
-            border-color: #2e652e;
-            outline: none;
-            box-shadow: 0 0 8px rgba(46, 101, 46, 0.2);
-        }
-
-        .form-actions {
-            text-align: center;
-            margin-top: 20px;
-        }
-
-        .action-button {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 12px 25px;
-            background-color: #2e652e;
-            color: white;
-            border: none;
-            border-radius: 30px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-
-        .action-button:hover {
-            background-color: #1f3f1f;
-            transform: translateY(-2px);
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        }
-
-        .product-choices {
-            margin: 30px 0;
-            padding: 20px;
-            background-color: #f9f9f9;
-            border-radius: 8px;
-        }
-
-        .product-choices h3 {
-            color: #2e652e;
-            font-size: 20px;
-            font-weight: 600;
-            margin-bottom: 15px;
-        }
-
-        .products-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-            gap: 15px;
-        }
-
-        .product-card {
-            background-color: white;
-            border-radius: 8px;
-            padding: 15px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            transition: all 0.3s ease;
-            border-left: 4px solid #81c784;
-        }
-
-        .product-card:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-        }
-
-        .product-card-link {
-            text-decoration: none;
-            color: inherit;
-        }
-
-        .product-title {
-            color: #2e652e;
-            margin: 0 0 10px 0;
-            font-size: 16px;
-            font-weight: 500;
-        }
-
-        .similarity-badge {
-            background-color: #e8f5e9;
-            color: #2e652e;
-            padding: 4px 10px;
-            border-radius: 12px;
-            font-size: 13px;
-            font-weight: 500;
-            display: inline-block;
-        }
-
-        .price-history {
-            margin: 40px 0;
-            padding: 20px;
-            background-color: white;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-
-        .price-history h3 {
-            color: #2e652e;
-            font-size: 20px;
-            font-weight: 600;
-            margin-bottom: 20px;
-        }
-
-        .no-results {
-            text-align: center;
-            padding: 30px;
-            background-color: #fff3e0;
-            border-radius: 8px;
-            color: #e65100;
-            border-left: 4px solid #e65100;
-        }
-
-        .no-results i {
-            font-size: 40px;
-            margin-bottom: 15px;
-            color: #e65100;
-        }
-
-        .no-results p {
-            margin: 5px 0;
-            font-size: 16px;
-        }
-
-        /* Mobile Menu */
-        #mobile-header {
-            display: none;
-            justify-content: space-between;
-            align-items: center;
-            padding: 15px 20px;
-            background: linear-gradient(135deg, #2e652e, #1f3f1f);
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-            z-index: 1001;
-            position: relative;
-        }
-
-        #mobile-logo img {
-            height: 50px;
-        }
-
-        .menu-toggle {
-            font-size: 28px;
-            color: white;
-            cursor: pointer;
-            transition: transform 0.3s ease;
-        }
-
-        .menu-toggle:hover {
-            transform: scale(1.1);
-        }
-
-        .mobile-menu {
-            position: fixed;
-            top: 0;
-            right: -100%;
-            width: 75%;
-            height: 100vh;
-            background: linear-gradient(135deg, #f0f7f0, #e0e8e0);
-            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
-            transition: right 0.3s ease;
-            padding: 20px;
-            z-index: 1002;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .mobile-menu.open {
-            right: 0;
-        }
-
-        .mobile-menu-header {
-            display: flex;
-            justify-content: flex-end;
-            margin-bottom: 20px;
-        }
-
-        .close-btn {
-            cursor: pointer;
-            font-size: 28px;
-            color: #2e652e;
-            transition: color 0.3s ease;
-        }
-
-        .close-btn:hover {
-            color: #1f3f1f;
-        }
-
-        .mobile-search-form {
-            display: flex;
-            align-items: center;
-            padding: 12px 16px;
-            gap: 10px;
-            background: white;
-            border-radius: 25px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            margin-bottom: 20px;
-        }
-
-        .mobile-search-form input {
-            flex: 1;
-            padding: 10px 15px;
-            border: none;
-            border-radius: 20px;
-            font-size: 14px;
-            outline: none;
-            background: #f5f5f5;
-        }
-
-        .mobile-search-form button {
-            background-color: #2e652e;
-            color: white;
-            border: none;
-            padding: 10px 15px;
-            border-radius: 50%;
-            font-size: 16px;
-            cursor: pointer;
-            transition: background-color 0.3s ease, transform 0.3s ease;
-        }
-
-        .mobile-search-form button:hover {
-            background-color: #1f3f1f;
-            transform: scale(1.1);
-        }
-
-        .mobile-nav {
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-        }
-
-        .mobile-nav a {
-            color: #2e652e;
-            text-decoration: none;
-            font-size: 18px;
-            padding: 10px 15px;
-            border-radius: 8px;
-            transition: background-color 0.3s ease, color 0.3s ease;
-        }
-
-        .mobile-nav a:hover {
-            background-color: #2e652e;
-            color: white;
-            transform: translateX(5px);
-        }
-
-        #overlay {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100vw;
-            height: 100vh;
-            background: rgba(0, 0, 0, 0.5);
-            z-index: 1000;
-        }
-
-        #overlay.active {
-            display: block;
-        }
-
-        /* Responsiveness */
-        @media (max-width: 768px) {
-            .main-header {
-                display: none;
-            }
-
-            #mobile-header {
+{% block content %}
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+        <title>Статистика</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+        <style>
+            /* Common Styles */
+            body {
+                font-family: Arial, sans-serif;
+                margin: 0;
+                padding: 0;
                 display: flex;
+                flex-direction: column;
+                min-height: 100vh;
+                background-color: #f5f5f5;
+            }
+
+            /* Stats Page Styles */
+            .stats-wrapper {
+                flex: 1;
+                padding: 20px;
+                background-color: #f9f9f9;
+            }
+
+            .stats-container {
+                max-width: 1200px;
+                margin: 20px auto;
+                background-color: white;
+                border-radius: 8px;
+                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+                padding: 30px;
+            }
+
+            .stats-main-title {
+                background: linear-gradient(135deg, #2e652e, #1f3f1f);
+                color: white;
+                padding: 15px;
+                border-radius: 8px;
+                text-align: center;
+                font-size: 24px;
+                font-weight: 600;
+                margin-bottom: 30px;
+            }
+
+            .back-button {
+                margin-bottom: 20px;
+            }
+
+            .back-button a {
+                display: inline-flex;
+                align-items: center;
+                gap: 8px;
+                padding: 10px 20px;
+                background-color: #f5f5f5;
+                color: #2e652e;
+                border-radius: 30px;
+                text-decoration: none;
+                font-weight: 600;
+                transition: all 0.3s ease;
+            }
+
+            .back-button a:hover {
+                background-color: #e0e8e0;
+            }
+
+            .stats-form {
+                margin-bottom: 30px;
+            }
+
+            .form-row {
+                display: flex;
+                gap: 20px;
+                margin-bottom: 15px;
+            }
+
+            .form-group {
+                flex: 1;
+            }
+
+            .form-group label {
+                display: block;
+                margin-bottom: 8px;
+                font-weight: 500;
+                color: #2e652e;
+            }
+
+            .form-input {
+                width: 100%;
+                padding: 12px 15px;
+                border: 1px solid #ddd;
+                border-radius: 6px;
+                font-size: 16px;
+                background-color: #f9f9f9;
+                transition: all 0.3s ease;
+            }
+
+            .form-input:focus {
+                border-color: #2e652e;
+                outline: none;
+                box-shadow: 0 0 8px rgba(46, 101, 46, 0.2);
+            }
+
+            .form-actions {
+                text-align: center;
+                margin-top: 20px;
+            }
+
+            .action-button {
+                display: inline-flex;
+                align-items: center;
+                gap: 8px;
+                padding: 12px 25px;
+                background-color: #2e652e;
+                color: white;
+                border: none;
+                border-radius: 30px;
+                font-weight: 600;
+                cursor: pointer;
+                transition: all 0.3s ease;
+            }
+
+            .action-button:hover {
+                background-color: #1f3f1f;
+                transform: translateY(-2px);
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            }
+
+            .product-choices h3 {
+                color: #2e652e;
+                font-size: 20px;
+                font-weight: 600;
+                margin-bottom: 15px;
+            }
+            .price-history h3 {
+                color: #2e652e;
+                font-size: 20px;
+                font-weight: 600;
+                margin-bottom: 20px;
+            }
+
+            .no-results {
+                text-align: center;
+                padding: 30px;
+                background-color: #fff3e0;
+                border-radius: 8px;
+                color: #e65100;
+                border-left: 4px solid #e65100;
+            }
+
+            .no-results i {
+                font-size: 40px;
+                margin-bottom: 15px;
+                color: #e65100;
+            }
+
+            .no-results p {
+                margin: 5px 0;
+                font-size: 16px;
             }
 
@@ -543,5 +213,5 @@
             /* Chart adjustments */
             .chart-container {
-            {#min-width: 100% !important;#}{#max-width: 100% !important;#} padding: 15px !important;
+            padding: 15px !important;
             }
 
@@ -558,436 +228,341 @@
                 font-size: 30px !important;
             }
-        }
-
-        @media (max-width: 480px) {
-            .stats-main-title {
-                font-size: 20px;
-                padding: 12px;
-            }
-
-            .back-button a {
-                padding: 8px 15px;
-                font-size: 14px;
-            }
-
-            .action-button {
-                padding: 10px 20px;
-                font-size: 14px;
-            }
-
-            /* Further reduce product item sizes */
-            .product-item img {
-                width: 35px !important;
-                height: 35px !important;
-            }
-
-            .product-item a {
-                font-size: 13px !important;
-            }
-
-            .product-item div {
-                font-size: 9px !important;
-            }
-
-            /* Further reduce chart padding */
-            .chart-container {
-                padding: 10px !important;
-            }
-        }
-
-        {#/* Scrollbar for product list */#}
-        {#.products-scrollable {#}
-        {#    overflow-y: auto;#}
-        {#    max-height: 600px;#}
-        {#{#}
-        #}#}
-        {##}
-        {#.products-scrollable::-webkit-scrollbar {#}
-        {#    width: 8px;#}
-        {#{#}
-        #}#}
-        {##}
-        {#.products-scrollable::-webkit-scrollbar-thumb {#}
-        {#    background-color: #2e652e;#}
-        {#    border-radius: 4px;#}
-        {#{#}
-        #}#}
-
-    </style>
-</head>
-<body>
-
-<!-- Header -->
-<header class="main-header">
-    <div class="header-top">
-        <div class="logo">
-            <a href="{% url 'home' %}"><img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого"/></a>
-        </div>
-        <div class="header-search">
-            <form method="GET" action="{% url 'product_list' %}" id="searchForm">
-                <input type="text" name="search" id="searchInput" placeholder="Пребарај производи..."
-                       value="{{ request.GET.search }}">
-                <button type="submit"><i class="fas fa-search"></i></button>
+
+            @media (max-width: 480px) {
+                .stats-main-title {
+                    font-size: 20px;
+                    padding: 12px;
+                }
+
+                .back-button a {
+                    padding: 8px 15px;
+                    font-size: 14px;
+                }
+
+                .action-button {
+                    padding: 10px 20px;
+                    font-size: 14px;
+                }
+
+                /* Further reduce product item sizes */
+                .product-item img {
+                    width: 35px !important;
+                    height: 35px !important;
+                }
+
+                .product-item a {
+                    font-size: 13px !important;
+                }
+
+                .product-item div {
+                    font-size: 9px !important;
+                }
+
+                /* Further reduce chart padding */
+                .chart-container {
+                    padding: 10px !important;
+                }
+            }
+        </style>
+    </head>
+    <body>
+
+    <!-- Stats Content -->
+    <div class="stats-wrapper">
+        <div class="stats-container">
+            <div class="back-button">
+                <a href="{% url 'home' %}" class="action-button">
+                    <i class="fas fa-arrow-left"></i> Назад
+                </a>
+            </div>
+
+            <h1 class="stats-main-title">Ценовна историја</h1>
+
+            <form method="get" class="stats-form">
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="store-select">Продавница:</label>
+                        <select name="store" id="store-select" required class="form-input">
+                            <option value="">Избери продавница...</option>
+                            <option value="Vero" {% if store == "Vero" %}selected{% endif %}>Vero</option>
+                            <option value="Ramstore" {% if store == "Ramstore" %}selected{% endif %}>Ramstore</option>
+                            <option value="Reptil" {% if store == "Reptil" %}selected{% endif %}>Reptil</option>
+                            <option value="Zito" {% if store == "Zito" %}selected{% endif %}>Zito</option>
+                        </select>
+                    </div>
+                    <div class="form-group" style="width: 93%">
+                        <label for="product-input">Продукт:</label>
+                        <input type="text" id="product-input" name="query" placeholder="напр. ВОДА" required
+                               value="{{ query|default:'' }}" class="form-input">
+                    </div>
+                </div>
+                <div class="form-row">
+                    <div class="form-group" style="width: 93%">
+                        <label for="start-date">Од датум:</label>
+                        <input type="date" id="start-date" name="start_date" class="form-input"
+                               value="{{ start_date|default:'' }}">
+                    </div>
+                    <div class="form-group" style="width: 93%">
+                        <label for="end-date">До датум:</label>
+                        <input type="date" id="end-date" name="end_date" class="form-input"
+                               value="{{ end_date|default:'' }}">
+                    </div>
+                </div>
+                <div class="form-actions">
+                    <button type="submit" class="action-button">
+                        <i class="fas fa-chart-line"></i> Прикажи историја
+                    </button>
+                </div>
             </form>
-        </div>
-        <div class="user-actions">
-            {% if user.is_authenticated %}
-                <form method="post" action="{% url 'logout' %}" class="auth-form">
-                    {% csrf_token %}
-                    <button type="submit" class="auth-btn logout"
-                            style="background-color: rgba(43,86,43,0.93); color: white; padding: 8px 16px; border-radius: 20px">
-                        <b><i class="fas fa-sign-out-alt"></i> Одјави се </b>
-                    </button>
-                </form>
-            {% else %}
-                <a href="{% url 'login' %}" class="auth-btn">
-                    <i class="fas fa-user"></i> Најави се
-                </a>
-                <a href="{% url 'register' %}" class="auth-btn">
-                    <i class="fas fa-user-plus"></i> Регистрирај се
-                </a>
+
+            {% if similar_products and not exact_match %}
+                <!-- New flex container for products and chart -->
+                <div style="display: flex; gap: 30px;" class="flex-container">
+
+                    <!-- Left: Products List -->
+                    <div style="flex: 1; max-width: 400px; overflow-y: auto; max-height: 600px; border: 1px solid #ddd; border-radius: 8px; padding: 10px; background: #fff;"
+                         class="products-list">
+                        <h3 style="color:#2e652e; margin-bottom: 15px;">Слични производи во {{ store }}:</h3>
+                        <div>
+                            {% for product, similarity in similar_products %}
+                                <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px;"
+                                     class="product-item">
+                                    <!-- Example product image, adapt src as needed -->
+                                    {#                                <img src="{{product.image_url}}" alt="{{ product }}"#}
+                                    {#                                     style="width: 60px; height: 60px; object-fit: contain; border-radius: 6px; border: 1px solid #ccc;">#}
+                                    <div style="flex-grow: 1;">
+                                        <a href="?store={{ store|urlencode }}&query={{ query|urlencode }}&selected_product={{ product|urlencode }}"
+                                           style="color: #2e652e; font-weight: 600; text-decoration: none;">
+                                            {{ product }}
+                                        </a>
+                                        <div style="font-size: 12px; color: #666;">
+                                            {#                                        {{ similarity|floatformat:2 }} сличност#}
+                                        </div>
+                                    </div>
+                                </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+
+                    <!-- Right: Chart -->
+                    <div style="flex: 2; background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.1);"
+                         class="chart-container" style="width: 93%">
+                        {% if matched_name %}
+                            <h3 style="color:#2e652e; margin-bottom: 15px;">Ценовна историја за {{ matched_name }}
+                                во {{ store }}</h3>
+                            <canvas id="priceChart"></canvas>
+                        {% else %}
+                            <div style="padding: 50px; text-align: center; color: #e65100; border: 1px solid #e65100; border-radius: 8px;"
+                                 class="no-results">
+                                <i class="fas fa-exclamation-circle" style="font-size: 40px; margin-bottom: 15px;"></i>
+                                <p>Не се пронајдени производи за "{{ query }}" во {{ store }}.</p>
+                                <p>Обидете се со различни термини или проверете го пишувањето.</p>
+                            </div>
+                        {% endif %}
+                    </div>
+
+                </div>
             {% endif %}
+
         </div>
     </div>
-    <nav class="main-nav">
-        <ul>
-            <li><a href="{% url 'product_list' %}">Каталог</a></li>
-            <li><a href="{% url 'stats' %}">Статистика</a></li>
-        </ul>
-    </nav>
-</header>
-
-<!-- Mobile Menu -->
-<div id="mobile-header">
-    <div id="mobile-logo">
-        <img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого">
-    </div>
-    <div class="menu-toggle" onclick="toggleMobileMenu()">☰</div>
-</div>
-
-<!-- Mobile Menu -->
-<div id="mobile-menu" class="mobile-menu">
-    <div class="mobile-menu-header">
-        <span class="close-btn" onclick="toggleMobileMenu()">×</span>
-    </div>
-
-    <form method="GET" action="{% url 'product_list' %}" class="mobile-search-form" id="mobileSearchForm">
-        <input type="text" name="search" id="mobileSearchInput" placeholder="Пребарај производ..."
-               value="{{ request.GET.search }}">
-        <button type="submit"><i class="fas fa-search"></i></button>
-    </form>
-
-    <nav class="mobile-nav">
-        <a href="{% url 'home' %}">Дома</a>
-        <a href="{% url 'product_list' %}">Каталог</a>
-        <a href="{% url 'stats' %}">Статистика</a>
-        <a href="{% url 'view_lists' %}">Листи</a>
-
-        {% if user.is_authenticated %}
-            <a href="{% url 'logout' %}">Одјави се</a>
-        {% else %}
-            <a href="{% url 'login' %}">Најави се</a>
-            <a href="{% url 'register' %}">Регистрирај се</a>
-        {% endif %}
-    </nav>
-</div>
-<div id="overlay" onclick="toggleMobileMenu()"></div>
-
-<!-- Stats Content -->
-<div class="stats-wrapper">
-    <div class="stats-container">
-        <div class="back-button">
-            <a href="{% url 'home' %}" class="action-button">
-                <i class="fas fa-arrow-left"></i> Назад
-            </a>
-        </div>
-
-        <h1 class="stats-main-title">Ценовна историја</h1>
-
-        <form method="get" class="stats-form">
-            <div class="form-row">
-                <div class="form-group">
-                    <label for="store-select">Продавница:</label>
-                    <select name="store" id="store-select" required class="form-input">
-                        <option value="">Избери продавница...</option>
-                        <option value="Vero" {% if store == "Vero" %}selected{% endif %}>Vero</option>
-                        <option value="Ramstore" {% if store == "Ramstore" %}selected{% endif %}>Ramstore</option>
-                        <option value="Reptil" {% if store == "Reptil" %}selected{% endif %}>Reptil</option>
-                        <option value="Zito" {% if store == "Zito" %}selected{% endif %}>Zito</option>
-                    </select>
-                </div>
-                <div class="form-group" style="width: 93%">
-                    <label for="product-input">Продукт:</label>
-                    <input type="text" id="product-input" name="query" placeholder="напр. ВОДА" required
-                           value="{{ query|default:'' }}" class="form-input">
-                </div>
-            </div>
-            <div class="form-row">
-                <div class="form-group" style="width: 93%">
-                    <label for="start-date">Од датум:</label>
-                    <input type="date" id="start-date" name="start_date" class="form-input"
-                           value="{{ start_date|default:'' }}">
-                </div>
-                <div class="form-group" style="width: 93%">
-                    <label for="end-date">До датум:</label>
-                    <input type="date" id="end-date" name="end_date" class="form-input"
-                           value="{{ end_date|default:'' }}">
-                </div>
-            </div>
-            <div class="form-actions">
-                <button type="submit" class="action-button">
-                    <i class="fas fa-chart-line"></i> Прикажи историја
-                </button>
-            </div>
-        </form>
-
-        {% if similar_products and not exact_match %}
-            <!-- New flex container for products and chart -->
-            <div style="display: flex; gap: 30px;" class="flex-container">
-
-                <!-- Left: Products List -->
-                <div style="flex: 1; max-width: 400px; overflow-y: auto; max-height: 600px; border: 1px solid #ddd; border-radius: 8px; padding: 10px; background: #fff;"
-                     class="products-list">
-                    <h3 style="color:#2e652e; margin-bottom: 15px;">Слични производи во {{ store }}:</h3>
-                    <div>
-                        {% for product, similarity in similar_products %}
-                            <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px;"
-                                 class="product-item">
-                                <!-- Example product image, adapt src as needed -->
-                                {#                                <img src="{{product.image_url}}" alt="{{ product }}"#}
-                                {#                                     style="width: 60px; height: 60px; object-fit: contain; border-radius: 6px; border: 1px solid #ccc;">#}
-                                <div style="flex-grow: 1;">
-                                    <a href="?store={{ store|urlencode }}&query={{ query|urlencode }}&selected_product={{ product|urlencode }}"
-                                       style="color: #2e652e; font-weight: 600; text-decoration: none;">
-                                        {{ product }}
-                                    </a>
-                                    <div style="font-size: 12px; color: #666;">
-                                        {#                                        {{ similarity|floatformat:2 }} сличност#}
-                                    </div>
-                                </div>
-                            </div>
-                        {% endfor %}
-                    </div>
-                </div>
-
-                <!-- Right: Chart -->
-                <div style="flex: 2; background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.1);"
-                     class="chart-container" style="width: 93%">
-                    {% if matched_name %}
-                        <h3 style="color:#2e652e; margin-bottom: 15px;">Ценовна историја за {{ matched_name }}
-                            во {{ store }}</h3>
-                        <canvas id="priceChart"></canvas>
-                    {% else %}
-                        <div style="padding: 50px; text-align: center; color: #e65100; border: 1px solid #e65100; border-radius: 8px;"
-                             class="no-results">
-                            <i class="fas fa-exclamation-circle" style="font-size: 40px; margin-bottom: 15px;"></i>
-                            <p>Не се пронајдени производи за "{{ query }}" во {{ store }}.</p>
-                            <p>Обидете се со различни термини или проверете го пишувањето.</p>
-                        </div>
-                    {% endif %}
-                </div>
-
-            </div>
-        {% endif %}
-
-    </div>
-</div>
-
-
-<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-<script>
-    {% if chart_data %}
-        const ctx = document.getElementById('priceChart').getContext('2d');
-
-        const labels = [
-            {% for item in chart_data %}
-                "{{ item.date|date:'d.m.Y' }}"{% if not forloop.last %},{% endif %}
-            {% endfor %}
-        ];
-
-        const prices = [
-            {% for item in chart_data %}
-                {{ item.price }}{% if not forloop.last %},{% endif %}
-            {% endfor %}
-        ];
-
-        new Chart(ctx, {
-            type: 'line',
-            data: {
-                labels: labels,
-                datasets: [{
-                    label: 'Цена (МКД) {{ start_date }} до {{ end_date }}',
-                    data: prices,
-                    borderColor: '#2e652e',
-                    backgroundColor: 'rgba(46, 101, 46, 0.1)',
-                    borderWidth: 2,
-                    tension: 0.1,
-                    fill: true
-                }]
-            },
-            options: {
-                responsive: true,
-                scales: {
-                    y: {
-                        beginAtZero: false,
-                        grid: {
-                            color: 'rgba(0, 0, 0, 0.05)'
+
+
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script>
+        {% if chart_data %}
+            const ctx = document.getElementById('priceChart').getContext('2d');
+
+            const labels = [
+                {% for item in chart_data %}
+                    "{{ item.date|date:'d.m.Y' }}"{% if not forloop.last %},{% endif %}
+                {% endfor %}
+            ];
+
+            const prices = [
+                {% for item in chart_data %}
+                    {{ item.price }}{% if not forloop.last %},{% endif %}
+                {% endfor %}
+            ];
+
+            new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: 'Цена (МКД) {{ start_date }} до {{ end_date }}',
+                        data: prices,
+                        borderColor: '#2e652e',
+                        backgroundColor: 'rgba(46, 101, 46, 0.1)',
+                        borderWidth: 2,
+                        tension: 0.1,
+                        fill: true
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    scales: {
+                        y: {
+                            beginAtZero: false,
+                            grid: {
+                                color: 'rgba(0, 0, 0, 0.05)'
+                            },
+                            ticks: {
+                                color: '#333'
+                            }
                         },
-                        ticks: {
-                            color: '#333'
+                        x: {
+                            grid: {
+                                color: 'rgba(0, 0, 0, 0.05)'
+                            },
+                            ticks: {
+                                color: '#333'
+                            }
                         }
                     },
-                    x: {
-                        grid: {
-                            color: 'rgba(0, 0, 0, 0.05)'
-                        },
-                        ticks: {
-                            color: '#333'
+                    plugins: {
+                        legend: {
+                            labels: {
+                                color: '#2e652e'
+                            }
                         }
                     }
-                },
-                plugins: {
-                    legend: {
-                        labels: {
-                            color: '#2e652e'
-                        }
+                }
+            });
+        {% endif %}
+
+        document.querySelector('.stats-form').addEventListener('submit', function (e) {
+            const startDate = document.getElementById('start-date').value;
+            const endDate = document.getElementById('end-date').value;
+
+            if (startDate && endDate && startDate > endDate) {
+                alert('Крајниот датум мора да биде после почетниот датум.');
+                e.preventDefault();
+            }
+        });
+
+        function toggleMobileMenu() {
+            const menu = document.getElementById("mobile-menu");
+            const overlay = document.getElementById("overlay");
+            menu.classList.toggle("open");
+            overlay.classList.toggle("active");
+        }
+
+        document.addEventListener('DOMContentLoaded', function () {
+            // Desktop search elements
+            const searchInput = document.getElementById('searchInput');
+            const suggestionsDiv = document.getElementById('suggestions');
+            const searchForm = document.getElementById('searchForm');
+
+            // Mobile search elements
+            const mobileSearchInput = document.getElementById('mobileSearchInput');
+            const mobileSearchForm = document.getElementById('mobileSearchForm');
+
+            // Extended transliteration with typo correction
+            function transliterateLatinToCyrillic(text) {
+                const map = {
+                    'dzh': 'џ', 'dzs': 'џ', 'dsh': 'џ',
+                    'zh': 'ж', 'ch': 'ч', 'sh': 'ш', 'lj': 'љ', 'nj': 'њ', 'kj': 'ќ', 'dj': 'ѓ',
+                    'zs': 'ж', 'hs': 'ш', 'cx': 'ч', 'sx': 'ш', 'jx': 'ж',
+                    'tz': 'ц', 'ts': 'ц', 'tc': 'ц', 'dz': 'џ',
+                    'a': 'а', 'b': 'б', 'v': 'в', 'g': 'г', 'd': 'д', 'e': 'е', 'z': 'з', 'i': 'и',
+                    'j': 'ј', 'k': 'к', 'l': 'л', 'm': 'м', 'n': 'н', 'o': 'о', 'p': 'п', 'r': 'р',
+                    's': 'с', 't': 'т', 'u': 'у', 'f': 'ф', 'h': 'х', 'c': 'ц',
+                    'y': 'ј', 'w': 'в', 'x': 'кс', 'q': 'к',
+                    'ia': 'ја', 'ie': 'је', 'io': 'јо', 'iu': 'ју'
+                };
+
+                const typoPatterns = [
+                    {pattern: /sampon/gi, replace: 'shampon'},
+                    {pattern: /cresi/gi, replace: 'creshi'},
+                    {pattern: /stipki/gi, replace: 'shtipki'},
+                    {pattern: /sch/gi, replace: 'sh'},
+                    {pattern: /ck/gi, replace: 'k'},
+                    {pattern: /ph/gi, replace: 'f'},
+                    {pattern: /th/gi, replace: 't'},
+                    {pattern: /([a-z]),([a-z])/gi, replace: '$1$2'},
+                    {pattern: /([a-z])\.([a-z])/gi, replace: '$1$2'},
+                    {pattern: /([a-z])\1/gi, replace: '$1'}
+                ];
+
+                let normalizedText = text.toLowerCase();
+                for (const {pattern, replace} of typoPatterns) {
+                    normalizedText = normalizedText.replace(pattern, replace);
+                }
+
+                let result = '';
+                let i = 0;
+                while (i < normalizedText.length) {
+                    if (map[normalizedText.substring(i, i + 3)]) {
+                        result += map[normalizedText.substring(i, i + 3)];
+                        i += 3;
+                    } else if (map[normalizedText.substring(i, i + 2)]) {
+                        result += map[normalizedText.substring(i, i + 2)];
+                        i += 2;
+                    } else if (map[normalizedText[i]]) {
+                        result += map[normalizedText[i]];
+                        i++;
+                    } else {
+                        result += normalizedText[i];
+                        i++;
                     }
                 }
-            }
+                return result;
+            }
+
+            function setupSearch(input, form) {
+                input.addEventListener('input', function () {
+                    const query = this.value.trim();
+                    if (query.length < 2) {
+                        suggestionsDiv.style.display = 'none';
+                        return;
+                    }
+
+                    fetch(`/search-suggestions/?q=${encodeURIComponent(query)}`)
+                        .then(response => response.json())
+                        .then(data => {
+                            suggestionsDiv.innerHTML = '';
+                            if (data.suggestions.length > 0) {
+                                data.suggestions.forEach(suggestion => {
+                                    const div = document.createElement('div');
+                                    div.textContent = suggestion;
+                                    div.style.padding = '5px 10px';
+                                    div.style.cursor = 'pointer';
+                                    div.addEventListener('click', function () {
+                                        input.value = transliterateLatinToCyrillic(suggestion);
+                                        suggestionsDiv.style.display = 'none';
+                                        form.submit();
+                                    });
+                                    suggestionsDiv.appendChild(div);
+                                });
+                                suggestionsDiv.style.display = 'block';
+                            } else {
+                                suggestionsDiv.style.display = 'none';
+                            }
+                        });
+                });
+
+                input.addEventListener('keydown', function (e) {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        suggestionsDiv.style.display = 'none';
+                        input.value = transliterateLatinToCyrillic(input.value);
+                        form.submit();
+                    }
+                });
+            }
+
+            setupSearch(searchInput, searchForm);
+            setupSearch(mobileSearchInput, mobileSearchForm);
+
+            document.addEventListener('click', function (e) {
+                if (!searchInput.contains(e.target) && !suggestionsDiv.contains(e.target) &&
+                    !mobileSearchInput.contains(e.target)) {
+                    suggestionsDiv.style.display = 'none';
+                }
+            });
         });
-    {% endif %}
-
-    document.querySelector('.stats-form').addEventListener('submit', function (e) {
-        const startDate = document.getElementById('start-date').value;
-        const endDate = document.getElementById('end-date').value;
-
-        if (startDate && endDate && startDate > endDate) {
-            alert('Крајниот датум мора да биде после почетниот датум.');
-            e.preventDefault();
-        }
-    });
-
-    function toggleMobileMenu() {
-        const menu = document.getElementById("mobile-menu");
-        const overlay = document.getElementById("overlay");
-        menu.classList.toggle("open");
-        overlay.classList.toggle("active");
-    }
-
-    document.addEventListener('DOMContentLoaded', function () {
-        // Desktop search elements
-        const searchInput = document.getElementById('searchInput');
-        const suggestionsDiv = document.getElementById('suggestions');
-        const searchForm = document.getElementById('searchForm');
-
-        // Mobile search elements
-        const mobileSearchInput = document.getElementById('mobileSearchInput');
-        const mobileSearchForm = document.getElementById('mobileSearchForm');
-
-        // Extended transliteration with typo correction
-        function transliterateLatinToCyrillic(text) {
-            const map = {
-                'dzh': 'џ', 'dzs': 'џ', 'dsh': 'џ',
-                'zh': 'ж', 'ch': 'ч', 'sh': 'ш', 'lj': 'љ', 'nj': 'њ', 'kj': 'ќ', 'dj': 'ѓ',
-                'zs': 'ж', 'hs': 'ш', 'cx': 'ч', 'sx': 'ш', 'jx': 'ж',
-                'tz': 'ц', 'ts': 'ц', 'tc': 'ц', 'dz': 'џ',
-                'a': 'а', 'b': 'б', 'v': 'в', 'g': 'г', 'd': 'д', 'e': 'е', 'z': 'з', 'i': 'и',
-                'j': 'ј', 'k': 'к', 'l': 'л', 'm': 'м', 'n': 'н', 'o': 'о', 'p': 'п', 'r': 'р',
-                's': 'с', 't': 'т', 'u': 'у', 'f': 'ф', 'h': 'х', 'c': 'ц',
-                'y': 'ј', 'w': 'в', 'x': 'кс', 'q': 'к',
-                'ia': 'ја', 'ie': 'је', 'io': 'јо', 'iu': 'ју'
-            };
-
-            const typoPatterns = [
-                {pattern: /sampon/gi, replace: 'shampon'},
-                {pattern: /cresi/gi, replace: 'creshi'},
-                {pattern: /stipki/gi, replace: 'shtipki'},
-                {pattern: /sch/gi, replace: 'sh'},
-                {pattern: /ck/gi, replace: 'k'},
-                {pattern: /ph/gi, replace: 'f'},
-                {pattern: /th/gi, replace: 't'},
-                {pattern: /([a-z]),([a-z])/gi, replace: '$1$2'},
-                {pattern: /([a-z])\.([a-z])/gi, replace: '$1$2'},
-                {pattern: /([a-z])\1/gi, replace: '$1'}
-            ];
-
-            let normalizedText = text.toLowerCase();
-            for (const {pattern, replace} of typoPatterns) {
-                normalizedText = normalizedText.replace(pattern, replace);
-            }
-
-            let result = '';
-            let i = 0;
-            while (i < normalizedText.length) {
-                if (map[normalizedText.substring(i, i + 3)]) {
-                    result += map[normalizedText.substring(i, i + 3)];
-                    i += 3;
-                } else if (map[normalizedText.substring(i, i + 2)]) {
-                    result += map[normalizedText.substring(i, i + 2)];
-                    i += 2;
-                } else if (map[normalizedText[i]]) {
-                    result += map[normalizedText[i]];
-                    i++;
-                } else {
-                    result += normalizedText[i];
-                    i++;
-                }
-            }
-            return result;
-        }
-
-        function setupSearch(input, form) {
-            input.addEventListener('input', function () {
-                const query = this.value.trim();
-                if (query.length < 2) {
-                    suggestionsDiv.style.display = 'none';
-                    return;
-                }
-
-                fetch(`/search-suggestions/?q=${encodeURIComponent(query)}`)
-                    .then(response => response.json())
-                    .then(data => {
-                        suggestionsDiv.innerHTML = '';
-                        if (data.suggestions.length > 0) {
-                            data.suggestions.forEach(suggestion => {
-                                const div = document.createElement('div');
-                                div.textContent = suggestion;
-                                div.style.padding = '5px 10px';
-                                div.style.cursor = 'pointer';
-                                div.addEventListener('click', function () {
-                                    input.value = transliterateLatinToCyrillic(suggestion);
-                                    suggestionsDiv.style.display = 'none';
-                                    form.submit();
-                                });
-                                suggestionsDiv.appendChild(div);
-                            });
-                            suggestionsDiv.style.display = 'block';
-                        } else {
-                            suggestionsDiv.style.display = 'none';
-                        }
-                    });
-            });
-
-            input.addEventListener('keydown', function (e) {
-                if (e.key === 'Enter') {
-                    e.preventDefault();
-                    suggestionsDiv.style.display = 'none';
-                    input.value = transliterateLatinToCyrillic(input.value);
-                    form.submit();
-                }
-            });
-        }
-
-        setupSearch(searchInput, searchForm);
-        setupSearch(mobileSearchInput, mobileSearchForm);
-
-        document.addEventListener('click', function (e) {
-            if (!searchInput.contains(e.target) && !suggestionsDiv.contains(e.target) &&
-                !mobileSearchInput.contains(e.target)) {
-                suggestionsDiv.style.display = 'none';
-            }
-        });
-    });
-</script>
-</body>
+    </script>
+    </body>
+{% endblock %}
 </html>
Index: main/urls.py
===================================================================
--- main/urls.py	(revision fef3b4d766831b584534962ac137a311239ecc91)
+++ main/urls.py	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
@@ -39,5 +39,7 @@
     path('search-suggestions/', views.search_suggestions, name='search_suggestions'),
 
-    # django-allauth urls:
+    path('header/', views.header, name='header'),
+    path('toggle-favorite/', views.toggle_favorite, name='toggle_favorite'),
+    path('favorites/', views.favorites_list, name='favorites_list'),
 
 
Index: main/utils/similarity.py
===================================================================
--- main/utils/similarity.py	(revision fef3b4d766831b584534962ac137a311239ecc91)
+++ main/utils/similarity.py	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
@@ -51,5 +51,5 @@
 # Define unimportant words to ignore in matching
 STOPWORDS = {
-    "парче", "свежо", "парчиња", "грам", "г.", "ком", "комад", "број", "бр", "парчиња"
+    "парче", "свежо", "парчиња", "грам", "г.", "ком", "комад", "број", "бр", "парчиња", "(Р)",
 }
 
@@ -59,15 +59,20 @@
     products = get_all_products()
 
-    # Step 1: Filter products by category only
+    # Step 1: Find the store of the original product
+    current_product_store = None
+    for p in products:
+        if p['name'] == product_name and p['category'] == product_category:
+            current_product_store = p.get('store')
+            break
+
+    # Step 2: Filter products in the same category and different name
     filtered_products = [p for p in products if p['category'] == product_category and p['name'] != product_name]
 
-    # Step 2: Build keyword frequency across products in this category
+    # Step 3: Build keyword frequency across products in this category
     all_keywords = []
     for p in filtered_products:
         all_keywords += tokenize(p['name'])
-
     keyword_freq = Counter(all_keywords)
 
-    # Step 3: Tokenize the query
     query_keywords = set(tokenize(product_name))
 
@@ -82,17 +87,13 @@
                 continue  # skip if no overlap
 
-            # Base keyword score based on frequency in dataset
             keyword_score = sum(keyword_freq[k] for k in common_keywords)
 
-            # Boost score if 2+ strong matches
             bonus = 0
             if len(common_keywords) >= 2:
                 bonus += 5
-
-            # Extra bonus for important matches
             for word in common_keywords:
                 if word in ['пиво', 'вино', 'ракија', 'сок', 'млеко', 'кромид', 'јаболко']:
                     bonus += 10
-                elif re.match(r'\d+(\.\d+)?л', word):  # match like 1л, 0.5л
+                elif re.match(r'\d+(\.\d+)?л', word):
                     bonus += 5
 
@@ -102,5 +103,12 @@
             sim = cosine_similarity(query_embedding, embedding)[0][0]
 
-            total_score = keyword_score + bonus + (sim * 5)
+            # 🆕 Store bonus/penalty
+            store_bonus = 0
+            if p.get('store') != current_product_store:
+                store_bonus += 10  # prioritize different stores
+            else:
+                store_bonus -= 5  # slightly penalize same-store products
+
+            total_score = keyword_score + bonus + (sim * 5) + store_bonus
 
             results.append({
Index: main/views.py
===================================================================
--- main/views.py	(revision fef3b4d766831b584534962ac137a311239ecc91)
+++ main/views.py	(revision 4a614971f0c1ff874fa658862731bd5535f79949)
@@ -8,5 +8,5 @@
 from django.contrib.auth import logout
 from django.contrib.auth.decorators import login_required
-from .models import ShoppingList, ShoppingListItem, Products2
+from .models import ShoppingList, ShoppingListItem, Products2, Favorite
 from django.views.decorators.http import require_POST
 from django.views.decorators.csrf import csrf_exempt
@@ -113,14 +113,11 @@
 def product_list(request):
     products = Products2.objects.all()
-    query = request.GET.get("q")
-    products = Products2.objects.all()
-
-    if query:
-        products = products.filter(name__icontains=query)
-
     search_query = request.GET.get('search')
+
+    # If there's a search query, find matching products
     if search_query:
         products = products.filter(name__icontains=search_query)
 
+    # Apply filters (unchanged from your original code)
     selected_categories = request.GET.getlist('category')
     if selected_categories:
@@ -141,5 +138,4 @@
         )
 
-    # Store filter
     selected_stores = request.GET.getlist('store')
     if selected_stores:
@@ -168,7 +164,7 @@
         products = products.order_by('-name')
     elif sort == 'popular':
-        products = products.order_by('-popularity')  # Assuming you have a popularity field
+        products = products.order_by('-popularity')
     elif sort == 'newest':
-        products = products.order_by('-created_at')  # Assuming you have a created_at field
+        products = products.order_by('-created_at')
 
     show_discounted = request.GET.get('discounted')
@@ -180,4 +176,28 @@
     page_number = request.GET.get('page')
     page_obj = paginator.get_page(page_number)
+
+    # Get similar products if there's a search query and results
+    similar_products = None
+    if search_query and page_obj:
+        # Get the first product from search results as reference
+        reference_product = page_obj[0]
+        similar_products = get_similar_products(
+            product_name=reference_product.name,
+            product_category=reference_product.category,
+            top_n=8
+        )
+
+        # Convert to Product objects
+        similar_product_ids = [p['id'] for p in similar_products]
+        similar_products = Products2.objects.filter(id__in=similar_product_ids)
+
+        # Maintain order from similarity results
+        id_to_product = {p.id: p for p in similar_products}
+        similar_products = [id_to_product[pid] for pid in similar_product_ids if pid in id_to_product]
+
+    # Favorite products logic
+    fav_ids = []
+    if request.user.is_authenticated:
+        fav_ids = list(request.user.favorites.all().values_list('product_id', flat=True))
 
     context = {
@@ -189,24 +209,10 @@
         'selected_sort': sort,
         'search_query': search_query,
+        'fav_ids': fav_ids,
+        'similar_products': similar_products,
     }
     return render(request, 'main/product_list.html', context)
 
-
-def product_catalog(request):
-    products = Products2.objects.all()
-
-    search_query = request.GET.get('search', '')
-    if search_query:
-        products = products.filter(
-            Q(name__icontains=search_query) |
-            Q(description__icontains=search_query) |
-            Q(category__icontains=search_query)
-        )
-
-    context = {
-        'products': products,
-    }
-    return render(request, 'main/product_list.html', context)
-
+from django.contrib.auth import authenticate, login
 
 def register(request):
@@ -214,10 +220,18 @@
         form = RegisterForm(request.POST)
         if form.is_valid():
-            user = form.save()
-            login(request, user)
-            return redirect('home')  # Redirect to your homepage
+            # Save the form, but don't commit to DB yet
+            user = form.save(commit=False)
+            raw_password = form.cleaned_data.get('password1')
+            user.save()
+
+            # Authenticate with raw credentials
+            authenticated_user = authenticate(username=user.username, password=raw_password)
+            if authenticated_user is not None:
+                login(request, authenticated_user)
+                return redirect('home')
     else:
         form = RegisterForm()
     return render(request, 'main/register.html', {'form': form})
+
 
 
@@ -756,2 +770,42 @@
     return JsonResponse({'suggestions': list(suggestions)})
 
+
+def header(request):
+    return render(request, "main/header.html")
+
+
+@login_required
+def toggle_favorite(request):
+    if request.method == 'POST':
+        try:
+            data = json.loads(request.body)
+            product_id = data.get('product_id')
+
+            product = Products2.objects.get(id=product_id)
+            favorite, created = Favorite.objects.get_or_create(
+                user=request.user,
+                product=product
+            )
+
+            if not created:
+                favorite.delete()
+                return JsonResponse({'success': True, 'is_favorite': False})
+
+            return JsonResponse({'success': True, 'is_favorite': True})
+
+        except Products2.DoesNotExist:
+            return JsonResponse({'success': False, 'message': 'Product not found'})
+        except Exception as e:
+            return JsonResponse({'success': False, 'message': str(e)})
+
+    return JsonResponse({'success': False, 'message': 'Invalid request'})
+
+@login_required
+def get_favorites(request):
+    favorites = Favorite.objects.filter(user=request.user).values_list('product_id', flat=True)
+    return JsonResponse({'favorites': list(favorites)})
+
+@login_required
+def favorites_list(request):
+    favorites = Favorite.objects.filter(user=request.user).select_related('product')
+    return render(request, 'main/favorites.html', {'favorites': favorites})