Index: nv
===================================================================
--- .env	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ 	(revision )
@@ -1,3 +1,0 @@
-GOOGLE_MAPS_API_KEY=AIzaSyDxr8vc4j8iJ7ZTPP2Z9TuaiKupvgofqbI
-OPENAI_API_KEY = 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
-HUGGINGFACE_TOKEN=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
Index: DjangoProject3/settings.py
===================================================================
--- DjangoProject3/settings.py	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ DjangoProject3/settings.py	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
@@ -12,8 +12,4 @@
 
 from pathlib import Path
-import os
-from decouple import config
-from dotenv import load_dotenv
-
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
@@ -26,71 +22,25 @@
 SECRET_KEY = 'django-insecure-y5s^rl54gumkkg1m&uwin81&#jb2uy712ai$1tvrt*190+fpo8'
 
-load_dotenv()  # loads .env
-GOOGLE_MAPS_API_KEY = os.getenv("GOOGLE_MAPS_API_KEY")
-# HUGGINGFACE_TOKEN = config('HUGGINGFACE_TOKEN')
-HUGGINGFACE_TOKEN="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"
-
-
-
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 
-ALLOWED_HOSTS = ['*']
+ALLOWED_HOSTS = []
 
+# Application definition
+# Tuka ja dodavame kreiranata aplikacija main.apps.MainConfig da znae django deka postoi. sega mora da se ran migrate comandata
 INSTALLED_APPS = [
-    "django.contrib.admin",
-    "django.contrib.auth",
-    "django.contrib.contenttypes",
-    "django.contrib.sessions",
-    "django.contrib.messages",
-    "django.contrib.staticfiles",
-
-    "django.contrib.sites",
-
-    "main.apps.MainConfig",
-
-    "allauth",
-    "allauth.account",
-    "allauth.socialaccount",
-
-    "allauth.socialaccount.providers.google",
-    "allauth.socialaccount.providers.facebook",
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+    'main.apps.MainConfig',
 ]
 
-
 AUTHENTICATION_BACKENDS = [
-    # Default backend (required for admin login)
     'django.contrib.auth.backends.ModelBackend',
-
-    # Django Allauth backend (handles social logins)
-    'allauth.account.auth_backends.AuthenticationBackend',
 ]
 
-
-SITE_ID = 7
-LOGIN_REDIRECT_URL = "/"
-LOGOUT_REDIRECT_URL = "/"
-
-ACCOUNT_EMAIL_REQUIRED = True
-ACCOUNT_USERNAME_REQUIRED = False
-ACCOUNT_AUTHENTICATION_METHOD = "username_email"
-# ACCOUNT_EMAIL_VERIFICATION = "optional"
-# SOCIALACCOUNT_QUERY_EMAIL = True
-
-
-SOCIALACCOUNT_PROVIDERS = {
-    "google": {"SCOPE": ["profile", "email"], "AUTH_PARAMS": {"access_type": "online"}},
-    "facebook": {"METHOD": "oauth2", "SCOPE": ["email"], "FIELDS": ["id","email","name","first_name","last_name"]},
-}
-SOCIALACCOUNT_AUTO_SIGNUP = True  # Automatically create user without showing signup page
-SOCIALACCOUNT_LOGIN_ON_GET = True  # Optional: login immediately on GET request
-
-ACCOUNT_EMAIL_VERIFICATION = "none"
-SOCIALACCOUNT_QUERY_EMAIL = True
-# SOCIALACCOUNT_AUTO_SIGNUP = True
-
-
-
-# LOGIN_REDIRECT_URL = 'home'  # Redirect to home after login
+LOGIN_REDIRECT_URL = 'home'  # Redirect to home after login
 LOGIN_URL = 'login'
 
@@ -101,9 +51,7 @@
     'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
-    'allauth.account.middleware.AccountMiddleware',   # <<< ADD THIS LINE
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 ]
-
 
 ROOT_URLCONF = 'DjangoProject3.urls'
@@ -140,5 +88,4 @@
 #    }
 # }
-ORS_API_KEY = "eyJvcmciOiI1YjNjZTM1OTc4NTExMTAwMDFjZjYyNDgiLCJpZCI6IjljN2M5ZDlmNWFiMDQwOWJhYjc5NmI0OTI0YmM2M2JkIiwiaCI6Im11cm11cjY0In0="
 DATABASES = {
     'default': {
Index: main/forms.py
===================================================================
--- main/forms.py	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ main/forms.py	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
@@ -9,8 +9,2 @@
         model = User
         fields = ["username", "email", "password1", "password2"]
-
-class IngredientForm(forms.Form):
-    ingredients = forms.CharField(
-        label="Што имаш во фрижидерот?",
-        widget=forms.Textarea(attrs={"placeholder": "Јајца, млеко, брашно...", "rows": 5})
-    )
Index: in/migrations/0005_remove_shoppinglistitem_checked_and_more.py
===================================================================
--- main/migrations/0005_remove_shoppinglistitem_checked_and_more.py	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ 	(revision )
@@ -1,21 +1,0 @@
-# Generated by Django 5.1.7 on 2025-06-25 06:28
-
-from django.db import migrations
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('main', '0004_remove_product_store_shoppinglistitem_checked_and_more'),
-    ]
-
-    operations = [
-        migrations.RemoveField(
-            model_name='shoppinglistitem',
-            name='checked',
-        ),
-        migrations.RemoveField(
-            model_name='shoppinglistitem',
-            name='completed',
-        ),
-    ]
Index: in/migrations/0006_favorite.py
===================================================================
--- main/migrations/0006_favorite.py	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ 	(revision )
@@ -1,27 +1,0 @@
-# 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: in/migrations/0007_remove_favorite_added_at_alter_favorite_product.py
===================================================================
--- main/migrations/0007_remove_favorite_added_at_alter_favorite_product.py	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ 	(revision )
@@ -1,23 +1,0 @@
-# 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: in/migrations/0008_alter_favorite_user.py
===================================================================
--- main/migrations/0008_alter_favorite_user.py	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ 	(revision )
@@ -1,20 +1,0 @@
-# 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: in/migrations/0009_alter_favorite_user.py
===================================================================
--- main/migrations/0009_alter_favorite_user.py	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ 	(revision )
@@ -1,20 +1,0 @@
-# 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: in/migrations/0010_subcategory_products2_subcategory.py
===================================================================
--- main/migrations/0010_subcategory_products2_subcategory.py	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ 	(revision )
@@ -1,28 +1,0 @@
-# Generated by Django 5.1.7 on 2025-07-04 11:35
-
-import django.db.models.deletion
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('main', '0009_alter_favorite_user'),
-    ]
-
-    operations = [
-        migrations.CreateModel(
-            name='Subcategory',
-            fields=[
-                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
-                ('name', models.CharField(max_length=100)),
-                ('name_mk', models.CharField(max_length=100)),
-                ('category', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='main.category')),
-            ],
-        ),
-        migrations.AddField(
-            model_name='products2',
-            name='subcategory',
-            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, to='main.subcategory'),
-        ),
-    ]
Index: in/migrations/0011_alter_shoppinglistitem_unique_together_and_more.py
===================================================================
--- main/migrations/0011_alter_shoppinglistitem_unique_together_and_more.py	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ 	(revision )
@@ -1,30 +1,0 @@
-# Generated by Django 5.1.7 on 2025-09-16 12:15
-
-import django.db.models.deletion
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('main', '0010_subcategory_products2_subcategory'),
-    ]
-
-    operations = [
-        migrations.AlterUniqueTogether(
-            name='shoppinglistitem',
-            unique_together={('shopping_list', 'product')},
-        ),
-        migrations.CreateModel(
-            name='ProductHistory',
-            fields=[
-                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
-                ('price', models.DecimalField(decimal_places=2, max_digits=10)),
-                ('date', models.DateField()),
-                ('product', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='main.products2')),
-            ],
-            options={
-                'db_table': 'product_history2',
-            },
-        ),
-    ]
Index: main/models.py
===================================================================
--- main/models.py	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ main/models.py	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
@@ -1,5 +1,2 @@
-from datetime import timezone
-
-from django.contrib.auth import get_user_model
 from django.db import models
 from django.contrib.auth.models import AbstractUser
@@ -22,30 +19,13 @@
         return self.text
 
-
-
-class Category(models.Model):
-    name = models.CharField(max_length=100)
-    name_mk = models.CharField(max_length=100) # Macedonian name
-
-    def __str__(self):
-        return self.name_mk  # or self.name depending on context
-
-class Subcategory(models.Model):
-    name = models.CharField(max_length=100)       # English
-    name_mk = models.CharField(max_length=100)    # Macedonian
-    category = models.ForeignKey(Category, on_delete=models.CASCADE)
-
-    def __str__(self):
-        return self.name_mk
-
 #sega odime so komanda python manage.py makemigrations
 class Products2(models.Model):
     name = models.CharField(max_length=255)
-    price = models.DecimalField(max_digits=10, decimal_places=2)
+    price = models.DecimalField(max_digits=10, decimal_places=2)  # This will be the "old_price"
     actual_price = models.DecimalField(
         max_digits=10,
         decimal_places=2,
         default=0.00  # Add this line
-    )
+    )  # Current price (discounted if applicable)
     category = models.CharField(max_length=100)
     image_url = models.CharField(max_length=255)
@@ -54,6 +34,5 @@
     popust = models.BooleanField(default=False)
     popust_date = models.DateField(null=True, blank=True)
-    embedding = models.BinaryField()
-    subcategory = models.ForeignKey(Subcategory, on_delete=models.SET_NULL, null=True, blank=True)
+    embedding = models.BinaryField()  # Make sure this is a BinaryField to store pickled embeddings
 
 
@@ -73,6 +52,4 @@
     name = models.CharField(max_length=100)
     created_at = models.DateTimeField(auto_now_add=True)
-    db_collation = 'utf8mb4_unicode_ci'
-
 
 class ShoppingListItem(models.Model):
@@ -82,24 +59,13 @@
     added_at = models.DateTimeField(auto_now_add=True)
 
-    class Meta:
-        unique_together = ('shopping_list', 'product')
 
-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')
-
-class ProductHistory(models.Model):
-    product = models.ForeignKey(Products2, on_delete=models.CASCADE)
-    price = models.DecimalField(max_digits=10, decimal_places=2)
-    date = models.DateField()
-
-    class Meta:
-        db_table = "product_history2"
+class Category(models.Model):
+    name = models.CharField(max_length=100)  # English name
+    name_mk = models.CharField(max_length=100)  # Macedonian name
 
     def __str__(self):
-        return f"{self.product.name} - {self.price} ({self.date})"
+        return self.name_mk  # or self.name depending on context
+
+
+
Index: main/templates/main/base.html
===================================================================
--- main/templates/main/base.html	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
+++ main/templates/main/base.html	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
@@ -0,0 +1,1343 @@
+{% load custom_filters %}
+{% load static %}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    {% load static %}
+    <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>Home</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <style>
+        /* Common Styles (same as product_list) */
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+
+        }
+
+        /* Category Carousel */
+        .category-carousel {
+            max-width: 1200px;
+            margin: 0 auto 40px;
+            padding: 0 20px;
+        }
+
+        .category-carousel h2 {
+            text-align: center;
+            margin-bottom: 20px;
+            font-size: 2rem;
+        }
+
+        .categories {
+            display: flex;
+            gap: 20px; /* Increased gap */
+            overflow-x: auto;
+            padding: 20px 10px; /* More padding */
+            scrollbar-width: thin;
+        }
+
+        /* Improved Category Cards */
+        .category-card {
+            min-width: 200px; /* Increased width */
+            height: 250px; /* Increased height */
+            position: relative;
+            overflow: hidden;
+            border-radius: 12px;
+            transition: all 0.3s ease;
+            flex-shrink: 0; /* Prevent shrinking */
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+
+
+        .category-card img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover; /* Ensures image covers whole area */
+            transition: transform 0.5s ease;
+        }
+
+        .category-card:hover img {
+            transform: scale(1.1); /* Slight zoom on hover */
+        }
+
+        .category-name {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
+            color: white;
+            padding: 15px;
+            text-align: center;
+            font-weight: bold;
+            font-size: 1.1rem;
+            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+        }
+
+
+        /* Hide scrollbar but keep functionality */
+        .categories::-webkit-scrollbar {
+            height: 8px;
+        }
+
+        .categories::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
+        }
+
+        .categories::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 10px;
+        }
+
+        .categories::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+
+        /* Discounted Products Section */
+        .discounted-products {
+            max-width: 1200px;
+            margin: 0 auto 40px;
+            padding: 0 20px;
+        }
+
+        .discounted-products h2 {
+            text-align: center;
+            margin-bottom: 20px;
+            font-size: 2rem;
+        }
+
+        .grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 3fr));
+            gap: 20px;
+        }
+
+
+        /* Footer */
+        footer {
+            background-color: #333;
+            color: white;
+            padding: 40px 20px;
+            margin-top: auto;
+        }
+
+        .footer-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 30px;
+        }
+
+        .footer-section h3 {
+            margin-bottom: 20px;
+            font-size: 1.2rem;
+        }
+
+        .footer-section p, .footer-section a {
+            color: #bbb;
+            margin-bottom: 10px;
+            display: block;
+            text-decoration: none;
+        }
+
+        .footer-section a:hover {
+            color: white;
+        }
+
+        .copyright {
+            text-align: center;
+            padding-top: 20px;
+            margin-top: 20px;
+            border-top: 1px solid #444;
+            color: #bbb;
+        }
+
+        /* Message Styling */
+        .message-container {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 1000;
+            max-width: 400px;
+        }
+
+        .alert {
+            padding: 15px;
+            margin-bottom: 10px;
+            border-radius: 4px;
+            position: relative;
+        }
+
+        .close-btn {
+            position: absolute;
+            right: 15px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+            font-size: 20px;
+        }
+
+
+        @media (max-width: 768px) {
+            .category-carousel {
+                padding: 0 10px;
+            }
+
+            .category-card {
+                min-width: 150px;
+                height: 180px;
+            }
+
+            .category-name {
+                padding: 10px;
+                font-size: 0.9rem;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .grid {
+                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+                gap: 15px;
+            }
+        }
+
+        @media (max-width: 600px) {
+            .footer-content {
+                grid-template-columns: 1fr;
+                gap: 20px;
+            }
+
+            .footer-section {
+                text-align: center;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .message-container {
+                top: 10px;
+                right: 10px;
+                left: 10px;
+                max-width: none;
+            }
+        }
+
+
+        /* Add these to your existing styles */
+        .category-card {
+            -webkit-tap-highlight-color: transparent;
+        }
+
+
+        @media (max-width: 480px) {
+            /* Carousel adjustments */
+            .categories {
+                padding: 15px 5px;
+                gap: 10px;
+                -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
+            }
+
+            .category-card {
+                min-width: 120px;
+                height: 160px;
+            }
+
+            .category-name {
+                padding: 8px;
+                font-size: 0.8rem;
+            }
+
+            /* Force show scrollbar on mobile */
+            .categories {
+                scrollbar-width: auto;
+                -ms-overflow-style: auto;
+            }
+
+            .categories::-webkit-scrollbar {
+                height: 5px;
+            }
+        }
+
+
+        /* Prevent zoom on form inputs */
+        @media (max-width: 768px) {
+            input, select, textarea {
+                font-size: 16px;
+            }
+        }
+
+        .category-carousel {
+            max-width: 1200px;
+            margin: 0 auto 40px;
+            padding: 0 15px; /* Changed from 20px */
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        @media (max-width: 768px) {
+            .category-carousel {
+                padding: 0 10px;
+            }
+
+            .categories {
+                padding: 15px 5px;
+                gap: 8px;
+                scroll-snap-type: x mandatory;
+            }
+
+            .category-card {
+                min-width: 140px;
+                height: 160px;
+                scroll-snap-align: start;
+            }
+
+            .category-name {
+                padding: 8px;
+                font-size: 0.9rem;
+            }
+        }
+
+        #logo {
+            font-size: 24px;
+            font-weight: bold;
+            margin-right: auto;
+        }
+
+
+        #other a:hover, #other button:hover {
+            color: lightgreen !important; /* Light green on hover */
+        }
+
+
+        #login:hover {
+            color: #cb7e31 !important;
+        {#background-color: #cb7e31 !important;#}{#padding: 10px;#}{#border-radius: 10px;/* Maintain white text on hover */#}
+        }
+
+        #signup:hover {
+            color: black !important; /* Maintain white text on hover */
+        }
+
+        #signup {
+            background-color: #cb7e31;
+            padding: 10px;
+        }
+
+        /* Category Carousel Section */
+        .category-carousel {
+            padding: 50px 20px;
+            background-color: #f8f8f8;
+            text-align: center;
+        }
+
+        /* Carousel Header */
+        .category-carousel h2 {
+            font-size: 2.5rem;
+            font-weight: 600;
+            margin-bottom: 30px;
+            color: #333;
+        }
+
+        /* Categories Container */
+        .categories {
+            display: flex;
+            transition: transform 0.5s ease;
+            gap: 20px;
+        }
+
+        /* Category Card */
+        .category-card {
+            position: relative;
+            max-width: 250px;
+            width: 100%;
+            height: 250px;
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            text-decoration: none;
+        }
+
+        .category-card img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transition: opacity 0.3s ease;
+        }
+
+        /* Category Name Overlay */
+        .category-name {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: 12px;
+            font-size: 1.1rem;
+            text-align: center;
+            color: white;
+            background: rgba(0, 0, 0, 0.6);
+            font-weight: bold;
+        }
+
+        /* Hover Effects */
+        .category-card:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+        }
+
+        .category-card:hover img {
+            opacity: 0.8;
+        }
+
+        /* Carousel Navigation Buttons */
+        .carousel-prev, .carousel-next {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            background-color: rgba(0, 0, 0, 0.5);
+            color: white;
+            font-size: 2rem;
+            padding: 10px;
+            border: none;
+            cursor: pointer;
+            z-index: 10;
+        }
+
+        .carousel-prev {
+            left: 10px;
+        }
+
+        .carousel-next {
+            right: 10px;
+        }
+
+        /* Mobile Responsiveness */
+        @media (max-width: 768px) {
+            .category-carousel h2 {
+                font-size: 2rem;
+            }
+
+            .categories {
+                gap: 10px;
+            }
+
+            .category-card {
+                max-width: 200px;
+                height: 200px;
+            }
+
+            .category-name {
+                font-size: 1rem;
+            }
+
+            .carousel-prev, .carousel-next {
+                font-size: 1.5rem;
+            }
+        }
+
+
+        /* ===== 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: 20px;
+            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;
+        }
+
+        /* 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; /* Darker green on hover */#}
+        }
+
+
+        /* ===== 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;
+        }
+
+        #overlay.active {
+            display: block;
+        }
+
+        /* ===== RESPONSIVENESS ===== */
+        @media (max-width: 768px) {
+            #desktop-navbar {
+                display: none;
+            }
+
+            #mobile-header {
+                display: flex;
+            }
+        }
+
+        /* ===== BANNER ===== */
+        .banner {
+            position: relative;
+            width: 100%;
+            height: 50vh;
+            background: url("{% static 'images/baner1.jpg' %}") center/cover no-repeat;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            padding-bottom: 30px;
+        }
+
+        .banner-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.4);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .banner-content {
+            color: white;
+            text-align: left;
+            z-index: 1;
+        }
+
+        .banner-content h1 {
+            font-size: 3rem;
+            font-weight: 700;
+        {#margin-bottom: 20px;#}
+        }
+
+        .banner-content .highlight {
+            color: #fdd835; /* highlight "Штедко" */
+        }
+
+        .banner-content p {
+            font-size: 1.3rem;
+            margin-bottom: 30px;
+        }
+
+        .banner-btn {
+            padding: 12px 30px;
+            font-size: 1rem;
+            background-color: #fdd835;
+            color: black;
+            text-decoration: none;
+            border-radius: 30px;
+            font-weight: 600;
+            transition: background-color 0.3s ease;
+            margin-top: 200px;
+        }
+
+        .banner-btn:hover {
+            background-color: #ffeb3b;
+        }
+
+        .mobile-search-form {
+            display: flex;
+            align-items: center;
+            padding: 10px 16px;
+            gap: 8px;
+            background-color: white;
+            border-bottom: 1px solid #eee;
+        }
+
+        .mobile-search-form input {
+            flex: 1;
+            padding: 8px 14px;
+            border-radius: 20px;
+            border: 1px solid #ccc;
+            font-size: 14px;
+            outline: none;
+        }
+
+        .mobile-search-form button {
+            background-color: #2ecc71;
+            color: white;
+            border: none;
+            padding: 8px 12px;
+            border-radius: 50%;
+            font-size: 16px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+
+        .mobile-search-form button:hover {
+            background-color: #27ae60;
+        }
+
+        /* Market Flyers Section */
+        .market-flyers {
+            max-width: 1200px;
+            margin: 40px auto;
+            padding: 0 20px;
+        }
+
+        .market-flyers h2 {
+            text-align: center;
+            margin-bottom: 30px;
+            font-size: 2rem;
+        }
+
+        .flyers-container {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
+            gap: 25px; /* Spacing between cards */
+        }
+
+        /* Responsive adjustments */
+        @media (max-width: 900px) {
+            .flyers-container {
+                grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
+            }
+        }
+
+        @media (max-width: 600px) {
+            .flyers-container {
+                grid-template-columns: 1fr; /* 1 column on small screens */
+            }
+        }
+
+        /* Flyer card styling (unchanged) */
+        .flyer-card {
+            background: white;
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .flyer-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+        }
+
+        .flyer-header {
+            padding: 20px;
+            background: linear-gradient(135deg, #549249, #3a6b33);
+            text-align: center;
+            color: white;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .flyer-header h3 {
+            margin: 0;
+            font-size: 1.5rem;
+            font-weight: 600;
+            position: relative;
+            z-index: 1;
+            color: white;
+        }
+        .flyer-header:before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            right: -50%;
+            width: 100%;
+            height: 200%;
+            background: rgba(255, 255, 255, 0.1);
+            transform: rotate(30deg);
+        }
+
+        .flyer-products {
+            padding: 15px;
+        }
+
+        .flyer-product {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            padding: 10px 0;
+            border-bottom: 1px solid #eee;
+        }
+
+        .flyer-product:last-child {
+            border-bottom: none;
+        }
+
+        .flyer-product img {
+            width: 60px;
+            height: 60px;
+            object-fit: cover;
+            border-radius: 5px;
+        }
+
+        .product-info {
+            flex: 1;
+        }
+
+        .product-name {
+            display: block;
+            font-weight: 500;
+            margin-bottom: 5px;
+        }
+
+        .product-price {
+            display: flex;
+            gap: 10px;
+        }
+
+        .old-price {
+            text-decoration: line-through;
+            color: #999;
+        }
+
+        .new-price {
+            color: #e74c3c;
+            font-weight: bold;
+        }
+
+        .view-all-btn {
+            width: 100%;
+            padding: 12px;
+            background: #cb7e31;
+            color: white;
+            border: none;
+            font-weight: bold;
+            cursor: pointer;
+            transition: background 0.3s;
+        }
+
+        .view-all-btn:hover {
+            background: #27ae60;
+        }
+
+        /* Modal Styles */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.7);
+        }
+
+        .modal-content {
+            background-color: #fefefe;
+            margin: 5% auto;
+            padding: 25px;
+            border-radius: 10px;
+            max-width: 900px;
+            width: 90%;
+            max-height: 80vh;
+            overflow-y: auto;
+            position: relative;
+        }
+
+        .close-modal {
+            position: absolute;
+            right: 25px;
+            top: 25px;
+            color: #aaa;
+            font-size: 28px;
+            font-weight: bold;
+            cursor: pointer;
+        }
+
+        .close-modal:hover {
+            color: #333;
+        }
+
+        .modal-products-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 20px;
+            margin-top: 20px;
+        }
+
+        .modal-product {
+            background: white;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .modal-product img {
+            width: 100%;
+            height: 150px;
+            object-fit: cover;
+        }
+
+        .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;
+        }
+
+        @media (max-width: 768px) {
+            .flyers-container {
+                grid-template-columns: 1fr;
+            }
+
+            .modal-content {
+                width: 95%;
+                margin: 10% auto;
+            }
+
+            .modal-products-grid {
+                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+            }
+        }
+        {#button.logout-btn{#}
+        {#    border: 2px solid green;#}
+        {#    padding: 10px;#}
+        {##}
+
+
+
+    </style>
+</head>
+<body>
+
+<div class="message-container">
+    {% if messages %}
+        {% for message in messages %}
+            <div class="alert alert-{{ message.tags }}">
+                {{ message }}
+                <span class="close-btn" onclick="this.parentElement.remove()">×</span>
+            </div>
+        {% endfor %}
+    {% endif %}
+</div>
+<!-- Navbar (same as product_list) -->
+{% load static %}
+<!-- FULL NAVBAR -->
+<div id="navbar">
+
+    <!-- DESKTOP NAVBAR -->
+    <div id="desktop-navbar">
+        <!-- Logo on the left -->
+        <div id="logo">
+            <a href="{% url 'home' %}"><img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого"/></a>
+        </div>
+
+        <!-- Navigation links on the right -->
+        <div id="nav-links">
+{#            <a href="{% url 'home' %}">Дома</a>#}
+            <a href="{% url 'product_list' %}">Каталог</a>
+            <a href="{% url 'stats' %}"><img src="{% static 'images/stats.png' %}" width="57px"></a>
+
+            <div class="user-actions">
+                {% if user.is_authenticated %}
+                    <form method="post" action="{% url 'logout' %}">
+                        {% csrf_token %}
+                        <button type="submit" class="logout-btn"><img src="{% static 'images/log_out.png' %}"width="35px"></button>
+                    </form>
+                {% else %}
+                    <a href="{% url 'login' %}" id="login">Login</a>
+                    <a href="{% url 'register' %}" id="signup"
+                       style="background-color: #cb7e31; color: white; border-radius: 10px">Sign Up</a>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+
+
+    <div id="mobile-header">
+        <div id="mobile-logo">
+            <img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого" style="height: 40px;">
+        </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">
+            <input type="text" name="q" placeholder="Пребарај производ..." required/>
+            <button type="submit"><i class="fas fa-magnifying-glass"></i></button>
+        </form>
+        <nav>
+            <a href="{% url 'home' %}">Дома</a>
+            <a href="{% url 'product_list' %}">Каталог</a>
+            <a href="#">Статистика</a>
+            {% if user.is_authenticated %}
+                <form method="post" action="{% url 'logout' %}">
+                    {% csrf_token %}
+                    <button type="submit">Logout</button>
+                </form>
+            {% else %}
+                <a href="{% url 'login' %}">Login</a>
+                <a href="{% url 'register' %}">Sign Up</a>
+            {% endif %}
+        </nav>
+    </div>
+    <!-- MOBILE DARK OVERLAY -->
+    <div id="overlay" onclick="toggleMobileMenu()"></div>
+
+
+</div>
+{% block details %}
+{% endblock %}
+<section class="banner">
+    <div class="banner-overlay">
+        <div class="banner-content">
+            <h1>Добредојдовте во <span class="highlight">Штедко</span>!</h1>
+            <p>Најдобри цени, најквалитетни производи</p>
+            <a href="{% url 'product_list' %}" class="banner-btn">Разгледај производи</a>
+        </div>
+    </div>
+</section>
+
+
+<section class="category-carousel">
+<h2 style="
+    background: linear-gradient(135deg, #1f3f1f, #2e652e);
+    padding: 20px 30px;
+    color: #fff;
+    border-radius: 12px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
+    font-size: 1.8rem;
+    text-align: center;
+    margin-bottom: 20px;
+">
+    Категории
+</h2>
+    {% if categories %}
+        <div class="categories">
+            {% for category in categories %}
+                <a href="{% url 'product_list' %}?category={{ category }}" class="category-card">
+                    <img src="{% static 'images/categories/' %}{{ category|lower }}.jpg"
+                         alt="{{ category }}"
+                         onerror="this.src='{% static 'images/categories/default.jpg' %}'">
+{#                    <span class="category-name">{{ category }}</span>#}
+
+                </a>
+            {% endfor %}
+        </div>
+    {% else %}
+        <p style="text-align: center;">Нема достапни категории</p>
+    {% endif %}
+</section>
+
+<section class="market-flyers">
+<h2 style="
+    background: linear-gradient(135deg, #1f3f1f, #2e652e);
+    padding: 20px 30px;
+    color: #fff;
+    border-radius: 12px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
+    font-size: 1.8rem;
+    text-align: center;
+    margin-bottom: 20px;
+">
+    Актуелни Попусти
+</h2>{#<img src="{% static 'images/Штедко.png' %}" alt="Line" style="width: 70px">#}
+<div class="flex" style="display: flex">
+    <div class="flyers-container">
+        {% for store in stores_with_products %}
+            <div class="flyer-card">
+                <div class="flyer-header" style="background-color: #549249; color: white;">
+                    <h3 style="color: white">{{ store.name }}</h3>
+                </div>
+                <div class="flyer-products">
+                    {% if store.products %}
+                        {% for product in store.products %}
+                            <div class="flyer-product">
+
+                                <img src="{{ product.image_url }}" alt="{{ product.name }}">
+
+                                <div class="product-info">
+                                    <span class="product-name">{{ product.name }}</span>
+                                    <span class="product-price">
+                                        <span class="old-price">{{ product.price }} ден.</span>
+                                        <span class="new-price">{{ product.actual_price }} ден.</span>
+                                    </span>
+                                </div>
+                                 </a>
+                            </div>
+                        {% endfor %}
+                    {% else %}
+                        <p>No discounted products available for {{ store.name }}.</p>
+                    {% endif %}
+                </div>
+                <button class="view-all-btn" data-store="{{ store.name }}">
+                    Види ги сите попусти
+                </button>
+                </div>
+
+        {% endfor %}
+    </div>
+</section>
+
+
+<!-- Modal for showing all discounted products -->
+<div id="products-modal" class="modal">
+    <div class="modal-content">
+        <span class="close-modal">&times;</span>
+        <h2 id="modal-title">Попусти во <span id="store-name"></span></h2>
+        <div class="modal-products-grid" id="modal-products">
+            <!-- Products will be loaded here via JavaScript -->
+        </div>
+    </div>
+</div>
+
+<footer>
+    <div class="footer-content">
+        <div class="footer-section">
+            <h3>За нас</h3>
+            <p>Ние сме водечка онлајн продавница со најдобри цени и квалитетни производи.</p>
+        </div>
+        <div class="footer-section">
+            <h3>Контакт</h3>
+            <p>Телефон: +389 70 123 456</p>
+            <p>Email: kontakt@nasataprodavnica.com</p>
+            <p>Адреса: Улица ББ, Скопје</p>
+        </div>
+        <div class="footer-section">
+            <h3>Брзи линкови</h3>
+            <a href="{% url 'home' %}">Дома</a>
+            <a href="{% url 'product_list' %}">Каталог</a>
+            <a href="#">Услови на користење</a>
+            <a href="#">Политика на приватност</a>
+        </div>
+    </div>
+    <div class="copyright">
+        &copy; 2023 Нашата Продавница. Сите права се задржани.
+    </div>
+</footer>
+
+<script>
+    function toggleMenu() {
+        const menu = document.getElementById('other');
+        menu.style.display = menu.style.display === 'flex' ? 'none' : 'flex';
+    }
+
+    document.addEventListener('DOMContentLoaded', function () {
+        // Close menu when clicking outside
+        document.addEventListener('click', function (e) {
+            if (!e.target.closest('#navbar') &&
+                !e.target.classList.contains('menu-toggle')) {
+                document.getElementById('other').style.display = 'none';
+            }
+        });
+
+        // Carousel touch support
+        const carousel = document.querySelector('.categories');
+        if (carousel) {
+            let isDown = false;
+            let startX;
+            let scrollLeft;
+
+            // Mouse events
+            carousel.addEventListener('mousedown', (e) => {
+                isDown = true;
+                startX = e.pageX - carousel.offsetLeft;
+                scrollLeft = carousel.scrollLeft;
+                carousel.style.cursor = 'grabbing';
+            });
+
+            carousel.addEventListener('mouseleave', () => {
+                isDown = false;
+                carousel.style.cursor = 'grab';
+            });
+
+            carousel.addEventListener('mouseup', () => {
+                isDown = false;
+                carousel.style.cursor = 'grab';
+            });
+
+            carousel.addEventListener('mousemove', (e) => {
+                if (!isDown) return;
+                e.preventDefault();
+                const x = e.pageX - carousel.offsetLeft;
+                const walk = (x - startX) * 2;
+                carousel.scrollLeft = scrollLeft - walk;
+            });
+
+            // Touch events
+            carousel.addEventListener('touchstart', (e) => {
+                isDown = true;
+                startX = e.touches[0].pageX - carousel.offsetLeft;
+                scrollLeft = carousel.scrollLeft;
+            });
+
+            carousel.addEventListener('touchend', () => {
+                isDown = false;
+            });
+
+            carousel.addEventListener('touchmove', (e) => {
+                if (!isDown) return;
+                e.preventDefault();
+                const x = e.touches[0].pageX - carousel.offsetLeft;
+                const walk = (x - startX) * 2;
+                carousel.scrollLeft = scrollLeft - walk;
+            });
+        }
+
+
+        // Auto-hide messages
+        setTimeout(() => {
+            document.querySelectorAll('.alert').forEach(alert => {
+                alert.style.opacity = '0';
+                setTimeout(() => alert.remove(), 300);
+            });
+        }, 5000);
+    });
+
+    function toggleMobileMenu() {
+        const menu = document.getElementById("mobile-menu");
+        const overlay = document.getElementById("overlay");
+
+        menu.classList.toggle("open");
+        overlay.classList.toggle("active");
+    }
+
+    // Modal functionality
+    document.addEventListener('DOMContentLoaded', function () {
+        const modal = document.getElementById('products-modal');
+        const modalTitle = document.getElementById('store-name');
+        const modalProducts = document.getElementById('modal-products');
+        const closeModal = document.querySelector('.close-modal');
+
+        // Open modal when view all button is clicked
+        document.querySelectorAll('.view-all-btn').forEach(button => {
+            button.addEventListener('click', function () {
+                const store = this.getAttribute('data-store');
+                modalTitle.textContent = store;
+
+                // Clear previous products
+                modalProducts.innerHTML = '';
+
+                // Show loading state
+                modalProducts.innerHTML = '<p>Loading products...</p>';
+
+                // Fetch products via AJAX
+                fetch(`/get-store-products/?store=${encodeURIComponent(store)}`)
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.products && data.products.length > 0) {
+                            modalProducts.innerHTML = '';
+                            data.products.forEach(product => {
+                                const productElement = document.createElement('div');
+                                productElement.className = 'modal-product';
+                                productElement.innerHTML = `
+                                    <img src="${product.image_url}" alt="${product.name}">
+                                    <div class="modal-product-info">
+                                        <div class="modal-product-name">${product.name}</div>
+                                        <div class="modal-product-price">
+                                            <span class="old-price">${product.price} ден.</span>
+                                            <span class="new-price">${product.actual_price} ден.</span>
+                                        </div>
+                                    </div>
+                                `;
+                                modalProducts.appendChild(productElement);
+                            });
+                        } else {
+                            modalProducts.innerHTML = '<p>No discounted products found for this store.</p>';
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error:', error);
+                        modalProducts.innerHTML = '<p>Error loading products. Please try again.</p>';
+                    });
+
+                modal.style.display = 'block';
+                document.body.style.overflow = 'hidden';
+            });
+        });
+
+        // Close modal
+        closeModal.addEventListener('click', function () {
+            modal.style.display = 'none';
+            document.body.style.overflow = 'auto';
+        });
+
+        // Close when clicking outside modal
+        window.addEventListener('click', function (event) {
+            if (event.target === modal) {
+                modal.style.display = 'none';
+                document.body.style.overflow = 'auto';
+            }
+        });
+    });
+</script>
+</body>
+</html>
Index: in/templates/main/favorites.html
===================================================================
--- main/templates/main/favorites.html	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ 	(revision )
@@ -1,445 +1,0 @@
-{% extends 'main/header.html' %}
-{% load static %}
-
-{% block content %}
-<div class="main-content">
-    <main class="content-area">
-        <div class="page-header">
-            <h1 class="lists-main-title">Твоите Омилени</h1>
-            <div class="header-decoration"></div>
-            <p class="page-subtitle">Твоите омилени производи, на едно место.</p>
-        </div>
-
-        <div class="lists-grid">
-            {% for favorite in favorites %}
-            <div class="product-card">
-                <a href="{% url 'product_detail' favorite.product.id %}" class="product-card-link">
-                    <div class="product-image-container">
-                        {% if favorite.product.image_url and favorite.product.store != 'Vero' %}
-                            <img src="{{ favorite.product.image_url }}" alt="{{ favorite.product.name }}" class="product-image" loading="lazy">
-                        {% else %}
-                            <div class="no-image-placeholder">
-                                <i class="fas fa-image"></i>
-                            </div>
-                        {% endif %}
-                        <button class="favorite-btn" onclick="event.preventDefault(); toggleFavorite(this, {{ favorite.product.id }});">
-                            <i class="fas fa-heart"></i>
-                        </button>
-                        {% if favorite.product.popust %}
-                        <div class="discount-badge">Попуст!</div>
-                        {% endif %}
-                    </div>
-                    <div class="product-info">
-                        <h3 class="product-name">{{ favorite.product.name }}</h3>
-                        <div class="product-price">
-                            {% if favorite.product.popust %}
-                                <span class="original-price">{{ favorite.product.price }} ден.</span>
-                                <span class="discounted-price">{{ favorite.product.actual_price }} ден.</span>
-                            {% else %}
-                                <span class="regular-price">{{ favorite.product.price }} ден.</span>
-                            {% endif %}
-                        </div>
-                        <div class="product-store">
-                            {% if favorite.product.store == 'Vero' %}
-                                <img src="{% static 'images/vero_logo1.png' %}" alt="Vero" class="store-logo">
-                            {% elif favorite.product.store == 'Ramstore' %}
-                                <img src="{% static 'images/ramstore_logo.png' %}" alt="Ramstore" class="store-logo">
-                            {% elif favorite.product.store == 'Reptil' %}
-                                <img src="{% static 'images/reptil_logo.jpg' %}" alt="Reptil" class="store-logo">
-                            {% elif favorite.product.store == 'Zito' %}
-                                <img src="{% static 'images/zito_logo.png' %}" alt="Zito" class="store-logo">
-                            {% endif %}
-                        </div>
-                    </div>
-                </a>
-            </div>
-            {% empty %}
-            <div class="empty-lists-message">
-                <div class="empty-icon">
-                    <i class="fas fa-heart-broken"></i>
-                </div>
-                <h3>Сеуште немаш омилени продукти</h3>
-                <p>Додади продукти во твојата листа на омилени за да ги имаш секогаш при рака</p>
-                <a href="{% url 'product_list' %}" class="action-button">Пребарај продукти</a>
-            </div>
-            {% endfor %}
-        </div>
-    </main>
-</div>
-
-<script>
-function toggleFavorite(button, productId) {
-    const icon = button.querySelector('i');
-    const productCard = button.closest('.product-card');
-
-    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) {
-                // Animation when adding to favorites
-                icon.classList.add('active');
-                button.classList.add('pulse');
-                setTimeout(() => button.classList.remove('pulse'), 600);
-            } else {
-                // Animation when removing from favorites
-                productCard.classList.add('fade-out');
-                setTimeout(() => {
-                    productCard.remove();
-                    // If last item, show empty state
-                    if (document.querySelectorAll('.product-card').length === 0) {
-                        document.querySelector('.lists-grid').innerHTML = `
-                            <div class="empty-lists-message">
-                                <div class="empty-icon">
-                                    <i class="fas fa-heart-broken"></i>
-                                </div>
-                                <h3>Сеуште немаш омилени продукти</h3>
-                                <p>Додади продукти во твојата листа на омилени за да ги имаш секогаш при рака</p>
-                                <a href="{% url 'product_list' %}" class="action-button">Пребарај продукти</a>
-                            </div>
-                        `;
-                    }
-                }, 300);
-            }
-        }
-    });
-}
-</script>
-
-<style>
-    /* Common Styles */
-    body {
-        font-family: Arial, sans-serif;
-        margin: 0;
-        padding: 0;
-        display: flex;
-        flex-direction: column;
-        min-height: 100vh;
-        {#background-color: #f5f5f5;#}
-        background-color: rgba(46,101,46,0.85);
-    }
-
-    /* Main Content */
-    .main-content {
-        max-width: 1200px;
-        margin: 20px auto;
-        padding: 0 15px;
-        flex-grow: 1;
-    }
-
-    .content-area {
-        background-color: white;
-        border-radius: 8px;
-        padding: 20px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-
-    .page-header {
-        text-align: center;
-        margin-bottom: 20px;
-    }
-
-    .lists-main-title {
-        font-size: 1.5rem;
-        font-weight: 600;
-        color: #2e652e;
-        margin-bottom: 10px;
-    }
-
-    .page-subtitle {
-        color: #666;
-        font-size: 1rem;
-        margin-top: 5px;
-    }
-
-    .header-decoration {
-        height: 4px;
-        width: 80px;
-        background: linear-gradient(to right, #2e652e, #4caf50);
-        margin: 10px auto;
-        border-radius: 2px;
-    }
-
-    .lists-grid {
-        display: grid;
-        grid-template-columns: repeat(3,1fr);
-        gap: 20px;
-    }
-
-    .product-card {
-        background: white;
-        border-radius: 8px;
-        overflow: hidden;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        transition: transform 0.3s ease, box-shadow 0.3s ease;
-        position: relative;
-    }
-
-    .product-card:hover {
-        transform: translateY(-5px);
-        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-    }
-
-    .product-card-link {
-        text-decoration: none;
-        color: inherit;
-        display: block;
-        height: 100%;
-    }
-
-    .product-image-container {
-        height: 200px;
-        background-color: #f9f9f9;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        overflow: hidden;
-    }
-
-    .product-image {
-        max-width: 100%;
-        max-height: 100%;
-        object-fit: contain;
-        transition: transform 0.3s ease;
-    }
-
-    .no-image-placeholder {
-        color: #ddd;
-        font-size: 3rem;
-    }
-
-    .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 {
-        color: #e74c3c;
-        font-size: 18px;
-        transition: all 0.3s ease;
-    }
-
-    .favorite-btn i.active {
-        color: #e74c3c;
-    }
-
-    .discount-badge {
-        position: absolute;
-        top: 10px;
-        left: 10px;
-        background-color: #e74c3c;
-        color: white;
-        padding: 3px 8px;
-        border-radius: 3px;
-        font-size: 0.8rem;
-        font-weight: bold;
-    }
-
-    .product-info {
-        padding: 15px;
-    }
-
-    .product-name {
-        font-weight: 500;
-        margin: 0 0 10px 0;
-        color: #333;
-        font-size: 0.95rem;
-        line-height: 1.4;
-        height: 2.8em;
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-    }
-
-    .product-price {
-        margin: 15px 0;
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 8px;
-    }
-
-    .regular-price, .discounted-price {
-        font-size: 1.1rem;
-        color: #2e652e;
-        font-weight: bold;
-    }
-
-    .original-price {
-        font-size: 0.9rem;
-        color: #666;
-        text-decoration: line-through;
-    }
-
-    .product-store {
-        margin-top: 15px;
-    }
-
-    .store-logo {
-        height: 35px;
-        max-width: 100%;
-        object-fit: contain;
-    }
-
-    .empty-lists-message {
-        grid-column: 1 / -1;
-        text-align: center;
-        padding: 40px;
-        background: white;
-        border-radius: 8px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-
-    .empty-icon {
-        font-size: 2.5rem;
-        margin-bottom: 15px;
-        color: #e74c3c;
-    }
-
-    .empty-lists-message h3 {
-        font-size: 1.2rem;
-        margin-bottom: 10px;
-        color: #2e652e;
-    }
-
-    .empty-lists-message p {
-        font-size: 0.9rem;
-        color: #666;
-        margin-bottom: 20px;
-    }
-
-    .action-button {
-        padding: 10px 25px;
-        font-size: 1rem;
-        background-color: #2e652e;
-        color: white;
-        border: none;
-        border-radius: 30px;
-        font-weight: 600;
-        cursor: pointer;
-        transition: background-color 0.3s ease, transform 0.3s ease;
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        text-decoration: none;
-    }
-
-    .action-button:hover {
-        background-color: #1f3f1f;
-        transform: translateY(-2px);
-    }
-
-    /* Animations */
-    @keyframes pulseHeart {
-        0% { transform: scale(1); }
-        50% { transform: scale(1.3); }
-        100% { transform: scale(1); }
-    }
-
-    @keyframes fadeOut {
-        from { opacity: 1; transform: scale(1); }
-        to { opacity: 0; transform: scale(0.95); }
-    }
-
-    .pulse {
-        animation: pulseHeart 0.6s ease;
-    }
-
-    .fade-out {
-        animation: fadeOut 0.3s ease forwards;
-    }
-
-    /* Responsiveness */
-    @media (max-width: 1024px) {
-        .lists-grid {
-            grid-template-columns: repeat(3, 1fr);
-        }
-    }
-
-    @media (max-width: 768px) {
-        .content-area {
-            padding: 15px;
-            border-radius: 15px;
-        }
-
-        .lists-main-title {
-            font-size: 1.2rem;
-        }
-
-        .lists-grid {
-            grid-template-columns: repeat(2, 1fr);
-            gap: 15px;
-        }
-
-        .product-card {
-            border-radius: 15px;
-        }
-
-        .product-image-container {
-            height: 180px;
-        }
-
-        .action-button {
-            width: 100%;
-            justify-content: center;
-            padding: 12px;
-            border-radius: 25px;
-        }
-
-        .empty-lists-message {
-            padding: 30px 20px;
-        }
-    }
-
-    @media (max-width: 480px) {
-        .lists-main-title {
-            font-size: 1rem;
-        }
-
-        .lists-grid {
-            grid-template-columns: 1fr;
-        }
-
-        .empty-icon {
-            font-size: 2rem;
-        }
-
-        .empty-lists-message h3 {
-            font-size: 1rem;
-        }
-
-        .empty-lists-message p {
-            font-size: 0.8rem;
-        }
-    }
-</style>
-{% endblock %}
Index: in/templates/main/fridge_recepies.html
===================================================================
--- main/templates/main/fridge_recepies.html	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ 	(revision )
@@ -1,52 +1,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-</head>
-<body>
-<div id="fridge-suggester">
-  <h3>What’s in your fridge?</h3>
-  <textarea id="fridge-input" rows="3" placeholder="e.g. eggs, milk, flour"></textarea>
-  <button id="fridge-btn">Suggest Recipes</button>
-  <div id="fridge-recipes"></div>
-</div>
-<script>
-
-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.getElementById('fridge-btn').onclick = () => {
-  const ingredients = document.getElementById('fridge-input').value;
-  fetch('/fridge-recipes/', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      'X-CSRFToken': getCookie('csrftoken'),
-    },
-    body: JSON.stringify({ ingredients }),
-  })
-  .then(res => res.json())
-  .then(data => {
-    const div = document.getElementById('fridge-recipes');
-    div.innerHTML = data.recipes.map(r =>
-      `<div><h4>${r.title}</h4><p>${r.description}</p></div>`
-    ).join('');
-  });
-};
-
-</script>
-</body>
-</html>
Index: in/templates/main/header.html
===================================================================
--- main/templates/main/header.html	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ 	(revision )
@@ -1,926 +1,0 @@
-{% 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;
-        }
-
-        /* User greeting styles */
-        .user-greeting {
-            font-weight: 600;
-            color: #2e652e;
-            margin-right: 10px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            max-width: 150px;
-            display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-
-        /* 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;
-        {#justify-content: space-between;#}
-        }
-
-        .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;
-            margin-left: -9px;
-        }
-
-        .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);
-        }
-
-        /* User info in mobile menu */
-        .mobile-user-info {
-            padding: 15px;
-            margin-bottom: 10px;
-            background-color: rgba(255, 255, 255, 0.1);
-            border-radius: 8px;
-            color: white;
-        }
-
-        .mobile-user-info .username {
-            font-weight: bold;
-            font-size: 18px;
-            margin-bottom: 5px;
-        }
-
-        .mobile-user-info .email {
-            font-size: 14px;
-            opacity: 0.8;
-        }
-
-        /* 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;
-            }
-
-            body {
-                padding-bottom: 60px;
-            }
-        }
-
-        @media (max-width: 1024px) {
-            .header-search input {
-                width: 96%;
-            }
-        }
-        .header-search input{
-            width: 100%;
-        }
-    </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; margin-left: 20px; margin-right: 20px">
-                            <i class="fas fa-heart" style="font-size: 18px;"></i>
-                        </a>
-                        <select id="listSelector" class="list-selector" style="margin-right: 20px">
-                            <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">
-        <div id="flex" style="display: flex; justify-content: space-between">
-            <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>
-                <li><a href="{% url 'nearby_stores' %}">Најблиски Продавници</a></li>
-
-            </ul>
-            <div style="display: flex">
-                <span class="user-greeting" title="{{ user.username }}" style="color: white">
-                            <i class="fas fa-user-circle"></i> {{ user.username|truncatechars:15 }}
-                </span>
-            </div>
-        </div>
-    </nav>
-</header>
-
-<!-- Mobile Menu -->
-<div id="mobile-header">
-    <div id="mobile-logo">
-        <a href="{% url 'home' %}"><img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого"></a>
-    </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>
-
-    {% if user.is_authenticated %}
-        <div class="mobile-user-info">
-            <div class="username">
-                <i class="fas fa-user-circle"></i> {{ user.username }}
-            </div>
-            <div class="email">{{ user.email }}</div>
-        </div>
-    {% endif %}
-
-    <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>
-        <a href="{% url 'nearby_stores' %}">Најблиски Продавници</a>
-
-        {% if user.is_authenticated %}
-            <a href="{% url 'logout' %}"><i class="fas fa-sign-out-alt"></i> Одјави се</a>
-        {% else %}
-            <a href="{% url 'login' %}"><i class="fas fa-sign-in-alt"></i> Најави се</a>
-            <a href="{% url 'register' %}"><i class="fas fa-user-plus"></i> Регистрирај се</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 'favorites_list' %}" class="mobile-bottom-nav-btn">
-            <i class="fas fa-heart"></i>
-            <span>Омилени</span>
-        </a>
-
-        <div class="mobile-bottom-nav-selector">
-            <select id="mobileBottomListSelector" class="mobile-bottom-list-selector">
-                <option value="">-- Избери листа --</option>
-            </select>
-        </div>
-
-        <a href="{% url 'view_lists' %}" class="mobile-bottom-nav-btn">
-            <i class="fas fa-list"></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, isMobile = false) {
-            form.addEventListener('submit', function (e) {
-                e.preventDefault();
-
-                const originalQuery = input.value.trim();
-                const cyrillicQuery = transliterateLatinToCyrillic(originalQuery);
-
-                const originalInput = document.createElement('input');
-                originalInput.type = 'hidden';
-                originalInput.name = 'original_search';
-                originalInput.value = originalQuery;
-                form.appendChild(originalInput);
-
-                const cyrillicInput = document.createElement('input');
-                cyrillicInput.type = 'hidden';
-                cyrillicInput.name = 'cyrillic_search';
-                cyrillicInput.value = cyrillicQuery;
-                form.appendChild(cyrillicInput);
-
-                form.submit();
-            });
-
-            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 = suggestion;
-                                    suggestionsDiv.style.display = 'none';
-                                    form.dispatchEvent(new Event('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';
-                    form.dispatchEvent(new Event('submit'));
-                }
-            });
-
-            if (isMobile) {
-                const searchButton = form.querySelector('button[type="submit"]');
-                if (searchButton) {
-                    searchButton.addEventListener('click', function (e) {
-                        e.preventDefault();
-                        form.dispatchEvent(new Event('submit'));
-                    });
-                }
-            }
-        }
-
-        setupSearch(searchInput, searchForm);
-        setupSearch(mobileSearchInput, mobileSearchForm, true);
-
-        document.addEventListener('click', function (e) {
-            if (!searchInput.contains(e.target) &&
-                !mobileSearchInput.contains(e.target) &&
-                !suggestionsDiv.contains(e.target)) {
-                suggestionsDiv.style.display = 'none';
-            }
-        });
-    });
-
-    document.addEventListener("DOMContentLoaded", function () {
-        fetch('/api/lists/')
-            .then(response => response.json())
-            .then(data => {
-                const dropdown = document.getElementById('listSelector');
-                const mobileDropdown = document.getElementById('mobileListSelector');
-                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);
-                    }
-                });
-
-                const savedListId = localStorage.getItem('selectedListId');
-                if (savedListId) {
-                    if (dropdown) dropdown.value = savedListId;
-                    if (mobileDropdown) mobileDropdown.value = savedListId;
-                    if (mobileBottomDropdown) mobileBottomDropdown.value = savedListId;
-                }
-            });
-
-        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;
-                localStorage.setItem('selectedListId', selectedValue);
-
-                listSelectors.forEach(s => {
-                    if (s !== this) {
-                        s.value = selectedValue;
-                    }
-                });
-            });
-        });
-    });
-
-    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("Грешка: " + result.message);
-                    }
-                } catch (error) {
-                    console.error("Fetch error:", error);
-                    alert("Настана грешка. Обидете се повторно.");
-                }
-            });
-        });
-
-        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');
-            void button.offsetWidth;
-            button.classList.add('pulse-on-click');
-        });
-    });
-
-    document.addEventListener('DOMContentLoaded', function () {
-        if (typeof initializePriceChart === 'function') {
-            initializePriceChart();
-        }
-    });
-</script>
-</body>
-</html>
Index: main/templates/main/home.html
===================================================================
--- main/templates/main/home.html	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ main/templates/main/home.html	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
@@ -1,3 +1,3 @@
-{% extends 'main/index.html' %}
+{% extends 'main/base.html' %}
 {% block content %}
     This is the home page!
Index: in/templates/main/index.html
===================================================================
--- main/templates/main/index.html	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ 	(revision )
@@ -1,1220 +1,0 @@
-{% extends 'main/header.html' %}
-{% load category_filters %}
-{% load custom_filters %}
-{% load static %}
-{% 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>Home</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-        <style>
-            /* Common Styles */
-            :root {
-                --primary-color: #2e652e;
-                --primary-dark: #1f3f1f;
-                --secondary-color: white; /* Text color */
-                --light-bg: #f5f5f5;
-                --white: #ffffff;
-                --text-dark: #333333;
-                --text-light: #666666;
-                --border-color: #e0e0e0;
-                --error-color: #e74c3c;
-            {#--orange-light: rgba(249,139,36,0.85);#} --orange-light: rgba(253, 216, 53, 0.85);
-                --orange-dark: #F2C9A1;
-            {#--orange-solid: #f98b24;#} --orange-solid: rgba(246, 215, 27, 0.85);
-                color: rgba(246, 193, 52, 0.85);
-                color: rgba(246, 215, 27, 0.85)
-            }
-
-            body {
-                font-family: Arial, sans-serif;
-                margin: 0;
-                padding: 0;
-                display: flex;
-                flex-direction: column;
-                min-height: 100vh;
-                background-color: var(--light-bg);
-                color: var(--text-dark);
-                line-height: 1.6;
-            }
-
-            /* Main Content */
-            .main-content {
-                display: flex;
-                max-width: 1200px;
-                margin: 20px auto;
-                padding: 0 15px;
-                gap: 20px;
-            }
-
-            /* Left Sidebar */
-            .left-sidebar {
-                width: 250px;
-            }
-
-            .sidebar-section {
-                background-color: var(--white);
-                border-radius: 8px;
-                padding: 15px;
-                margin-bottom: 20px;
-                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-                transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
-                box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            }
-
-            .sidebar-section:hover {
-                transform: translateY(-3px);
-                box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-            }
-
-            .sidebar-section h3 {
-                color: var(--white);
-                margin-bottom: 15px;
-                padding-bottom: 10px;
-                border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-            }
-
-            /* Popular Categories */
-            .popular-categories {
-                display: grid;
-                grid-template-columns: repeat(1, 1fr);
-                gap: 15px;
-                margin-bottom: 20px;
-            }
-
-            .popular-category {
-                background-color: var(--white);
-                border-radius: 8px;
-                overflow: hidden;
-                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-                transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-                text-align: center;
-            }
-
-            .popular-category:hover {
-                transform: translateY(-5px);
-                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-            }
-
-            .popular-category-image {
-                height: 100px;
-                background-size: cover;
-                background-position: center;
-                transition: transform 0.4s ease;
-            }
-
-            .popular-category:hover .popular-category-image {
-                transform: scale(1.05);
-            }
-
-            .popular-category-title {
-                padding: 12px;
-                font-weight: 600;
-                color: var(--primary-color);
-                transition: color 0.3s ease;
-            }
-
-            .popular-category:hover .popular-category-title {
-                color: var(--orange-solid);
-            }
-
-            /* Main Content Area */
-            .content-area {
-                flex-grow: 1;
-            }
-
-            /* ====== BANNER STYLES ====== */
-            .banner-container {
-                margin: 0 auto 30px;
-                max-width: 1200px;
-                position: relative;
-                border-radius: 16px;
-                overflow: hidden;
-                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
-            }
-
-            .banner-slides {
-                position: relative;
-                width: 100%;
-                height: 400px;
-                overflow: hidden;
-            }
-
-            .banner-slide {
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                background-size: cover;
-                background-position: center;
-                display: flex;
-                align-items: center;
-                transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-                opacity: 0;
-                transform: scale(1.02);
-            }
-
-            .banner-slide.active {
-                opacity: 1;
-                z-index: 1;
-                transform: scale(1);
-            }
-
-            .banner-overlay {
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                background: linear-gradient(90deg, rgba(23, 47, 23, 0.85) 0%, rgba(42, 82, 42, 0.85) 100%);
-                transition: opacity 0.8s ease;
-            }
-
-            .banner-content {
-                position: relative;
-                z-index: 2;
-                padding: 0 60px;
-                max-width: 600px;
-                color: white;
-                text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
-            }
-
-            .banner-title {
-                font-size: 2.8rem;
-                font-weight: 800;
-                margin-bottom: 15px;
-                line-height: 1.2;
-                color: var(--secondary-color);
-                text-shadow: none;
-                transition: all 0.8s ease;
-            }
-
-            .banner-subtitle {
-                font-size: 1.3rem;
-                margin-bottom: 25px;
-                opacity: 0.9;
-                transition: all 0.8s ease;
-                color: var(--secondary-color);
-            }
-
-            .banner-btn {
-                display: inline-block;
-                padding: 12px 30px;
-                background-color: var(--orange-solid);
-                color: var(--secondary-color);
-                font-weight: 700;
-                border-radius: 50px;
-                text-decoration: none;
-                box-shadow: 0 4px 15px rgba(249, 139, 36, 0.3);
-                transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-                border: none;
-                cursor: pointer;
-            }
-
-            .banner-btn:hover {
-                transform: translateY(-3px);
-                box-shadow: 0 8px 25px rgba(249, 139, 36, 0.4);
-                background-color: var(--orange-light);
-            }
-
-            .banner-nav {
-                position: absolute;
-                top: 50%;
-                transform: translateY(-50%);
-                width: 50px;
-                height: 50px;
-                background: rgba(255, 255, 255, 0.2);
-                backdrop-filter: blur(5px);
-                border-radius: 50%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                color: white;
-                font-size: 20px;
-                cursor: pointer;
-                z-index: 10;
-                transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-                border: 1px solid rgba(255, 255, 255, 0.3);
-                opacity: 0.7;
-            }
-
-            .banner-nav:hover {
-                background: rgba(255, 255, 255, 0.3);
-                opacity: 1;
-                transform: translateY(-50%) scale(1.1);
-            }
-
-            .banner-prev {
-                left: 20px;
-            }
-
-            .banner-next {
-                right: 20px;
-            }
-
-            .banner-dots {
-                position: absolute;
-                bottom: 20px;
-                left: 0;
-                right: 0;
-                display: flex;
-                justify-content: center;
-                gap: 10px;
-                z-index: 10;
-            }
-
-            .banner-dot {
-                width: 12px;
-                height: 12px;
-                border-radius: 50%;
-                background: rgba(255, 255, 255, 0.5);
-                cursor: pointer;
-                transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            }
-
-            .banner-dot.active {
-                background: var(--orange-solid);
-                transform: scale(1.3);
-            }
-
-            .banner-dot:hover {
-                transform: scale(1.2);
-            }
-
-            /* Animation */
-            @keyframes fadeInUp {
-                from {
-                    opacity: 0;
-                    transform: translateY(20px);
-                }
-                to {
-                    opacity: 1;
-                    transform: translateY(0);
-                }
-            }
-
-            .banner-content > * {
-                animation: fadeInUp 0.8s ease forwards;
-            }
-
-            .banner-content h1 {
-                animation-delay: 0.3s;
-            }
-
-            .banner-content p {
-                animation-delay: 0.5s;
-            }
-
-            .banner-content a {
-                animation-delay: 0.7s;
-            }
-
-            /* Section Titles */
-            .section-title {
-                font-size: 1.5rem;
-                font-weight: 600;
-                margin-bottom: 20px;
-                color: var(--primary-color);
-                position: relative;
-                padding-bottom: 10px;
-            }
-
-            .section-title::after {
-                content: '';
-                position: absolute;
-                left: 0;
-                bottom: 0;
-                width: 50px;
-                height: 3px;
-                background: linear-gradient(to right, var(--primary-color), var(--orange-solid));
-                border-radius: 3px;
-            }
-
-            /* Market Flyers */
-            .market-flyers {
-                background-color: var(--white);
-                border-radius: 8px;
-                padding: 20px;
-                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-                transition: transform 0.4s ease, box-shadow 0.4s ease;
-            }
-
-            .market-flyers:hover {
-                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-            }
-
-            .flyers-container {
-                display: grid;
-                grid-template-columns: repeat(3, 1fr);
-                gap: 20px;
-            }
-
-            .flyer-card {
-                background: var(--white);
-                border-radius: 8px;
-                overflow: hidden;
-                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-                transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            }
-
-            .flyer-card:hover {
-                transform: translateY(-5px);
-                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
-            }
-
-            .flyer-header {
-                padding: 15px;
-                background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
-                text-align: center;
-                color: white;
-            }
-
-            .header-search input {
-                width: 97%;
-            }
-
-            .flyer-header h3 {
-                margin: 0;
-                font-size: 1.2rem;
-                font-weight: 600;
-            }
-
-            .flyer-products {
-                padding: 15px;
-            }
-
-            .flyer-product {
-                display: flex;
-                align-items: center;
-                gap: 15px;
-                padding: 10px 0;
-                border-bottom: 1px solid var(--border-color);
-                transition: transform 0.3s ease;
-            }
-
-            .flyer-product:hover {
-                transform: translateX(5px);
-            }
-
-            .flyer-product img {
-                width: 60px;
-                height: 60px;
-                object-fit: cover;
-                border-radius: 5px;
-                transition: transform 0.3s ease;
-            }
-
-            .flyer-product:hover img {
-                transform: scale(1.05);
-            }
-
-            .product-info {
-                flex: 1;
-            }
-
-            .product-name {
-                display: block;
-                font-weight: 500;
-                margin-bottom: 5px;
-                font-size: 14px;
-                transition: color 0.3s ease;
-            }
-
-            .flyer-product:hover .product-name {
-                color: var(--orange-solid);
-            }
-
-            .product-price {
-                display: flex;
-                gap: 10px;
-                font-size: 14px;
-            }
-
-            .old-price {
-                text-decoration: line-through;
-                color: #999;
-            }
-
-            .new-price {
-                color: var(--error-color);
-                font-weight: bold;
-            }
-
-            .view-all-btn {
-                width: 100%;
-                padding: 10px;
-                background-color: var(--orange-solid);
-                color: var(--secondary-color);
-                border: none;
-                font-weight: bold;
-                cursor: pointer;
-                transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-                border-radius: 4px;
-                margin-top: 10px;
-            }
-
-            .view-all-btn:hover {
-                background-color: var(--orange-light);
-                transform: translateY(-2px);
-                box-shadow: 0 4px 8px rgba(249, 139, 36, 0.3);
-            }
-
-            /* Footer */
-            footer {
-                background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
-                color: white;
-                padding: 40px 20px;
-                margin-top: auto;
-            }
-
-            .footer-content {
-                max-width: 1200px;
-                margin: 0 auto;
-                display: grid;
-                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-                gap: 30px;
-            }
-
-            .footer-section h3 {
-                margin-bottom: 20px;
-                font-size: 1.2rem;
-                color: var(--orange-light);
-                position: relative;
-                padding-bottom: 10px;
-            }
-
-            .footer-section h3::after {
-                content: '';
-                position: absolute;
-                left: 0;
-                bottom: 0;
-                width: 40px;
-                height: 2px;
-                background: var(--orange-light);
-            }
-
-            .footer-section p, .footer-section a {
-                color: #ddd;
-                margin-bottom: 10px;
-                display: block;
-                text-decoration: none;
-                transition: all 0.3s ease;
-                font-size: 14px;
-            }
-
-            .footer-section a:hover {
-                color: var(--orange-light);
-                transform: translateX(5px);
-                text-decoration: none;
-            }
-
-            .footer-section.social a {
-                display: inline-flex;
-                align-items: center;
-                gap: 8px;
-                transition: transform 0.3s ease;
-            }
-
-            .footer-section.social a:hover {
-                transform: translateX(5px);
-            }
-
-            .copyright {
-                text-align: center;
-                padding-top: 20px;
-                margin-top: 20px;
-                border-top: 1px solid rgba(255, 255, 255, 0.2);
-                color: #bbb;
-                font-size: 0.9rem;
-            }
-
-            /* Message Styling */
-            .message-container {
-                position: fixed;
-                top: 20px;
-                right: 20px;
-                z-index: 1000;
-                max-width: 400px;
-            }
-
-            .alert {
-                padding: 15px;
-                margin-bottom: 10px;
-                border-radius: 4px;
-                position: relative;
-                background-color: #f8f9fa;
-                border-left: 4px solid #6c757d;
-                transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-                transform: translateX(100%);
-                opacity: 0;
-            }
-
-            .alert.show {
-                transform: translateX(0);
-                opacity: 1;
-            }
-
-            /* Modal */
-            .modal {
-                display: none;
-                position: fixed;
-                z-index: 1000;
-                left: 0;
-                top: 0;
-                width: 100%;
-                height: 100%;
-                background-color: rgba(0, 0, 0, 0.7);
-                overflow-y: auto;
-                opacity: 0;
-                transition: opacity 0.4s ease;
-            }
-
-            .modal.show {
-                opacity: 1;
-            }
-
-            .modal-content {
-                background-color: #fefefe;
-                margin: 5% auto;
-                padding: 30px;
-                border-radius: 15px;
-                max-width: 900px;
-                width: 90%;
-                box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
-                position: relative;
-                transform: translateY(-20px);
-                transition: transform 0.4s ease;
-            }
-
-            .modal.show .modal-content {
-                transform: translateY(0);
-            }
-
-            .close-modal {
-                position: absolute;
-                right: 25px;
-                top: 25px;
-                color: #aaa;
-                font-size: 28px;
-                font-weight: bold;
-                cursor: pointer;
-                transition: all 0.3s ease;
-            }
-
-            .close-modal:hover {
-                color: var(--orange-solid);
-                transform: rotate(90deg);
-            }
-
-            .modal-title {
-                font-size: 1.8rem;
-                color: var(--primary-color);
-                margin-bottom: 20px;
-                padding-bottom: 10px;
-                border-bottom: 2px solid var(--primary-color);
-                display: flex;
-                align-items: center;
-                gap: 10px;
-            }
-
-            .modal-products-grid {
-                display: grid;
-                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-                gap: 25px;
-                margin-top: 20px;
-            }
-
-            .modal-product {
-                background: var(--white);
-                border-radius: 10px;
-                overflow: hidden;
-                box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
-                transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            }
-
-            .modal-product:hover {
-                transform: translateY(-8px);
-                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
-            }
-
-            .modal-product img {
-                width: 100%;
-                height: 180px;
-                object-fit: cover;
-                border-bottom: 1px solid var(--border-color);
-                transition: transform 0.4s ease;
-            }
-
-            .modal-product:hover img {
-                transform: scale(1.05);
-            }
-
-            .modal-product-info {
-                padding: 15px;
-            }
-
-            .modal-product-name {
-                font-size: 1rem;
-                font-weight: 600;
-                margin-bottom: 10px;
-                color: var(--text-dark);
-                display: block;
-                transition: color 0.3s ease;
-            }
-
-            .modal-product:hover .modal-product-name {
-                color: var(--orange-solid);
-            }
-
-            .modal-product-price {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-            }
-
-            .modal-old-price {
-                text-decoration: line-through;
-                color: #999;
-                font-size: 0.9rem;
-            }
-
-            .modal-new-price {
-                color: var(--error-color);
-                font-weight: bold;
-                font-size: 1.1rem;
-            }
-
-            .discount-badge {
-                background-color: var(--error-color);
-                color: white;
-                padding: 3px 8px;
-                border-radius: 4px;
-                font-size: 0.8rem;
-                font-weight: bold;
-                margin-left: 10px;
-            }
-
-            .no-products {
-                text-align: center;
-                padding: 40px;
-                color: var(--text-light);
-                font-size: 1.1rem;
-                grid-column: 1 / -1;
-            }
-
-            .loading-spinner {
-                display: inline-block;
-                width: 40px;
-                height: 40px;
-                border: 4px solid rgba(46, 101, 46, 0.2);
-                border-radius: 50%;
-                border-top-color: var(--primary-color);
-                animation: spin 1s ease-in-out infinite;
-                margin: 20px auto;
-                grid-column: 1 / -1;
-            }
-
-            @keyframes spin {
-                to {
-                    transform: rotate(360deg);
-                }
-            }
-
-            /* Responsiveness */
-            @media (max-width: 1024px) {
-                .flyers-container {
-                    grid-template-columns: repeat(2, 1fr);
-                }
-
-                .banner-title {
-                    font-size: 2.4rem;
-                }
-
-                .banner-subtitle {
-                    font-size: 1.1rem;
-                }
-            }
-
-            @media (max-width: 768px) {
-                .main-content {
-                    flex-direction: column;
-                    padding: 10px;
-                }
-
-                .content-area {
-                    order: 1;
-                }
-
-                .left-sidebar {
-                    width: 100%;
-                    order: 2;
-                    margin-top: 20px;
-                }
-
-                .popular-categories {
-                    grid-template-columns: repeat(2, 1fr);
-                }
-
-                .banner-slides {
-                    height: 350px;
-                }
-
-                .banner-content {
-                    padding: 0 30px;
-                    text-align: center;
-                }
-
-                .banner-title {
-                    font-size: 2rem;
-                }
-
-                .banner-nav {
-                    width: 40px;
-                    height: 40px;
-                    font-size: 16px;
-                }
-
-                .flyers-container {
-                    grid-template-columns: 1fr;
-                }
-
-                .modal-products-grid {
-                    grid-template-columns: 1fr;
-                }
-            }
-
-            @media (max-width: 576px) {
-                .banner-slides {
-                    height: 300px;
-                }
-
-                .banner-title {
-                    font-size: 1.8rem;
-                }
-
-                .banner-subtitle {
-                    font-size: 1rem;
-                }
-
-                .banner-btn {
-                    padding: 10px 20px;
-                }
-
-                .popular-categories {
-                    grid-template-columns: 1fr;
-                }
-            }
-
-            a {
-                text-decoration: none;
-                color: inherit;
-            }
-
-            #store-name {
-                margin-left: 5px;
-                color: var(--orange-solid);
-            }
-        </style>
-    </head>
-    <body>
-
-    <div class="message-container">
-        {% if messages %}
-            {% for message in messages %}
-                <div class="alert alert-{{ message.tags }}">
-                    {{ message }}
-                    <span class="close-btn" onclick="this.parentElement.remove()">×</span>
-                </div>
-            {% endfor %}
-        {% endif %}
-    </div>
-
-    <!-- Main Content -->
-    <div class="main-content">
-        <main class="content-area">
-            <div class="banner-container">
-                <div class="banner-slides">
-                    <!-- Banner 1 -->
-                    <div class="banner-slide active" style="background-image: url('{% static 'images/baner1.jpg' %}')">
-                        <div class="banner-overlay"></div>
-                        <div class="banner-content">
-                            <h1 class="banner-title">Сите производи на едно место!</h1>
-                            <p class="banner-subtitle">Пронајди ги најевтините производи со <span
-                                    style="color: rgba(246,215,27,0.85)"><b>Штедко</b></span></p>
-                            <a href="{% url 'product_list' %}" class="banner-btn">Започни сега</a>
-                        </div>
-                    </div>
-
-                    <!-- Banner 2 -->
-                    <div class="banner-slide" style="background-image: url('{% static 'images/baner2.jpg' %}')">
-                        <div class="banner-overlay"></div>
-                        <div class="banner-content">
-                            <h1 class="banner-title">Не ги пропуштај дневните попусти!</h1>
-                            <p class="banner-subtitle">До 70% попуст на избрани производи</p>
-                            <a href="{% url 'product_list' %}?discounted=1" class="banner-btn">Види попусти</a>
-                        </div>
-                    </div>
-
-                    <!-- Banner 3 -->
-                    <div class="banner-slide" style="background-image: url('{% static 'images/kreiraj_listi.png' %}')">
-                        <div class="banner-overlay"></div>
-                        <div class="banner-content">
-                            <h1 class="banner-title">Направи си <span style="color: rgba(246,215,27,0.85)">листа</span>
-                                за пазарење и дознај</h1>
-                            <p class="banner-subtitle">во кој маркет е <span style="color: rgba(246,215,27,0.85)">најевтино</span>!
-                            </p>
-{#                            <a href="{% url 'product_list' %}" >Истражувај</a>#}
-                        </div>
-                    </div>
-                </div>
-
-                <button class="banner-nav banner-prev">❮</button>
-                <button class="banner-nav banner-next">❯</button>
-
-                <div class="banner-dots">
-                    <div class="banner-dot active"></div>
-                    <div class="banner-dot"></div>
-                    <div class="banner-dot"></div>
-                </div>
-            </div>
-
-            <section class="market-flyers">
-                <h2 class="section-title">Актуелни Попусти</h2>
-                <div class="flyers-container">
-                    {% if stores_with_products %}
-                        {% for store in stores_with_products %}
-                            <div class="flyer-card">
-                                <div class="flyer-header">
-                                    <h3>{{ store.name }}</h3>
-                                </div>
-                                <div class="flyer-products">
-                                    {% if store.products %}
-                                        {% for product in store.products|slice:":3" %}
-                                            <a href="{% url 'product_detail' product.id %}">
-                                                <div class="flyer-product">
-                                                    <img src="{{ product.image_url }}" alt="{{ product.name }}"
-                                                         onerror="this.onerror=null;this.src='{% static 'images/no-image.png' %}'">
-                                                    <div class="product-info">
-                                                        <span class="product-name">{{ product.name }}</span>
-                                                        <span class="product-price">
-                                                        <span class="old-price">{{ product.price }} ден.</span>
-                                                        <span class="new-price">{{ product.actual_price }} ден.</span>
-                                                    </span>
-                                                    </div>
-                                                </div>
-                                            </a>
-                                        {% endfor %}
-                                    {% else %}
-                                        <p>Нема достапни попусти за {{ store.name }}.</p>
-                                    {% endif %}
-                                </div>
-                                <button class="view-all-btn" data-store="{{ store.name }}"
-                                        style="box-shadow: 0 8px 25px rgba(249, 139, 36, 0.4);">
-                                    Види ги сите попусти
-                                </button>
-                            </div>
-                        {% endfor %}
-                    {% else %}
-                        <p>No flyer data available. Please log in or check back later.</p>
-                    {% endif %}
-                </div>
-            </section>
-        </main>
-        <aside class="left-sidebar">
-            <div class="sidebar-section">
-                <h3 style="background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); padding: 10px; border-radius: 10px">
-                    Популарни категории</h3>
-                <div class="popular-categories">
-                    <a href="{% url 'product_list' %}?category=Dairy" class="popular-category">
-                        <div class="popular-category-image"
-                             style="background-image: url('{% static 'images/categories/dairy.jpg' %}')"></div>
-                        <div class="popular-category-title">Млечни производи</div>
-                    </a>
-                    <a href="{% url 'product_list' %}?category=Vegetables" class="popular-category">
-                        <div class="popular-category-image"
-                             style="background-image: url('{% static 'images/categories/vegetables.jpg' %}')"></div>
-                        <div class="popular-category-title">Зеленчук</div>
-                    </a>
-                    <a href="{% url 'product_list' %}?category=Drinks" class="popular-category">
-                        <div class="popular-category-image"
-                             style="background-image: url('{% static 'images/categories/drinks.jpg' %}')"></div>
-                        <div class="popular-category-title">Пијалоци</div>
-                    </a>
-                    <a href="{% url 'product_list' %}?category=Cosmetics" class="popular-category">
-                        <div class="popular-category-image"
-                             style="background-image: url('{% static 'images/categories/cosmetics.jpg' %}')"></div>
-                        <div class="popular-category-title">Козметика</div>
-                    </a>
-                </div>
-            </div>
-        </aside>
-    </div>
-
-    <!-- Modal for showing all discounted products -->
-    <div id="products-modal" class="modal">
-        <div class="modal-content">
-            <span class="close-modal">×</span>
-            <h2 class="modal-title">
-                <i class="fas fa-tags"></i>
-                Попусти во <span id="store-name"></span>
-            </h2>
-            <div class="modal-products-grid" id="modal-products">
-                <!-- Products will be loaded here via JavaScript -->
-            </div>
-        </div>
-    </div>
-
-    <!-- Footer -->
-    <footer>
-        <div class="footer-content">
-            <div class="footer-section">
-                <h3>За нас</h3>
-                <p>Ние сме водечка онлајн продавница со најдобри цени и квалитетни производи.</p>
-            </div>
-            <div class="footer-section">
-                <h3>Контакт</h3>
-                <p>Телефон: +389 70 123 456</p>
-                <p>Email: kontakt@nasataprodavnica.com</p>
-                <p>Адреса: Улица ББ, Скопје</p>
-            </div>
-            <div class="footer-section">
-                <h3>Брзи линкови</h3>
-                <a href="{% url 'home' %}">Дома</a>
-                <a href="{% url 'product_list' %}">Каталог</a>
-                <a href="#">Услови на користење</a>
-                <a href="#">Политика на приватност</a>
-            </div>
-            <div class="footer-section social">
-                <h3>Следете нè</h3>
-                <a href="#" target="_blank"><i class="fab fa-facebook-f"></i> Facebook</a>
-                <a href="#" target="_blank"><i class="fab fa-instagram"></i> Instagram</a>
-                <a href="#" target="_blank"><i class="fab fa-twitter"></i> Twitter</a>
-            </div>
-        </div>
-        <div class="copyright">
-            © 2023 Нашата Продавница. Сите права се задржани.
-        </div>
-    </footer>
-
-    <script>
-        // Banner carousel functionality
-        document.addEventListener('DOMContentLoaded', function () {
-            const bannerSlides = document.querySelectorAll('.banner-slide');
-            const prevBtn = document.querySelector('.banner-prev');
-            const nextBtn = document.querySelector('.banner-next');
-            const dots = document.querySelectorAll('.banner-dot');
-            const bannerContainer = document.querySelector('.banner-container');
-
-            let currentIndex = 0;
-            let interval;
-            let touchStartX = 0;
-            let touchEndX = 0;
-            const ROTATION_INTERVAL = 10000; // 10 seconds
-
-            // Initialize the first banner
-            showSlide(currentIndex);
-
-            // Auto-rotate banners
-            function startAutoRotate() {
-                interval = setInterval(nextSlide, ROTATION_INTERVAL);
-            }
-
-            function resetInterval() {
-                clearInterval(interval);
-                startAutoRotate();
-            }
-
-            function showSlide(index) {
-                // Hide all slides
-                bannerSlides.forEach(slide => {
-                    slide.classList.remove('active');
-                });
-
-                // Show current slide
-                bannerSlides[index].classList.add('active');
-
-                // Update dots
-                dots.forEach(dot => dot.classList.remove('active'));
-                dots[index].classList.add('active');
-            }
-
-            function nextSlide() {
-                currentIndex = (currentIndex + 1) % bannerSlides.length;
-                showSlide(currentIndex);
-            }
-
-            function prevSlide() {
-                currentIndex = (currentIndex - 1 + bannerSlides.length) % bannerSlides.length;
-                showSlide(currentIndex);
-            }
-
-            // Button controls
-            nextBtn.addEventListener('click', function () {
-                nextSlide();
-                resetInterval();
-            });
-
-            prevBtn.addEventListener('click', function () {
-                prevSlide();
-                resetInterval();
-            });
-
-            // Dot navigation
-            dots.forEach((dot, index) => {
-                dot.addEventListener('click', function () {
-                    currentIndex = index;
-                    showSlide(currentIndex);
-                    resetInterval();
-                });
-            });
-
-            // Touch events for mobile swipe
-            bannerContainer.addEventListener('touchstart', function (e) {
-                touchStartX = e.changedTouches[0].screenX;
-                clearInterval(interval);
-            }, {passive: true});
-
-            bannerContainer.addEventListener('touchend', function (e) {
-                touchEndX = e.changedTouches[0].screenX;
-                handleSwipe();
-                resetInterval();
-            }, {passive: true});
-
-            function handleSwipe() {
-                const threshold = 50; // Minimum swipe distance
-
-                if (touchEndX < touchStartX - threshold) {
-                    // Swiped left - next slide
-                    nextSlide();
-                } else if (touchEndX > touchStartX + threshold) {
-                    // Swiped right - previous slide
-                    prevSlide();
-                }
-            }
-
-            // Start auto-rotation
-            startAutoRotate();
-
-            // Pause on hover
-            bannerContainer.addEventListener('mouseenter', function () {
-                clearInterval(interval);
-            });
-
-            bannerContainer.addEventListener('mouseleave', function () {
-                resetInterval();
-            });
-
-            // Show messages with animation
-            document.querySelectorAll('.alert').forEach(alert => {
-                setTimeout(() => {
-                    alert.classList.add('show');
-                }, 100);
-            });
-        });
-
-        // Modal functionality
-        document.addEventListener('DOMContentLoaded', function () {
-            const modal = document.getElementById('products-modal');
-            const modalTitle = document.getElementById('store-name');
-            const modalProducts = document.getElementById('modal-products');
-            const closeModal = document.querySelector('.close-modal');
-
-            document.querySelectorAll('.view-all-btn').forEach(button => {
-                button.addEventListener('click', function () {
-                    const store = this.getAttribute('data-store');
-                    modalTitle.textContent = store;
-                    modalProducts.innerHTML = '<div class="loading-spinner"></div>';
-
-                    // Show modal with fade in
-                    modal.style.display = 'block';
-                    setTimeout(() => {
-                        modal.classList.add('show');
-                    }, 10);
-
-                    fetch(`/get-store-products/?store=${encodeURIComponent(store)}`, {
-                        credentials: 'same-origin'
-                    })
-                        .then(response => {
-                            if (!response.ok) {
-                                throw new Error('Network response was not ok');
-                            }
-                            return response.json();
-                        })
-                        .then(data => {
-                            if (data.products && data.products.length > 0) {
-                                modalProducts.innerHTML = '';
-                                data.products.forEach(product => {
-                                    const discount = Math.round(((product.price - product.actual_price) / product.price) * 100);
-
-                                    const productElement = document.createElement('div');
-                                    productElement.className = 'modal-product';
-                                    productElement.innerHTML = `
-                                    <a href="/product/${product.id}/">
-                                        <img src="${product.image_url}" alt="${product.name}" onerror="this.onerror=null;this.src='{% static 'images/no-image.png' %}'">
-                                        <div class="modal-product-info">
-                                            <span class="modal-product-name">${product.name}</span>
-                                            <div class="modal-product-price">
-                                                <span class="modal-old-price">${product.price} ден.</span>
-                                                <div>
-                                                    <span class="modal-new-price">${product.actual_price} ден.</span>
-                                                    <span class="discount-badge">-${discount}%</span>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </a>
-                                `;
-                                    modalProducts.appendChild(productElement);
-                                });
-                            } else {
-                                modalProducts.innerHTML = '<div class="no-products"><i class="fas fa-box-open" style="font-size: 2rem; color: #ccc; margin-bottom: 15px;"></i><p>Нема достапни попусти за оваа продавница.</p></div>';
-                            }
-                        })
-                        .catch(error => {
-                            console.error('Error:', error);
-                            modalProducts.innerHTML = `
-                            <div class="no-products">
-                                <i class="fas fa-exclamation-triangle" style="font-size: 2rem; color: #e74c3c; margin-bottom: 15px;"></i>
-                                <p>Грешка при вчитување на производите.</p>
-                                <a href="{% url 'account_login' %}">Најави се</a>
-                            </div>
-                        `;
-                        });
-
-                    document.body.style.overflow = 'hidden';
-                });
-            });
-
-            function closeModalHandler() {
-                modal.classList.remove('show');
-                setTimeout(() => {
-                    modal.style.display = 'none';
-                    document.body.style.overflow = 'auto';
-                }, 400);
-            }
-
-            closeModal.addEventListener('click', closeModalHandler);
-
-            window.addEventListener('click', function (event) {
-                if (event.target === modal) {
-                    closeModalHandler();
-                }
-            });
-
-            // Auto-close messages after 5 seconds
-            setTimeout(() => {
-                document.querySelectorAll('.alert').forEach(alert => {
-                    alert.style.opacity = '0';
-                    setTimeout(() => alert.remove(), 300);
-                });
-            }, 5000);
-        });
-    </script>
-    </body>
-    </html>
-{% endblock %}
Index: main/templates/main/list_detail.html
===================================================================
--- main/templates/main/list_detail.html	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ main/templates/main/list_detail.html	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
@@ -1,29 +1,224 @@
-{% extends 'main/header.html' %}
-
 {% load static %}
-{% block content %}
-
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Shopping List</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
     <style>
-        :root {
-            --primary-color: #2e652e;
-            --secondary-color: #3498db;
-            --accent-color: #28a745;
-            --background-overlay: rgba(255, 255, 255, 0.97);
-            --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-            --transition: all 0.3s ease;
-        }
-
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-
+        body, html {
+            height: 100%;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: Arial, sans-serif;
+            background-image: url('{% static "images/baner1.jpg" %}');
+            background-size: cover;
+            background-position: center;
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+        }
+
+        body::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: inherit;
+            filter: blur(8px);
+            z-index: -1;
+        }
+
+        .shopping-list-wrapper {
+            display: flex;
+            justify-content: center;
+            padding: 20px;
+            width: 100%;
+            height: 100%;
+            overflow-y: auto;
+        }
+
+        .shopping-list-container {
+            max-width: 1000px;
+            width: 100%;
+            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;
+        }
+
+        .shopping-list-title {
+            text-align: center;
+            margin-bottom: 25px;
+            font-size: 28px;
+            color: #333;
+        }
+
+        .shopping-list-content {
+            margin-top: 20px;
+        }
+
+        .shopping-list-header {
+            display: grid;
+            grid-template-columns: 40px 1fr 120px 120px 120px;
+            gap: 20px;
+            margin-bottom: 15px;
+            font-weight: bold;
+            color: #555;
+        }
+
+        .shopping-list-header .header-item {
+            display: flex;
+            align-items: center;
+            justify-content: left;
+        }
+
+        .shopping-list-items {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .shopping-list-item {
+            display: grid;
+            grid-template-columns: 40px 1fr 120px 120px 120px;
+            gap: 20px;
+            align-items: center;
+            padding: 10px;
+            border-radius: 8px;
+            background-color: #f8f9fa;
+            transition: background-color 0.3s;
+        }
+
+        .shopping-list-item.checked {
+            background-color: #e9ecef;
+            text-decoration: line-through;
+            color: #888;
+        }
+
+        .checkbox input {
+            display: none;
+        }
+
+        .checkbox label {
+            width: 20px;
+            height: 20px;
+            border: 2px solid #3498db;
+            border-radius: 4px;
+            display: inline-block;
+            cursor: pointer;
+        }
+
+        .checkbox input:checked + label {
+            background-color: #3498db;
+        }
+
+        .checkbox input:checked + label::after {
+            content: '';
+            position: absolute;
+            top: 4px;
+            left: 7px;
+            width: 6px;
+            height: 12px;
+            border: solid white;
+            border-width: 0 3px 3px 0;
+            transform: rotate(45deg);
+        }
+
+        .actions button {
+            background-color: #e74c3c;
+            border-color: #e74c3c;
+            color: white;
+            padding: 6px 10px;
+            border-radius: 6px;
+            cursor: pointer;
+        }
+
+        .actions button:hover {
+            background-color: #c0392b;
+        }
+
+        .list-summary {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 30px;
+            padding: 15px 20px;
+            background-color: #f8f9fa;
+            border-radius: 8px;
+        }
+
+        .summary-item {
+            display: flex;
+            gap: 10px;
+        }
+
+        .summary-item span {
+            font-weight: 600;
+        }
+
+        .total-price {
+            color: #28a745;
+        }
+
+        .shopping-list-actions {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 20px;
+        }
+
+        .action-button {
+            padding: 12px 20px;
+            background-color: #3498db;
+            color: white;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 16px;
+        }
+
+        .action-button:hover {
+            background-color: #2980b9;
+        }
+
+        .back-button {
+            background-color: #6c757d;
+        }
+
+        @media (max-width: 768px) {
+            .shopping-list-header, .shopping-list-item {
+                grid-template-columns: 40px 1fr 1fr 100px;
+            }
+
+            .shopping-list-title {
+                font-size: 24px;
+            }
+
+            .list-summary {
+                flex-direction: column;
+                gap: 10px;
+            }
+        }
+
+        .quantity input {
+            width: 60px;
+            padding: 6px;
+            font-size: 16px;
+            border: 1px solid #ccc;
+            border-radius: 6px;
+            text-align: center;
+        }
+        a.action-button.back-button{
+            text-decoration: none;
+        }
         html, body {
             height: 100%;
-            font-family: Arial, sans-serif;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             background-image: url('{% static "images/baner1.jpg" %}');
             background-size: cover;
@@ -31,332 +226,151 @@
             background-repeat: no-repeat;
             background-attachment: fixed;
+            position: relative;
             overflow-x: hidden;
         }
 
-        body::before {
-            content: '';
-            position: fixed;
-            top: 0; left: 0; right: 0; bottom: 0;
-            background: inherit;
-            filter: blur(8px);
-            z-index: -1;
-        }
-
-        /* Sticky Price Summary */
-        .sticky-price-summary {
-            position: sticky;
-            top: 0;
-            background-color: rgba(46, 101, 46, 0.95);
-            color: white;
-            padding: 12px 30px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            z-index: 999;
-            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
-        }
-
-        .sticky-price-summary .summary-item {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            font-size: 15px;
-        }
-
-        .sticky-price-summary .summary-item span:first-child {
-            font-weight: 500;
-            margin-bottom: 5px;
-            letter-spacing: 0.5px;
-        }
-
-        .sticky-price-summary .summary-item span:last-child {
-            font-weight: 700;
-            font-size: 17px;
-        }
-
-        .sticky-price-summary .total-price span:last-child {
-            color: #fdd835;
-        }
-
-        .sticky-price-summary .group-button {
-            padding: 10px 20px;
-            background-color: #4caf50;
-            color: white;
-            border: none;
-            border-radius: 25px;
-            cursor: pointer;
-            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);
-        }
-
-        /* Main Content */
-        .shopping-list-wrapper {
-            display: flex;
-            justify-content: center;
-            align-items: flex-start;
-            gap: 20px;
-            padding: 30px;
-            width: 100%;
-            margin-top: 20px;
-        }
-
-        .shopping-list-container {
-            max-width: 1200px;
-            width: 100%;
-            background-color: var(--background-overlay);
-            padding: 35px;
-            border-radius: 12px;
-            box-shadow: var(--shadow);
-            border: 1px solid rgba(0, 0, 0, 0.05);
-        }
-
-        .shopping-list-title {
-            text-align: center;
-            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: 50px 60px 1fr 120px 140px 100px;
-            gap: 20px;
-            margin-bottom: 15px;
-            font-weight: 600;
-            color: white;
-            text-transform: uppercase;
-            font-size: 15px;
-            background: linear-gradient(135deg, #549249, #3a6b33);
-            padding: 18px 20px;
-            border-radius: 10px;
-            letter-spacing: 0.5px;
-        }
-
-        .shopping-list-items { display: flex; flex-direction: column; gap: 12px; }
-
-        .shopping-list-item {
-            display: grid;
-            grid-template-columns: 50px 60px 1fr 120px 140px 100px;
-            gap: 20px;
-            align-items: center;
-            padding: 18px 20px;
-            border-radius: 10px;
-            background-color: #fff;
-            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: #f8f9fa;
-            text-decoration: line-through;
-            color: #888;
-            opacity: 0.8;
-        }
-
-        .checkbox input { display: none; }
-
-        .checkbox label {
-            width: 22px; height: 22px;
-            border: 2px solid var(--secondary-color);
-            border-radius: 5px;
-            display: flex; align-items: center; justify-content: center;
-            cursor: pointer;
-            transition: var(--transition);
-        }
-
-        .checkbox input:checked + label {
-            background-color: var(--secondary-color);
-            border-color: var(--secondary-color);
-        }
-
-        .checkbox input:checked + label::after {
-            content: '✓'; color: white; font-size: 13px;
-        }
-
-        .quantity input {
-            width: 80px;
-            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);
-        }
-
-        .price, .store { font-weight: 500; color: #444; 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: 10px 18px;
-            border-radius: 8px;
-            cursor: pointer; font-size: 14px;
-            transition: var(--transition);
-            font-weight: 500; margin-right: -50px;
-        }
-
-        .remove-button:hover { background-color: #c0392b; transform: translateY(-1px); }
-
-        .product-image img { width: 50px; height: 50px; object-fit: cover; border-radius: 8px; border: 1px solid #eee; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
-
-        /* Alternative list styles */
-        #alternative-list {
-            margin:30px 0;
-            padding:20px;
-            background:#fffbe6;
-            border:1px solid #f0c36d;
-            border-radius:10px;
-            display:none;
-        }
-
-        #alternative-list h2 {
-            color:#e67e22;
-            margin-bottom:15px;
-            font-size:20px;
-        }
-
-        .alternative-item {
-            display:flex;
-            justify-content: space-between;
-            align-items:center;
-            padding:10px;
-            border-bottom:1px solid #ddd;
-        }
-
-        .alternative-item span {
-            display:block;
-        }
-
-        .alternative-total {
-            margin-top:15px;
-            font-weight:700;
-            font-size:16px;
-            text-align:right;
-            color:#27ae60;
-        }
 
     </style>
 </head>
 <body>
-<!-- Message Container -->
-<div class="message-container">
-    {% if messages %}
-        {% for message in messages %}
-            <div class="alert alert-{{ message.tags }}">
-                {{ message }}
-                <span class="close-btn" onclick="this.parentElement.remove()">×</span>
-            </div>
-        {% endfor %}
-    {% endif %}
-</div>
-
-<!-- Sticky Price Summary -->
-<div class="sticky-price-summary">
-    <div class="summary-item">
-        <span>Вкупно</span>
-        <span id="sticky-total-items">{{ items|length }}</span>
-    </div>
-    <div class="summary-item">
-        <span>Одбрани</span>
-        <span id="sticky-checked-items">0</span>
-    </div>
-    <div class="summary-item">
-        <span>Вкупна цена</span>
-        <span id="sticky-total-price-all">{{ total_price_all }} ден.</span>
-    </div>
-    <div class="summary-item total-price">
-        <span>Цена (одбрани)</span>
-        <span id="sticky-total-price">{{ total_price }} ден.</span>
-    </div>
-    <button id="group-by-store" class="group-button">Групирај по продавници</button>
-    <button id="find-cheaper" class="group-button" style="background-color:#f39c12;">Најди поевтина алтернатива</button>
-</div>
-
-<!-- Main Content -->
 <div class="shopping-list-wrapper">
     <div class="shopping-list-container">
-        <h1 class="shopping-list-title"><span>{{ shopping_list.name }}</span> - Листа на продукти</h1>
-        {% if items %}
-            <div class="shopping-list-header">
-                <div></div>
-                <div>Слика</div>
-                <div>Продукт</div>
-                <div>Количина</div>
-                <div>Цена</div>
-                <div>Продавница</div>
-            </div>
-            <div class="shopping-list-items">
-                {% for item in items %}
-                    <div class="shopping-list-item {% if item.checked %}checked{% endif %}" data-item-id="{{ item.id }}">
-                        <div class="checkbox">
-                            <input type="checkbox" class="item-checkbox" id="item-{{ item.id }}" {% if item.checked %}checked{% endif %}>
-                            <label for="item-{{ item.id }}"></label>
+        <h1 class="shopping-list-title"><span style="color: #2e652e">{{ shopping_list.name }}</span> - Листа на продукти</h1>
+
+        <div class="shopping-list-content">
+            {% if items %}
+                <div class="shopping-list-header">
+                    <div class="header-item checkbox"></div>
+                    <div class="header-item product">Продукт</div>
+                    <div class="header-item quantity">Количина</div>
+                    <div class="header-item price">Цена</div>
+{#                    <div class="header-item actions">Акции</div>#}
+                </div>
+
+                <div class="shopping-list-items">
+                    {% for item in items %}
+                        <div class="shopping-list-item {% if item.checked %}checked{% endif %}"
+                             data-item-id="{{ item.id }}">
+                            <div class="checkbox">
+                                <input type="checkbox" class="item-checkbox" id="item-{{ item.id }}"
+                                       {% if item.checked %}checked{% endif %}>
+                                <label for="item-{{ item.id }}"></label>
+                            </div>
+                            <div class="product">{{ item.product.name }}</div>
+                            <div class="quantity">
+                                <input type="number" class="quantity-input" min="1" value="{{ item.quantity }}"
+                                       data-price="{{ item.product.price }}">
+                            </div>
+                            <div class="price">{{ item.product.price }} ден.</div>
+                            <div class="actions">
+                                <button class="remove-button" data-item-id="{{ item.id }}">
+                                    <i class="fas fa-times"></i> Отстрани
+                                </button>
+                            </div>
                         </div>
-                        <div class="product-image">
-                            <img src="{{ item.product.image_url }}" alt="{{ 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 }}" data-price="{{ item.product.price }}">
-                        </div>
-                        <div class="price">{{ item.product.price }} ден.</div>
-                        <div class="store">{{ item.product.store }}</div>
-                        <div class="actions">
-                            <button class="remove-button" data-item-id="{{ item.id }}">Отстрани</button>
-                        </div>
+                    {% endfor %}
+                </div>
+
+                <div class="list-summary">
+                    <div class="summary-item">
+                        <span>Вкупно продукти:</span>
+                        <span id="total-items">{{ items.count }}</span>
                     </div>
-                {% endfor %}
-            </div>
-        {% else %}
-            <p style="text-align:center; color: #555; font-size: 16px; margin-top: 30px;">Немате додадено продукти во оваа листа.</p>
-        {% endif %}
-    </div>
-
-    <!-- Alternative List -->
-    <div id="alternative-list">
-        <h2>Поевтина алтернативна листа</h2>
-        <div id="alternative-items"></div>
-        <div id="alternative-total" class="alternative-total"></div>
+                    <div class="summary-item">
+                        <span>Одбрано:</span>
+                        <span id="checked-items">0</span>
+                    </div>
+                    <div class="summary-item">
+                        <span>Вкупна цена:</span>
+                        <span id="total-price-all">{{ total_price_all }} ден.</span>
+                    </div>
+                    <div class="summary-item total-price">
+                        <span>Вкупна цена (одбрани):</span>
+                        <span id="total-price">{{ total_price }} ден.</span>
+                    </div>
+                </div>
+
+            {% else %}
+                <p>Немате додадено продукти во оваа листа.</p>
+            {% endif %}
+        </div>
+
+        <div class="shopping-list-actions">
+{#            <button id="clear-checked" class="action-button" disabled>#}
+{#                <i class="fas fa-check-circle"></i> Исчисти одбрано#}
+{#            </button>#}
+            <a href="{% url 'product_list' %}" class="action-button back-button">
+                <i class="fas fa-arrow-left"></i> Назад до производи
+            </a>
+            <a href="{% url 'view_lists' %}" class="action-button back-button">
+                <i class="fas fa-arrow-left"></i> Назад до листи
+            </a>
+            {#            <a href="{% url 'lists.html' %}" class="action-button back-button">#}
+            {#                <i class="fas fa-arrow-left"></i> Назад до Листи#}
+            {#            </a>#}
+        </div>
     </div>
 </div>
 
 <script>
-document.addEventListener('DOMContentLoaded', () => {
+    document.addEventListener('DOMContentLoaded', function () {
+        const checkboxes = document.querySelectorAll('.item-checkbox');
+        const quantityInputs = document.querySelectorAll('.quantity-input');
+        const clearCheckedBtn = document.getElementById('clear-checked');
+        const checkedCounter = document.getElementById('checked-items');
+
+        function updateTotalPrice() {
+            let checkedPrice = 0;
+            let totalPriceAll = 0;
+
+            document.querySelectorAll('.shopping-list-item').forEach(item => {
+                const checkbox = item.querySelector('.item-checkbox');
+                const quantityInput = item.querySelector('.quantity-input');
+                const unitPrice = parseFloat(quantityInput.dataset.price);
+                const quantity = parseInt(quantityInput.value) || 0;
+                const totalItemPrice = unitPrice * quantity;
+
+                if (checkbox.checked) {
+                    checkedPrice += totalItemPrice;
+                }
+
+                totalPriceAll += totalItemPrice;
+            });
+
+            document.getElementById('total-price').textContent = checkedPrice + ' ден.';
+            document.getElementById('total-price-all').textContent = totalPriceAll + ' ден.';
+        }
+
+        function updateCheckedCount() {
+            const checkedCount = document.querySelectorAll('.item-checkbox:checked').length;
+            checkedCounter.textContent = checkedCount;
+            clearCheckedBtn.disabled = checkedCount === 0;
+            updateTotalPrice();
+        }
+
+        checkboxes.forEach(checkbox => {
+            checkbox.addEventListener('change', function () {
+                const listItem = this.closest('.shopping-list-item');
+                listItem.classList.toggle('checked', this.checked);
+                updateCheckedCount();
+            });
+        });
+
+        quantityInputs.forEach(input => {
+            input.addEventListener('input', updateTotalPrice);
+        });
+
+        updateCheckedCount();
+    });
+    document.addEventListener('DOMContentLoaded', function () {
+    // Function to get CSRF token
     function getCookie(name) {
         let cookieValue = null;
         if (document.cookie && document.cookie !== '') {
             const cookies = document.cookie.split(';');
-            for (let cookie of cookies) {
-                cookie = cookie.trim();
-                if (cookie.startsWith(name + '=')) {
-                    cookieValue = decodeURIComponent(cookie.slice(name.length + 1));
+            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;
                 }
@@ -368,135 +382,90 @@
     const csrftoken = getCookie('csrftoken');
 
-    function updateAllPriceDisplays() {
-        let checked = 0, all = 0, checkedCount = 0;
+    // Your existing checkbox and quantity handling code...
+    const checkboxes = document.querySelectorAll('.item-checkbox');
+    const quantityInputs = document.querySelectorAll('.quantity-input');
+    const clearCheckedBtn = document.getElementById('clear-checked');
+    const checkedCounter = document.getElementById('checked-items');
+
+    function updateTotalPrice() {
+        let checkedPrice = 0;
+        let totalPriceAll = 0;
+
         document.querySelectorAll('.shopping-list-item').forEach(item => {
-            const qty = parseInt(item.querySelector('.quantity-input').value) || 0;
-            const price = parseFloat(item.querySelector('.quantity-input').dataset.price);
-            const total = qty * price;
-            all += total;
-            if (item.querySelector('.item-checkbox').checked) {
-                checked += total;
-                checkedCount++;
-            }
+            const checkbox = item.querySelector('.item-checkbox');
+            const quantityInput = item.querySelector('.quantity-input');
+            const unitPrice = parseFloat(quantityInput.dataset.price);
+            const quantity = parseInt(quantityInput.value) || 0;
+            const totalItemPrice = unitPrice * quantity;
+
+            if (checkbox.checked) {
+                checkedPrice += totalItemPrice;
+            }
+
+            totalPriceAll += totalItemPrice;
         });
 
-        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;
+        document.getElementById('total-price').textContent = checkedPrice + ' ден.';
+        document.getElementById('total-price-all').textContent = totalPriceAll + ' ден.';
     }
 
-    function updateCheckedCount() { updateAllPriceDisplays(); }
-
-    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);
-
-            fetch(`/update-list-item/${itemId}/`, {
-                method: 'POST',
-                headers: {'X-CSRFToken': csrftoken,'Content-Type': 'application/json'},
-                body: JSON.stringify({checked: cb.checked})
-            });
-
+    function updateCheckedCount() {
+        const checkedCount = document.querySelectorAll('.item-checkbox:checked').length;
+        checkedCounter.textContent = checkedCount;
+        clearCheckedBtn.disabled = checkedCount === 0;
+        updateTotalPrice();
+    }
+
+    checkboxes.forEach(checkbox => {
+        checkbox.addEventListener('change', function () {
+            const listItem = this.closest('.shopping-list-item');
+            listItem.classList.toggle('checked', this.checked);
             updateCheckedCount();
         });
     });
 
-    document.querySelectorAll('.quantity-input').forEach(input => {
-        input.addEventListener('change', function() {
-            const itemId = this.closest('.shopping-list-item').dataset.itemId;
-            fetch(`/update-list-item/${itemId}/`, {
+    quantityInputs.forEach(input => {
+        input.addEventListener('input', updateTotalPrice);
+    });
+
+    // Handle remove button clicks
+    document.querySelectorAll('.remove-button').forEach(button => {
+        button.addEventListener('click', function() {
+            const itemId = this.dataset.itemId;
+            const listItem = this.closest('.shopping-list-item');
+
+            if (!confirm('Дали сте сигурни дека сакате да го отстраните овој производ?')) {
+                return;
+            }
+
+            fetch(`/remove-from-list/${itemId}/`, {
                 method: 'POST',
-                headers: {'X-CSRFToken': csrftoken,'Content-Type': 'application/json'},
-                body: JSON.stringify({quantity: this.value})
-            });
-            updateAllPriceDisplays();
-        });
-    });
-
-    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'},
-            }).then(res => {
-                if (res.ok) {
-                    btn.closest('.shopping-list-item').remove();
-                    const itemCount = document.querySelectorAll('.shopping-list-item').length;
-                    document.getElementById('sticky-total-items').textContent = itemCount;
+                headers: {
+                    'X-CSRFToken': csrftoken,
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({})
+            })
+            .then(response => {
+                if (response.ok) {
+                    listItem.remove();
+                    const totalItemsElement = document.getElementById('total-items');
+                    totalItemsElement.textContent = parseInt(totalItemsElement.textContent) - 1;
+                    updateTotalPrice();
                     updateCheckedCount();
+                } else {
+                    alert('Грешка при бришење на производот');
                 }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                alert('Грешка при бришење на производот');
             });
         });
     });
 
-    let isGrouped = false;
-    let originalOrder = [];
-    document.getElementById('group-by-store')?.addEventListener('click', () => {
-        const container = document.querySelector('.shopping-list-items');
-        if (!isGrouped) {
-            originalOrder = Array.from(container.children);
-            const grouped = {};
-            originalOrder.forEach(item => {
-                const store = item.querySelector('.store').textContent.trim();
-                if (!grouped[store]) grouped[store] = [];
-                grouped[store].push(item);
-            });
-            container.innerHTML = '';
-            for (const store in grouped) {
-                const section = document.createElement('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);
-            }
-            isGrouped = true;
-            document.getElementById('group-by-store').textContent = 'Одгрупирај';
-        } else {
-            container.innerHTML = '';
-            originalOrder.forEach(item => container.appendChild(item));
-            isGrouped = false;
-            document.getElementById('group-by-store').textContent = 'Групирај по продавници';
-        }
-    });
-
     updateCheckedCount();
-});
-
-// Find cheaper alternatives
-document.getElementById('find-cheaper')?.addEventListener('click', async () => {
-    const listId = "{{ shopping_list.id }}";
-    const response = await fetch(`/api/lists/${listId}/cheaper/`);
-    if (!response.ok) { alert("Не успеавме да ги најдеме алтернативите."); return; }
-    const data = await response.json();
-    const container = document.getElementById("alternative-items");
-    container.innerHTML = "";
-
-    let totalAlternativePrice = 0;
-
-    if (data.alternatives.length === 0) {
-        container.innerHTML = "<p>Нема поевтини алтернативи.</p>";
-    } else {
-        data.alternatives.forEach(item => {
-            totalAlternativePrice += parseFloat(item.original_price);
-            const div = document.createElement('div');
-            div.className = 'alternative-item';
-            div.innerHTML = `
-                <span><b>${item.original}</b></span>
-                <span style="color:green;"><b>${item.alternative}</b></span>
-                <span><i>во ${item.store}</i></span>
-            `;
-            container.appendChild(div);
-        });
-    }
-
-    {#document.getElementById("alternative-total").textContent = `Вкупна цена на алтернативите: ${totalAlternativePrice.toFixed(2)} ден.`;#}
-    document.getElementById("alternative-list").style.display = "block";
 });
 </script>
 </body>
-{% endblock %}
 </html>
Index: main/templates/main/lists.html
===================================================================
--- main/templates/main/lists.html	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ main/templates/main/lists.html	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
@@ -1,574 +1,597 @@
-{% extends 'main/header.html' %}
-
 {% load static %}
-{% load category_filters %}
-{% load custom_filters %}
 
 {% block content %}
-
-<div class="main-content">
-    <main class="content-area">
-        <div class="page-header">
-            <h1 class="lists-main-title">Мои листи</h1>
-            <div class="header-decoration"></div>
+    <div class="lists-wrapper">
+        <div class="back-button">
+            <a href="javascript:history.back()" class="action-button secondary-button">
+                <i class="fas fa-arrow-left"></i> Назад
+            </a>
         </div>
-        <div class="lists-actions">
-            <button id="create-list-btn" class="action-button">
-                <i class="fas fa-plus"></i> Нова листа
-            </button>
-            <div id="create-list-form" class="create-list-form">
-                <form method="post" action="{% url 'create_list' %}" id="list-form">
-                    {% csrf_token %}
-                    <div class="form-group">
-                        <input type="text" name="list_name" id="list-name-input" placeholder="Име на листата" required
-                               class="form-input" maxlength="100">
-                        <small id="list-name-error" style="color: red; display: none;"></small>
+
+        <div class="lists-container">
+            <h1 class="lists-main-title" style="padding: 10px; color: white; border-radius: 10px; background: linear-gradient(135deg, #1f3f1f, #2e652e);
+">Мои листи </h1>
+
+            <div class="lists-actions">
+                <button id="create-list-btn" class="action-button primary-button">
+                    <i class="fas fa-plus"></i> Нова листа
+                </button>
+
+                <div id="create-list-form" class="create-list-form" style="display: none;">
+                    <form method="post" action="{% url 'create_list' %}">
+                        {% csrf_token %}
+                        <div class="form-group">
+                            <input type="text" name="list_name" placeholder="Име на листата" required
+                                   class="form-input">
+                        </div>
+                        <div class="form-actions">
+                            <button type="submit" class="action-button submit-button">Креирај</button>
+                            <button type="button" id="cancel-create" class="action-button secondary-button">Откажи
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+
+            <div class="lists-grid">
+                {% for list in user_lists %}
+                    <div class="list-card">
+                        <a href="{% url 'view_list' list.id %}" class="list-card-link">
+                            <h3 class="list-title">{{ list.name }}</h3>
+                            <div class="list-meta">
+                            <span class="meta-item">
+                                <i class="fas fa-shopping-basket"></i> {{ list.items.count }} продукти
+                            </span>
+                                <span class="meta-item">
+                                <i class="far fa-calendar-alt"></i> {{ list.created_at|date:"d.m.Y" }}
+                            </span>
+                            </div>
+                        </a>
+                        <form method="post" action="{% url 'delete_list' list.id %}" class="delete-list-form">
+                            {% csrf_token %}
+                            <button type="submit" class="action-button danger-button small-button">
+                                <i class="fas fa-trash-alt"></i> Избриши
+                            </button>
+                        </form>
                     </div>
-                    <div class="form-actions">
-                        <button type="submit" class="action-button">Креирај</button>
-                        <button type="button" id="cancel-create" class="action-button secondary-button">Откажи</button>
+                {% empty %}
+                    <div class="empty-lists-message">
+                        <i class="far fa-folder-open"></i>
+                        <p>Немате креирано листи.</p>
                     </div>
-                </form>
+                {% endfor %}
             </div>
         </div>
-        <div class="lists-grid">
-            {% for list in user_lists %}
-                <div class="list-card">
-                    <a href="{% url 'view_list' list.id %}" class="list-card-link">
-                        <div class="list-icon">
-                            <i class="fas fa-list-ul"></i>
-                        </div>
-                        <h3 class="list-title" style="width: 150px">{{ list.name }}</h3>
-                        <div class="list-meta">
-                                <span class="meta-item">
-                                    <i class="fas fa-shopping-basket"></i> {{ list.items.count }} продукти
-                                </span>
-                            <span class="meta-item">
-                                    <i class="far fa-calendar-alt"></i> {{ list.created_at|date:"d.m.Y" }}
-                                </span>
-                        </div>
-                    </a>
-                    <form method="post" action="{% url 'delete_list' list.id %}" class="delete-list-form">
-                        {% csrf_token %}
-                        <button type="submit" class="action-button danger-button" onclick="return confirm('Дали сте сигурни дека сакате да ја избришете оваа листа?')">
-                            <i class="fas fa-trash-alt"></i>
-                        </button>
-                    </form>
-                </div>
-            {% empty %}
-                <div class="empty-lists-message">
-                    <div class="empty-icon">
-                        <i class="far fa-folder-open"></i>
-                    </div>
-                    <h3>Немате креирано листи</h3>
-                    <p>Кликнете на "Нова листа" за да креирате ваша прва листа</p>
-                </div>
-            {% endfor %}
-        </div>
-    </main>
-</div>
-
-<!-- Footer -->
-<footer>
-    <div class="footer-content">
-        <div class="footer-section">
-            <h3>За нас</h3>
-            <p>Ние сме водечка онлајн продавница со најдобри цени и квалитетни производи.</p>
-        </div>
-        <div class="footer-section">
-            <h3>Контакт</h3>
-            <p>Телефон: +389 70 123 456</p>
-            <p>Email: kontakt@nasataprodavnica.com</p>
-            <p>Адреса: Улица ББ, Скопје</p>
-        </div>
-        <div class="footer-section">
-            <h3>Брзи линкови</h3>
-            <a href="{% url 'home' %}">Дома</a>
-            <a href="{% url 'product_list' %}">Каталог</a>
-            <a href="#">Услови на користење</a>
-            <a href="#">Политика на приватност</a>
-        </div>
-        <div class="footer-section social">
-            <h3>Следете нè</h3>
-            <a href="#" target="_blank"><i class="fab fa-facebook-f"></i> Facebook</a>
-            <a href="#" target="_blank"><i class="fab fa-instagram"></i> Instagram</a>
-            <a href="#" target="_blank"><i class="fab fa-twitter"></i> Twitter</a>
-        </div>
     </div>
-    <div class="copyright">
-        © 2023 Нашата Продавница. Сите права се задржани.
-    </div>
-</footer>
-
-<script>
-    document.addEventListener('DOMContentLoaded', function () {
-        // Create list form toggle
-        const createBtn = document.getElementById('create-list-btn');
-        const createForm = document.getElementById('create-list-form');
-        const cancelBtn = document.getElementById('cancel-create');
-        const listForm = document.getElementById('list-form');
-        const listNameInput = document.getElementById('list-name-input');
-        const listNameError = document.getElementById('list-name-error');
-
-        if (createBtn && createForm && cancelBtn) {
-            createBtn.addEventListener('click', function () {
-                createForm.style.display = 'block';
-                this.style.display = 'none';
-                listNameInput.focus();
-            });
-
-            cancelBtn.addEventListener('click', function () {
-                createForm.style.display = 'none';
-                createBtn.style.display = 'inline-flex';
-                listNameError.style.display = 'none';
-                listNameInput.value = '';
-            });
-        }
-
-        // List form submission with AJAX
-        if (listForm) {
-            listForm.addEventListener('submit', function(e) {
-                e.preventDefault();
-
-                const formData = new FormData(this);
-                const listName = formData.get('list_name').trim();
-
-                // Validate list name
-                if (listName.length === 0) {
-                    listNameError.textContent = 'Внесете име за листата';
-                    listNameError.style.display = 'block';
-                    return;
-                }
-
-                if (listName.length > 100) {
-                    listNameError.textContent = 'Името не смее да биде подолго од 100 карактери';
-                    listNameError.style.display = 'block';
-                    return;
-                }
-
-                fetch(this.action, {
-                    method: 'POST',
-                    body: formData,
-                    headers: {
-                        'X-CSRFToken': formData.get('csrfmiddlewaretoken'),
-                        'X-Requested-With': 'XMLHttpRequest'
-                    }
-                })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        // Reload the page to show the new list
-                        window.location.reload();
-                    } else {
-                        // Show error message
-                        listNameError.textContent = data.error || 'Настана грешка. Обидете се повторно.';
-                        listNameError.style.display = 'block';
-                    }
-                })
-                .catch(error => {
-                    console.error('Error:', error);
-                    listNameError.textContent = 'Настана грешка. Обидете се повторно.';
-                    listNameError.style.display = 'block';
-                });
-            });
-        }
-
-        // Clear error when typing
-        if (listNameInput) {
-            listNameInput.addEventListener('input', function() {
-                listNameError.style.display = 'none';
-            });
-        }
-
-        // Auto-dismiss messages
-        setTimeout(() => {
-            document.querySelectorAll('.alert').forEach(alert => {
-                alert.style.opacity = '0';
-                setTimeout(() => alert.remove(), 300);
-            });
-        }, 5000);
-
-        // Mobile menu toggle
-        function toggleMobileMenu() {
-            const menu = document.getElementById('mobile-menu');
-            const overlay = document.getElementById('overlay');
-            menu.classList.toggle('open');
-            overlay.classList.toggle('active');
-        }
-    });
-</script>
-
-<style>
-    /* Common Styles */
-    body {
-        font-family: Arial, sans-serif;
-        margin: 0;
-        padding: 0;
-        display: flex;
-        flex-direction: column;
-        min-height: 100vh;
-        background-color: #f5f5f5;
-    }
-
-    /* Main Content */
-    .main-content {
-        max-width: 1200px;
-        margin: 20px auto;
-        padding: 0 15px;
-        flex-grow: 1;
-    }
-
-    .content-area {
-        background-color: white;
-        border-radius: 8px;
-        padding: 20px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-
-    .page-header {
-        text-align: center;
-        margin-bottom: 20px;
-    }
-
-    .lists-main-title {
-        font-size: 1.5rem;
-        font-weight: 600;
-        color: #2e652e;
-        margin-bottom: 10px;
-    }
-
-    .header-decoration {
-        height: 4px;
-        width: 80px;
-        background: linear-gradient(to right, #2e652e, #4caf50);
-        margin: 0 auto;
-        border-radius: 2px;
-    }
-
-    .lists-actions {
-        margin-bottom: 20px;
-        text-align: center;
-    }
-
-    .action-button {
-        padding: 10px 25px;
-        font-size: 1rem;
-        background-color: #2e652e;
-        color: white;
-        border: none;
-        border-radius: 30px;
-        font-weight: 600;
-        cursor: pointer;
-        transition: background-color 0.3s ease, transform 0.3s ease;
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-    }
-
-    .action-button:hover {
-        background-color: #1f3f1f;
-        transform: translateY(-2px);
-    }
-
-    .secondary-button {
-        background-color: #f5f5f5;
-        color: #2e652e;
-    }
-
-    .secondary-button:hover {
-        background-color: #e0e8e0;
-    }
-
-    .danger-button {
-        background-color: #e74c3c;
-    }
-
-    .danger-button:hover {
-        background-color: #c62828;
-    }
-
-    .create-list-form {
-        max-width: 500px;
-        margin: 20px auto;
-        padding: 15px;
-        background: #f9f9f9;
-        border-radius: 8px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        display: none;
-    }
-
-    .form-group {
-        margin-bottom: 15px;
-        width: 93%;
-    }
-
-    .form-input {
-        width: 100%;
-        padding: 12px 15px;
-        border: 1px solid #ddd;
-        border-radius: 6px;
-        font-size: 1rem;
-        background-color: #f5f5f5;
-    }
-
-    .form-input:focus {
-        border-color: #2e652e;
-        outline: none;
-        box-shadow: 0 0 0 3px rgba(46, 101, 46, 0.2);
-    }
-
-    .form-actions {
-        display: flex;
-        gap: 10px;
-        justify-content: flex-end;
-    }
-
-    .lists-grid {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr); /* Exactly 3 columns */
-        gap: 30px;
-    }
-
-    .list-card {
-        background: white;
-        border-radius: 8px;
-        overflow: hidden;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        transition: transform 0.3s ease, box-shadow 0.3s ease;
-        position: relative;
-        padding-right: 50px;
-    }
-
-    .list-card:hover {
-        transform: translateY(-5px);
-        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-    }
-
-    .list-card-link {
-        text-decoration: none;
-        color: inherit;
-        display: block;
-        padding: 15px;
-    }
-
-    .list-icon {
-        width: 40px;
-        height: 40px;
-        background-color: #f0f7f0;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-bottom: 10px;
-        color: #2e652e;
-        font-size: 1rem;
-    }
-
-    .list-title {
-        font-weight: 500;
-        margin-bottom: 8px;
-        font-size: 14px;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-    }
-
-    .list-meta {
-        display: flex;
-        flex-direction: column;
-        gap: 5px;
-        font-size: 12px;
-        color: #666;
-    }
-
-    .meta-item {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-    }
-
-    .delete-list-form {
-        position: absolute;
-        top: 10px;
-        right: 10px;
-    }
-
-    .delete-list-form .action-button {
-        padding: 5px 10px;
-        font-size: 0.85rem;
-    }
-
-    .empty-lists-message {
-        grid-column: 1 / -1;
-        text-align: center;
-        padding: 20px;
-        background: white;
-        border-radius: 8px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-
-    .empty-icon {
-        font-size: 2rem;
-        margin-bottom: 10px;
-        color: #2e652e;
-    }
-
-    .empty-lists-message h3 {
-        font-size: 1.2rem;
-        margin-bottom: 10px;
-        color: #2e652e;
-    }
-
-    .empty-lists-message p {
-        font-size: 0.9rem;
-        color: #666;
-    }
-
-    /* Footer */
-    footer {
-        background: linear-gradient(135deg, #2e652e, #1f3f1f);
-        color: white;
-        padding: 40px 20px;
-        margin-top: auto;
-    }
-
-    .footer-content {
-        max-width: 1200px;
-        margin: 0 auto;
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-        gap: 30px;
-    }
-
-    .footer-section h3 {
-        margin-bottom: 20px;
-        font-size: 1.2rem;
-        color: #fdd835;
-    }
-
-    .footer-section p, .footer-section a {
-        color: #ddd;
-        margin-bottom: 10px;
-        display: block;
-        text-decoration: none;
-        transition: color 0.3s ease;
-        font-size: 14px;
-    }
-
-    .footer-section a:hover {
-        color: #fff;
-        text-decoration: underline;
-    }
-
-    .footer-section.social a {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-    }
-
-    .copyright {
-        text-align: center;
-        padding-top: 20px;
-        margin-top: 20px;
-        border-top: 1px solid rgba(255, 255, 255, 0.2);
-        color: #bbb;
-        font-size: 0.9rem;
-    }
-
-    /* Responsiveness */
-    @media (max-width: 768px) {
-        .main-content {
-            padding: 10px;
-        }
-
-        .content-area {
-            padding: 15px;
-            border-radius: 15px;
+
+    <style>
+       html, body {
+            height: 100%;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-image: url('{% static "images/baner1.jpg" %}');
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-attachment: fixed;
+            position: relative;
+            overflow-x: hidden;
+       }
+
+        /* Base Styles - Consistent with shopping list */
+        .lists-wrapper {
+            width: 100%;
+            padding: 20px;
+            box-sizing: border-box;
+            background: url('/static/images/background.jpg') no-repeat center center fixed;
+            background-size: cover;
+            min-height: 100vh;
+        }
+
+        .back-button {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            z-index: 10;
+        }
+
+        .lists-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: rgba(255, 255, 255, 0.85); /* Semi-transparent background */
+            border-radius: 10px;
+            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
+            padding: 30px;
+            margin-top: 60px;
         }
 
         .lists-main-title {
-            font-size: 1.2rem;
-        }
-
+            text-align: center;
+            color: #2c3e50;
+            margin-bottom: 30px;
+            font-size: 28px;
+            font-weight: 600;
+        }
+
+        /* Action Buttons - Consistent style */
+        .lists-actions {
+            margin-bottom: 30px;
+            text-align: center;
+        }
+
+        .action-button {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 12px 25px;
+            border-radius: 6px;
+            font-weight: 500;
+            text-decoration: none;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            border: 2px solid transparent;
+        }
+
+        .primary-button {
+            background-color: #3498db;
+            color: white;
+            border-color: #3498db;
+        }
+
+        .primary-button:hover {
+            background-color: #2980b9;
+            border-color: #2980b9;
+        }
+
+        .secondary-button {
+            background-color: #f8f9fa;
+            color: #495057;
+            border-color: #dee2e6;
+        }
+
+        .secondary-button:hover {
+            background-color: #e9ecef;
+            border-color: #ced4da;
+        }
+
+        .danger-button {
+            background-color: #e74c3c;
+            color: white;
+            border-color: #e74c3c;
+        }
+
+        .danger-button:hover {
+            background-color: #c0392b;
+            border-color: #c0392b;
+        }
+
+        .submit-button {
+            background-color: #28a745;
+            color: white;
+            border-color: #28a745;
+        }
+
+        .submit-button:hover {
+            background-color: #218838;
+            border-color: #218838;
+        }
+
+        .small-button {
+            padding: 8px 15px;
+            font-size: 14px;
+        }
+
+        /* Create List Form */
+        .create-list-form {
+            max-width: 500px;
+            margin: 20px auto 0;
+            padding: 20px;
+            background: #f8f9fa;
+            border-radius: 8px;
+        }
+
+        .form-group {
+            margin-bottom: 15px;
+        }
+
+        .form-input {
+            width: 100%;
+            padding: 12px 15px;
+            border: 1px solid #ced4da;
+            border-radius: 6px;
+            font-size: 16px;
+            transition: border-color 0.3s;
+        }
+
+        .form-input:focus {
+            border-color: #3498db;
+            outline: none;
+        }
+
+        .form-actions {
+            display: flex;
+            gap: 10px;
+            justify-content: flex-end;
+        }
+
+        /* Lists Grid */
         .lists-grid {
-        grid-template-columns: repeat(3, 1fr); /* Exactly 3 columns */
-            gap: 15px;
-        }
-
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            gap: 20px;
+        }
+
+        /* List Card */
         .list-card {
-            border-radius: 15px;
-        }
-
-        .list-icon {
-            width: 50px;
-            height: 50px;
-            font-size: 1.2rem;
+            position: relative;
+            background: #fff;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            padding: 20px;
+            transition: transform 0.3s, box-shadow 0.3s;
+        }
+
+        .list-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+
+        .list-card-link {
+            text-decoration: none;
+            color: inherit;
+            display: block;
         }
 
         .list-title {
+            color: #2c3e50;
+            margin: 0 0 15px 0;
+            font-size: 20px;
+            font-weight: 600;
+        }
+
+        .list-meta {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            color: #6c757d;
+        }
+
+        .meta-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 14px;
+        }
+
+        .delete-list-form {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+        }
+
+        /* Empty State */
+        .empty-lists-message {
+            grid-column: 1 / -1;
+            text-align: center;
+            padding: 40px 20px;
+            color: #6c757d;
+        }
+
+        .empty-lists-message i {
+            font-size: 40px;
+            margin-bottom: 15px;
+            color: #adb5bd;
+        }
+
+        .empty-lists-message p {
+            font-size: 18px;
+            margin: 0;
+        }
+
+        /* Icons */
+        i {
+            font-size: 14px;
+        }
+
+        /* Responsive Styles */
+        @media (max-width: 768px) {
+            .lists-container {
+                padding: 20px;
+            }
+
+            .lists-main-title {
+                font-size: 24px;
+            }
+
+            .lists-grid {
+                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+            }
+        }
+
+        @media (max-width: 480px) {
+            .lists-container {
+                padding: 15px;
+            }
+
+            .lists-main-title {
+                font-size: 20px;
+            }
+
+            .action-button {
+                width: 100%;
+                justify-content: center;
+            }
+
+            .form-actions {
+                flex-direction: column;
+            }
+
+            .form-actions button {
+                width: 100%;
+            }
+        }
+    </style>
+    <style>
+        .lists-wrapper {
+            width: 100%;
+            padding: 20px;
+            box-sizing: border-box;
+            {#background: linear-gradient(to right, #3ba431, #2e652e);#}
+            background-size: cover;
+            min-height: 100vh;
+        }
+
+        .back-button {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            z-index: 10;
+        }
+
+        .lists-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 12px;
+            box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15);
+            padding: 30px;
+            margin-top: 60px;
+        }
+
+        .lists-main-title {
+            text-align: center;
+            color: #2e7d32; /* Darker green */
+            margin-bottom: 30px;
+            font-size: 32px;
+            font-weight: 700;
+        }
+
+        .lists-actions {
+            margin-bottom: 30px;
+            text-align: center;
+        }
+
+        .action-button {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 12px 25px;
+            border-radius: 6px;
+            font-weight: 500;
+            text-decoration: none;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            border: 2px solid transparent;
+        }
+
+        .primary-button {
+            background-color: #43a047; /* Green */
+            color: white;
+            border-color: #43a047;
+        }
+
+        .primary-button:hover {
+            background-color: #388e3c;
+            border-color: #388e3c;
+        }
+
+        .secondary-button {
+            background-color: #e8f5e9;
+            color: #2e7d32;
+            border-color: #c8e6c9;
+        }
+
+        .secondary-button:hover {
+            background-color: #d0f0d0;
+            border-color: #b2dfdb;
+        }
+
+        .danger-button {
+            background-color: #ef5350;
+            color: white;
+            border-color: #ef5350;
+        }
+
+        .danger-button:hover {
+            background-color: #c62828;
+            border-color: #c62828;
+        }
+
+        .submit-button {
+            background-color: #66bb6a;
+            color: white;
+            border-color: #66bb6a;
+        }
+
+        .submit-button:hover {
+            background-color: #43a047;
+            border-color: #43a047;
+        }
+
+        .small-button {
+            padding: 8px 15px;
+            font-size: 14px;
+        }
+
+        .create-list-form {
+            max-width: 500px;
+            margin: 20px auto 0;
+            padding: 20px;
+            background: #f1f8e9;
+            border-radius: 8px;
+        }
+
+        .form-group {
+            margin-bottom: 15px;
+        }
+
+        .form-input {
+            width: 100%;
+            padding: 12px 15px;
+            border: 1px solid #aed581;
+            border-radius: 6px;
             font-size: 16px;
+            transition: border-color 0.3s;
+            background-color: #ffffff;
+        }
+
+        .form-input:focus {
+            border-color: #66bb6a;
+            outline: none;
+        }
+
+        .form-actions {
+            display: flex;
+            gap: 10px;
+            justify-content: flex-end;
+        }
+
+        .lists-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            gap: 20px;
+        }
+
+        .list-card {
+            position: relative;
+            background: #ffffff;
+            border-left: 5px solid #81c784;
+            border-radius: 8px;
+            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
+            padding: 20px;
+            transition: transform 0.3s, box-shadow 0.3s;
+        }
+
+        .list-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+        }
+
+        .list-card-link {
+            text-decoration: none;
+            color: inherit;
+            display: block;
+        }
+
+        .list-title {
+            color: #2e652e;
+            margin: 0 0 15px 0;
+            font-size: 20px;
+            font-weight: 600;
         }
 
         .list-meta {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            color: #549249;
+        }
+
+        .meta-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
             font-size: 14px;
         }
 
-        .action-button {
-            width: 100%;
-            justify-content: center;
-            padding: 12px;
-            border-radius: 25px;
-        }
-
-        .form-actions {
-            flex-direction: column;
-        }
-
-        .form-actions button {
-            width: 100%;
-        }
-
-        .create-list-form {
-            padding: 20px;
-            border-radius: 15px;
-        }
-
-        .form-input {
-            padding: 10px 15px;
-        }
-    }
-
-    @media (max-width: 480px) {
-        .lists-main-title {
-            font-size: 1rem;
-        }
-
-        .list-icon {
-            width: 40px;
-            height: 40px;
-            font-size: 1rem;
-        }
-
-        .list-title {
+        .delete-list-form {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+        }
+
+        .empty-lists-message {
+            grid-column: 1 / -1;
+            text-align: center;
+            padding: 40px 20px;
+            color: #2e652e;
+        }
+
+        .empty-lists-message i {
+            font-size: 40px;
+            margin-bottom: 15px;
+            color: #549249;
+        }
+
+        .empty-lists-message p {
+            font-size: 18px;
+            margin: 0;
+        }
+
+        i {
             font-size: 14px;
         }
 
-        .list-meta {
-            font-size: 12px;
-        }
-
-        .empty-icon {
-            font-size: 1.5rem;
-        }
-
-        .empty-lists-message h3 {
-            font-size: 1rem;
-        }
-
-        .empty-lists-message p {
-            font-size: 0.8rem;
-        }
-    }
-</style>
+        @media (max-width: 768px) {
+            .lists-container {
+                padding: 20px;
+            }
+
+            .lists-main-title {
+                font-size: 26px;
+            }
+
+            .lists-grid {
+                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+            }
+        }
+
+        @media (max-width: 480px) {
+            .lists-container {
+                padding: 15px;
+            }
+
+            .lists-main-title {
+                font-size: 22px;
+            }
+
+            .action-button {
+                width: 100%;
+                justify-content: center;
+            }
+
+            .form-actions {
+                flex-direction: column;
+            }
+
+            .form-actions button {
+                width: 100%;
+            }
+        }
+    </style>
+
+
+    <script>
+        document.getElementById('create-list-btn').addEventListener('click', function () {
+            document.getElementById('create-list-form').style.display = 'block';
+            this.style.display = 'none';
+        });
+
+        document.getElementById('cancel-create').addEventListener('click', function () {
+            document.getElementById('create-list-form').style.display = 'none';
+            document.getElementById('create-list-btn').style.display = 'inline-flex';
+        });
+    </script>
+
+    <!-- Include Font Awesome for icons (add this in your base template) -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
 {% endblock %}
Index: main/templates/main/login.html
===================================================================
--- main/templates/main/login.html	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ main/templates/main/login.html	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
@@ -1,19 +1,12 @@
 {% load static %}
-{% load socialaccount %}
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <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: 'Poppins', Arial, sans-serif;
+            font-family: Arial, sans-serif;
             margin: 0;
             padding: 0;
@@ -26,5 +19,4 @@
             background-position: center;
             position: relative;
-            color: #444;
         }
 
@@ -32,32 +24,32 @@
             content: '';
             position: absolute;
-            inset: 0;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
             background: inherit;
-            filter: blur(8px) brightness(0.7);
+            filter: blur(8px);
             z-index: -1;
         }
 
         .auth-container {
-            position: relative;
             width: 100%;
             max-width: 400px;
-            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;
+            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 h2 {
-            font-weight: 600;
-            font-size: 2.2rem;
-            margin-bottom: 30px;
-            color: #2e652e;
-            letter-spacing: 1px;
+            text-align: center;
+            margin-bottom: 25px;
+            color: #333;
+            font-size: 28px;
         }
 
         .form-group {
-            margin-bottom: 25px;
-            text-align: left;
+            margin-bottom: 20px;
         }
 
@@ -65,90 +57,58 @@
             display: block;
             margin-bottom: 8px;
-            font-weight: 600;
-            color: #2e652e;
-            font-size: 1rem;
+            font-weight: bold;
+            color: #555;
         }
 
         .form-group input {
             width: 100%;
-            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;
+            padding: 12px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 16px;
+            box-sizing: border-box;
         }
 
         button[type="submit"] {
             width: 100%;
-            padding: 14px;
-            background-color: #2e652e;
+            padding: 12px;
+            background-color: #28a745;
             color: white;
-            font-weight: 600;
-            font-size: 1.1rem;
             border: none;
-            border-radius: 10px;
+            border-radius: 6px;
+            font-size: 16px;
             cursor: pointer;
-            transition: background-color 0.3s ease, transform 0.2s ease;
-            letter-spacing: 1px;
+            transition: background-color 0.3s;
         }
 
-        button[type="submit"]:hover,
-        button[type="submit"]:focus {
-            background-color: #1f3f1f;
-            transform: scale(1.03);
-            outline: none;
+        button[type="submit"]:hover {
+            background-color: #218838;
         }
 
         .register-link {
-            margin-top: 25px;
-            font-size: 0.9rem;
-            color: #555;
+            text-align: center;
+            margin-top: 20px;
         }
 
         .register-link a {
-            color: #2e652e;
+            color: #007bff;
             text-decoration: none;
-            font-weight: 600;
-            transition: color 0.3s ease;
+            transition: color 0.3s;
         }
 
-        .register-link a:hover,
-        .register-link a:focus {
-            color: #1f3f1f;
+        .register-link a:hover {
+            color: #0056b3;
             text-decoration: underline;
         }
 
         .errorlist {
-            background: #ffe6e6;
-            border: 1px solid #dc3545;
             color: #dc3545;
-            padding: 12px 15px;
-            margin-bottom: 25px;
-            border-radius: 8px;
-            list-style: none;
-            font-weight: 600;
-            font-size: 0.9rem;
+            margin-bottom: 15px;
+            padding-left: 20px;
         }
 
         .errorlist li {
-            margin: 0;
-        }
-
-        /* Responsive tweaks */
-        @media (max-width: 450px) {
-            .auth-container {
-                padding: 30px 20px;
-                border-radius: 12px;
-            }
-
-            .auth-container h2 {
-                font-size: 1.8rem;
-            }
+            list-style-type: none;
+            margin-bottom: 5px;
         }
     </style>
@@ -156,9 +116,9 @@
 <body>
     <div class="auth-container">
-        <h2>Најави се</h2>
+        <h2>Login</h2>
 
         {% if form.errors %}
         <ul class="errorlist">
-            <li>Вашето корисничко име или лозинка не се точни. Обидете се повторно.</li>
+            <li>Your username and password didn't match. Please try again.</li>
         </ul>
         {% endif %}
@@ -166,46 +126,21 @@
         <form method="post" action="{% url 'login' %}">
             {% csrf_token %}
+
             <div class="form-group">
-                <label for="id_username">Корисничко име</label>
-                <input type="text" name="username" id="id_username" required autofocus autocomplete="username" />
+                <label for="id_username">Username</label>
+                <input type="text" name="username" id="id_username" required>
             </div>
 
             <div class="form-group">
-                <label for="id_password">Лозинка</label>
-                <input type="password" name="password" id="id_password" required autocomplete="current-password" />
+                <label for="id_password">Password</label>
+                <input type="password" name="password" id="id_password" required>
             </div>
 
-            <button type="submit">Најави се</button>
+            <button type="submit">Login</button>
+
+            <div class="register-link">
+                <a href="{% url 'register' %}">Don't have an account? Register</a>
+            </div>
         </form>
-        <!-- Social Login Buttons -->
-<div style="margin-top: 25px; text-align: center;">
-    <p>Или најави се преку:</p>
-    <a href="{% provider_login_url 'google' %}" style="
-        display: inline-block;
-        background-color: #DB4437;
-        color: white;
-        padding: 10px 20px;
-        margin: 5px 0;
-        border-radius: 8px;
-        text-decoration: none;
-        font-weight: 600;
-    ">Google</a>
-
-    <a href="{% provider_login_url 'facebook' %}" style="
-        display: inline-block;
-        background-color: #3b5998;
-        color: white;
-        padding: 10px 20px;
-        margin: 5px 0;
-        border-radius: 8px;
-        text-decoration: none;
-        font-weight: 600;
-    ">Facebook</a>
-</div>
-
-
-        <div class="register-link">
-            Немате корисничка сметка? <a href="{% url 'register' %}">Регистрирај се</a>
-        </div>
     </div>
 </body>
Index: main/templates/main/logout.html
===================================================================
--- main/templates/main/logout.html	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ main/templates/main/logout.html	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
@@ -5,5 +5,5 @@
         <small class="text-muted">
             <a href="{% url 'login' %}">Log In Again</a> or
-            <a href="{% url 'base' %}">Return to Homepage</a>
+            <a href="{% url 'home' %}">Return to Homepage</a>
         </small>
     </div>
Index: in/templates/main/main.html
===================================================================
--- main/templates/main/main.html	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ 	(revision )
@@ -1,608 +1,0 @@
-{% load category_filters %}
-{% load custom_filters %}
-{% 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>Price Comparison | Shop Smart</title>
-    <style>
-        /* Reset and Base Styles */
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: Arial, sans-serif;
-            color: #333;
-            line-height: 1.5;
-            background-color: #f5f5f5;
-        }
-
-        a {
-            text-decoration: none;
-            color: inherit;
-        }
-
-        ul {
-            list-style: none;
-        }
-
-        /* Header Styles */
-        .header {
-            background-color: #fff;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            position: sticky;
-            top: 0;
-            z-index: 1000;
-        }
-
-        .header-top {
-            background-color: #f5f5f5;
-            padding: 8px 0;
-            border-bottom: 1px solid #e5e5e5;
-        }
-
-        .header-top-container {
-            max-width: 1200px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 0 15px;
-        }
-
-        .header-logo {
-            display: flex;
-            align-items: center;
-        }
-
-        .header-logo img {
-            height: 40px;
-        }
-
-        .header-search {
-            flex-grow: 1;
-            margin: 0 20px;
-            position: relative;
-        }
-
-        .header-search input {
-            width: 100%;
-            padding: 10px 15px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            font-size: 16px;
-        }
-
-        .header-search button {
-            position: absolute;
-            right: 10px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: none;
-            border: none;
-            color: #666;
-            cursor: pointer;
-        }
-
-        .header-actions {
-            display: flex;
-            align-items: center;
-        }
-
-        .header-actions a {
-            margin-left: 15px;
-            font-size: 14px;
-            color: #666;
-        }
-
-        .header-actions a:hover {
-            color: #00a0e3;
-        }
-
-        .header-nav {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 15px;
-        }
-
-        .header-nav ul {
-            display: flex;
-        }
-
-        .header-nav li {
-            padding: 15px 10px;
-            font-size: 14px;
-            font-weight: bold;
-            color: #666;
-        }
-
-        .header-nav li:hover {
-            color: #00a0e3;
-            border-bottom: 2px solid #00a0e3;
-        }
-
-        /* Main Content */
-        .container {
-            max-width: 1200px;
-            margin: 20px auto;
-            padding: 0 15px;
-        }
-
-        /* Hero Banner */
-        .hero-banner {
-            background-color: #00a0e3;
-            color: white;
-            padding: 30px;
-            border-radius: 4px;
-            margin-bottom: 20px;
-            background-image: linear-gradient(to right, #00a0e3, #0083c1);
-        }
-
-        .hero-banner h1 {
-            font-size: 28px;
-            margin-bottom: 10px;
-        }
-
-        .hero-banner p {
-            font-size: 16px;
-            margin-bottom: 20px;
-        }
-
-        /* Categories */
-        .categories-section {
-            background-color: #fff;
-            border-radius: 4px;
-            padding: 20px;
-            margin-bottom: 20px;
-        }
-
-        .section-title {
-            font-size: 20px;
-            margin-bottom: 20px;
-            color: #333;
-            font-weight: bold;
-        }
-
-        .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);
-        }
-
-        .category-card img {
-            width: 40px;
-            height: 40px;
-            margin-bottom: 10px;
-        }
-
-        .category-card span {
-            font-size: 12px;
-            display: block;
-        }
-
-        /* Products Grid */
-        .products-section {
-            background-color: #fff;
-            border-radius: 4px;
-            padding: 20px;
-            margin-bottom: 20px;
-        }
-
-        .products-grid {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 20px;
-        }
-
-        .product-card {
-            border: 1px solid #eee;
-            border-radius: 4px;
-            padding: 15px;
-            transition: all 0.3s ease;
-        }
-
-        .product-card:hover {
-            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-        }
-
-        .product-image {
-            height: 120px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-bottom: 15px;
-        }
-
-        .product-image img {
-            max-height: 100%;
-            max-width: 100%;
-        }
-
-        .product-title {
-            font-size: 14px;
-            margin-bottom: 10px;
-            height: 40px;
-            overflow: hidden;
-        }
-
-        .product-price {
-            font-size: 18px;
-            font-weight: bold;
-            color: #e60000;
-            margin-bottom: 10px;
-        }
-
-        .product-old-price {
-            font-size: 14px;
-            color: #999;
-            text-decoration: line-through;
-            margin-right: 5px;
-        }
-
-        .product-shop {
-            font-size: 12px;
-            color: #666;
-            margin-bottom: 10px;
-        }
-
-        .product-rating {
-            color: #ffc107;
-            font-size: 12px;
-            margin-bottom: 10px;
-        }
-
-        .product-btn {
-            display: block;
-            background-color: #00a0e3;
-            color: white;
-            text-align: center;
-            padding: 8px;
-            border-radius: 4px;
-            font-size: 14px;
-            transition: background-color 0.3s ease;
-        }
-
-        .product-btn:hover {
-            background-color: #0083c1;
-        }
-
-        /* Footer */
-        .footer {
-            background-color: #333;
-            color: #fff;
-            padding: 40px 0;
-        }
-
-        .footer-container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 15px;
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 30px;
-        }
-
-        .footer-column h3 {
-            font-size: 16px;
-            margin-bottom: 15px;
-            color: #fff;
-        }
-
-        .footer-column ul li {
-            margin-bottom: 10px;
-            font-size: 14px;
-            color: #ccc;
-        }
-
-        .footer-column ul li:hover {
-            color: #fff;
-        }
-
-        .footer-bottom {
-            max-width: 1200px;
-            margin: 30px auto 0;
-            padding: 20px 15px 0;
-            border-top: 1px solid #444;
-            font-size: 12px;
-            color: #999;
-        }
-
-        /* Mobile Menu */
-        .mobile-menu-btn {
-            display: none;
-            background: none;
-            border: none;
-            font-size: 20px;
-            color: #666;
-            cursor: pointer;
-        }
-
-        /* Responsive Styles */
-        @media (max-width: 1024px) {
-            .categories-grid {
-                grid-template-columns: repeat(4, 1fr);
-            }
-
-            .products-grid {
-                grid-template-columns: repeat(3, 1fr);
-            }
-        }
-
-        @media (max-width: 768px) {
-            .header-top-container {
-                flex-wrap: wrap;
-            }
-
-            .header-search {
-                order: 3;
-                margin: 10px 0 0;
-                width: 100%;
-            }
-
-            .mobile-menu-btn {
-                display: block;
-            }
-
-            .header-nav {
-                display: none;
-            }
-
-            .categories-grid {
-                grid-template-columns: repeat(3, 1fr);
-            }
-
-            .products-grid {
-                grid-template-columns: repeat(2, 1fr);
-            }
-
-            .footer-container {
-                grid-template-columns: repeat(2, 1fr);
-            }
-        }
-
-        @media (max-width: 480px) {
-            .categories-grid {
-                grid-template-columns: repeat(2, 1fr);
-            }
-
-            .products-grid {
-                grid-template-columns: 1fr;
-            }
-
-            .footer-container {
-                grid-template-columns: 1fr;
-            }
-        }
-    </style>
-</head>
-<body>
-    <!-- Header -->
-    <header class="header">
-        <div class="header-top">
-            <div class="header-top-container">
-                <button class="mobile-menu-btn">
-                    <i class="fas fa-bars"></i>
-                </button>
-
-                <div class="header-logo">
-                    <a href="{% url 'home' %}">
-                        <img src="{% static 'images/shtedko_official1.png' %}" alt="Price Comparison">
-                    </a>
-                </div>
-
-                <div class="header-search">
-                    <input type="text" placeholder="What are you looking for?">
-                    <button type="submit"><i class="fas fa-search"></i></button>
-                </div>
-
-                <div class="header-actions">
-                    {% if user.is_authenticated %}
-                        <a href="{% url 'logout' %}"><i class="fas fa-sign-out-alt"></i> Logout</a>
-                    {% else %}
-                        <a href="{% url 'login' %}"><i class="fas fa-user"></i> Login</a>
-                        <a href="{% url 'register' %}"><i class="fas fa-user-plus"></i> Register</a>
-                    {% endif %}
-                    <a href="#"><i class="fas fa-heart"></i> Favorites</a>
-                </div>
-            </div>
-        </div>
-
-        <nav class="header-nav">
-            <ul>
-                <li><a href="{% url 'home' %}">Home</a></li>
-                <li><a href="{% url 'product_list' %}">Products</a></li>
-                <li><a href="#">Categories</a></li>
-                <li><a href="#">Deals</a></li>
-                <li><a href="#">Stores</a></li>
-                <li><a href="{% url 'stats' %}">Statistics</a></li>
-            </ul>
-        </nav>
-    </header>
-
-    <!-- Main Content -->
-    <main class="container">
-        <!-- Hero Banner -->
-        <section class="hero-banner">
-            <h1>Find the best prices for your favorite products</h1>
-            <p>Compare prices from hundreds of stores and save money on every purchase</p>
-            <a href="{% url 'product_list' %}" class="product-btn">Browse Products</a>
-        </section>
-
-        <!-- Categories Section -->
-        <section class="categories-section">
-            <h2 class="section-title">Popular Categories</h2>
-            <div class="categories-grid">
-                {% for category in categories|slice:":12" %}
-                <a href="{% url 'product_list' %}?category={{ category }}" class="category-card">
-                    <img src="{% static 'images/categories/' %}{{ category|lower }}.jpg"
-                         alt="{{ category }}"
-                         onerror="this.src='{% static 'images/categories/default.jpg' %}'">
-                    <span>{{ category|translate_category }}</span>
-                </a>
-                {% endfor %}
-            </div>
-        </section>
-
-        <!-- Top Deals Section -->
-        <section class="products-section">
-            <h2 class="section-title">Today's Best Deals</h2>
-            <div class="products-grid">
-                {% for product in top_deals|slice:":8" %}
-                <div class="product-card">
-                    <div class="product-image">
-                        <img src="{{ product.image_url }}" alt="{{ product.name }}">
-                    </div>
-                    <div class="product-title">{{ product.name }}</div>
-                    <div class="product-price">
-                        {% if product.price > product.actual_price %}
-                            <span class="product-old-price">{{ product.price }} ден.</span>
-                        {% endif %}
-                        {{ product.actual_price }} ден.
-                    </div>
-                    <div class="product-shop">{{ product.store.name }}</div>
-                    <div class="product-rating">
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="far fa-star"></i>
-                    </div>
-                    <a href="#" class="product-btn">View Deal</a>
-                </div>
-                {% endfor %}
-            </div>
-        </section>
-
-        <!-- Popular Products Section -->
-        <section class="products-section">
-            <h2 class="section-title">Most Popular Products</h2>
-            <div class="products-grid">
-                {% for product in popular_products|slice:":8" %}
-                <div class="product-card">
-                    <div class="product-image">
-                        <img src="{{ product.image_url }}" alt="{{ product.name }}">
-                    </div>
-                    <div class="product-title">{{ product.name }}</div>
-                    <div class="product-price">
-                        {% if product.price > product.actual_price %}
-                            <span class="product-old-price">{{ product.price }} ден.</span>
-                        {% endif %}
-                        {{ product.actual_price }} ден.
-                    </div>
-                    <div class="product-shop">{{ product.store.name }}</div>
-                    <div class="product-rating">
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="far fa-star"></i>
-                    </div>
-                    <a href="#" class="product-btn">View Deal</a>
-                </div>
-                {% endfor %}
-            </div>
-        </section>
-    </main>
-
-    <!-- Footer -->
-    <footer class="footer">
-        <div class="footer-container">
-            <div class="footer-column">
-                <h3>About Us</h3>
-                <ul>
-                    <li><a href="#">About Company</a></li>
-                    <li><a href="#">Careers</a></li>
-                    <li><a href="#">Press</a></li>
-                    <li><a href="#">Blog</a></li>
-                </ul>
-            </div>
-
-            <div class="footer-column">
-                <h3>Help & Contact</h3>
-                <ul>
-                    <li><a href="#">Help Center</a></li>
-                    <li><a href="#">Contact Us</a></li>
-                    <li><a href="#">Shipping Information</a></li>
-                    <li><a href="#">Returns & Refunds</a></li>
-                </ul>
-            </div>
-
-            <div class="footer-column">
-                <h3>Legal</h3>
-                <ul>
-                    <li><a href="#">Terms of Service</a></li>
-                    <li><a href="#">Privacy Policy</a></li>
-                    <li><a href="#">Cookie Policy</a></li>
-                    <li><a href="#">Imprint</a></li>
-                </ul>
-            </div>
-
-            <div class="footer-column">
-                <h3>Connect With Us</h3>
-                <ul>
-                    <li><a href="#"><i class="fab fa-facebook"></i> Facebook</a></li>
-                    <li><a href="#"><i class="fab fa-twitter"></i> Twitter</a></li>
-                    <li><a href="#"><i class="fab fa-instagram"></i> Instagram</a></li>
-                    <li><a href="#"><i class="fab fa-youtube"></i> YouTube</a></li>
-                </ul>
-            </div>
-        </div>
-
-        <div class="footer-bottom">
-            <p>© 2023 Price Comparison. All rights reserved. Prices and availability are subject to change.</p>
-        </div>
-    </footer>
-
-    <script>
-        // Mobile menu toggle
-        document.querySelector('.mobile-menu-btn').addEventListener('click', function() {
-            document.querySelector('.header-nav').style.display =
-                document.querySelector('.header-nav').style.display === 'block' ? 'none' : 'block';
-        });
-
-        // Responsive adjustments
-        function adjustLayout() {
-            if (window.innerWidth < 768) {
-                // Mobile specific adjustments
-            } else {
-                // Desktop adjustments
-                document.querySelector('.header-nav').style.display = 'block';
-            }
-        }
-
-        window.addEventListener('resize', adjustLayout);
-        adjustLayout();
-
-        // Product card animations
-        document.querySelectorAll('.product-card').forEach(card => {
-            card.addEventListener('mouseenter', function() {
-                this.style.transform = 'translateY(-5px)';
-            });
-
-            card.addEventListener('mouseleave', function() {
-                this.style.transform = 'translateY(0)';
-            });
-        });
-    </script>
-</body>
-</html>
Index: main/templates/main/nearby_stores.html
===================================================================
--- main/templates/main/nearby_stores.html	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ main/templates/main/nearby_stores.html	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
@@ -1,774 +1,54 @@
-{% extends 'main/header.html' %}
-{% load static %}
-
-{% block content %}
-<div class="stores-wrapper">
-    <div class="stores-container">
-        <!-- Header Section -->
-        <div class="stores-header">
-            <div class="header-content">
-                <h1 class="stores-main-title">Најблиски продавници</h1>
-                <p class="stores-subtitle">Пронајди ги најблиските продавници и заштеди гориво</p>
-            </div>
-            <div class="back-button">
-                <a href="{% url 'home' %}" class="back-link">
-                    <i class="fas fa-arrow-left"></i> Назад кон почетна
-                </a>
-            </div>
-        </div>
-
-        <!-- Search Form -->
-        <div class="search-card">
-            <form method="get" action="{% url 'nearby_stores' %}" class="store-search-form" id="searchForm">
-                <div class="form-row">
-                    <div class="form-group">
-                        <label for="latitude"><i class="fas fa-map-marker-alt"></i> Latitude:</label>
-                        <input type="text" id="latitude" name="latitude" required class="form-input"
-                               value="{{ request.GET.latitude|default:'' }}" placeholder="41.9981">
-                    </div>
-                    <div class="form-group">
-                        <label for="longitude"><i class="fas fa-map-marker-alt"></i> Longitude:</label>
-                        <input type="text" id="longitude" name="longitude" required class="form-input"
-                               value="{{ request.GET.longitude|default:'' }}" placeholder="21.4254">
-                    </div>
-                </div>
-
-                <div class="form-row">
-                    <div class="form-group">
-                        <label for="fuel_consumption"><i class="fas fa-gas-pump"></i> Потрошувачка на гориво (L/100km):</label>
-                        <input type="number" step="0.1" id="fuel_consumption" name="fuel_consumption" required
-                               class="form-input" value="{{ request.GET.fuel_consumption|default:'' }}" placeholder="6.5">
-                    </div>
-                    <div class="form-group">
-                        <label for="store_chain"><i class="fas fa-store"></i> Продавничка мрежа:</label>
-                        <select name="store_chain" id="store_chain" required class="form-input">
-                            <option value="Reptil" {% if request.GET.store_chain == "Reptil" %}selected{% endif %}>Reptil</option>
-                            <option value="Vero" {% if request.GET.store_chain == "Vero" %}selected{% endif %}>Vero</option>
-                            <option value="Ramstore" {% if request.GET.store_chain == "Ramstore" %}selected{% endif %}>Ramstore</option>
-                        </select>
-                    </div>
-                </div>
-
-                <div class="form-actions">
-                    <button type="button" onclick="getLocation()" class="action-button secondary-button">
-                        <i class="fas fa-location-arrow"></i> Користи моја локација
-                    </button>
-                    <button type="submit" class="action-button primary-button" id="submitButton">
-                        <i class="fas fa-search"></i> Пронајди продавници
-                    </button>
-                </div>
-            </form>
-        </div>
-
-        {% if calculating %}
-            <div class="loading-container">
-                <div class="loading-spinner">
-                    <div class="spinner"></div>
-                </div>
-                <div class="loading-text">
-                    <h3>Пресметуваме растојанија и времиња на патување...</h3>
-                    <p>Ова може да потрае неколку секунди.</p>
-                </div>
-            </div>
-        {% elif nearest_stores %}
-            <div class="results-section">
-                <h2 class="section-title"><i class="fas fa-store"></i> Најблиски продавници</h2>
-                <div class="stores-grid">
-                    {% for store in nearest_stores|slice:":5" %}
-                        <div class="store-card">
-                            <div class="store-card-header">
-                                <h3 class="store-title">{{ store.store }}</h3>
-                                <span class="store-distance">{{ store.distance_km|floatformat:2 }} km</span>
-                            </div>
-                            <div class="store-meta">
-                                <div class="meta-item">
-                                    <i class="fas fa-clock"></i>
-                                    <span>{{ store.duration }}</span>
-                                </div>
-                                <div class="meta-item">
-                                    <i class="fas fa-gas-pump"></i>
-                                    <span>{{ store.gas_used|floatformat:2 }} L</span>
-                                </div>
-                            </div>
-                            <div class="store-card-footer">
-                                <span class="store-chain-badge">{{ request.GET.store_chain }}</span>
-                            </div>
-                        </div>
-                    {% endfor %}
-                </div>
-            </div>
-
-            <!-- Map Container -->
-            <div class="map-section">
-                <h2 class="section-title"><i class="fas fa-map-marked-alt"></i> Мапа на локации</h2>
-                <div id="map-container">
-                    <div id="map"></div>
-                </div>
-                <div class="map-controls">
-                    <button onclick="centerMapOnUser()" class="action-button secondary-button">
-                        <i class="fas fa-location-arrow"></i> Центрирај на мојата локација
-                    </button>
-                </div>
-            </div>
-        {% else %}
-            <div class="no-stores">
-                <div class="no-stores-icon">
-                    <i class="fas fa-exclamation-circle"></i>
-                </div>
-                <h3>Нема пронајдени продавници</h3>
-                <p>Внесете ги вашите координати за да ги видите најблиските продавници.</p>
-            </div>
-        {% endif %}
-
-        {% if least_gas_stores %}
-            <div class="results-section">
-                <h2 class="section-title"><i class="fas fa-gas-pump"></i> Продавници со најмало користење на гориво</h2>
-                <div class="stores-grid">
-                    {% for store in least_gas_stores|slice:":5" %}
-                        <div class="store-card">
-                            <div class="store-card-header">
-                                <h3 class="store-title">{{ store.store }}</h3>
-                                <span class="store-distance">{{ store.distance_km|floatformat:2 }} km</span>
-                            </div>
-                            <div class="store-meta">
-                                <div class="meta-item">
-                                    <i class="fas fa-clock"></i>
-                                    <span>{{ store.duration }}</span>
-                                </div>
-                                <div class="meta-item">
-                                    <i class="fas fa-gas-pump"></i>
-                                    <span>{{ store.gas_used|floatformat:2 }} L</span>
-                                </div>
-                            </div>
-                            <div class="store-card-footer">
-                                <span class="store-chain-badge">{{ request.GET.store_chain }}</span>
-                            </div>
-                        </div>
-                    {% endfor %}
-                </div>
-            </div>
-        {% endif %}
-    </div>
-</div>
-
-<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
-<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-
-<script>
-    function getLocation() {
-        if (navigator.geolocation) {
-            navigator.geolocation.getCurrentPosition(function (position) {
-                document.getElementById("latitude").value = position.coords.latitude.toFixed(6);
-                document.getElementById("longitude").value = position.coords.longitude.toFixed(6);
-                if (typeof map !== 'undefined') updateMap(position.coords.latitude, position.coords.longitude);
-
-                // Show success notification
-                showNotification('Локацијата е успешно поставена!', 'success');
-            }, function (error) {
-                let errorMsg;
-                switch(error.code) {
-                    case error.PERMISSION_DENIED:
-                        errorMsg = "Корисникот одби пристап до локацијата.";
-                        break;
-                    case error.POSITION_UNAVAILABLE:
-                        errorMsg = "Информациите за локацијата не се достапни.";
-                        break;
-                    case error.TIMEOUT:
-                        errorMsg = "Истекло времето за барање на локацијата.";
-                        break;
-                    default:
-                        errorMsg = "Непозната грешка.";
-                        break;
-                }
-                showNotification('Грешка при геолокација: ' + errorMsg, 'error');
-            }, { timeout: 10000 });
-        } else {
-            showNotification("Геолокацијата не е поддржана од овој пребарувач.", 'error');
-        }
-    }
-
-    let map, userMarker, storeMarkers = [];
-
-    document.addEventListener('DOMContentLoaded', function () {
-        {% if nearest_stores %}
-            initMap();
-        {% endif %}
-        document.getElementById('searchForm').addEventListener('submit', function() {
-            document.getElementById('submitButton').innerHTML = '<i class="fas fa-spinner fa-spin"></i> Пресметувам...';
-            document.getElementById('submitButton').disabled = true;
-        });
-    });
-
-    function initMap() {
-        const userLat = parseFloat(document.getElementById('latitude').value) || 41.9981;
-        const userLng = parseFloat(document.getElementById('longitude').value) || 21.4254;
-
-        map = L.map('map').setView([userLat, userLng], 13);
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            attribution: '&copy; OpenStreetMap contributors'
-        }).addTo(map);
-
-        // Custom icon for user location
-        const userIcon = L.divIcon({
-            className: 'user-marker',
-            html: '<div class="pulse-dot"></div><i class="fas fa-user"></i>',
-            iconSize: [30, 30],
-            iconAnchor: [15, 15]
-        });
-
-        userMarker = L.marker([userLat, userLng], {icon: userIcon}).addTo(map).bindPopup("<b>Вашата локација</b>").openPopup();
-
-        storeMarkers.forEach(m => map.removeLayer(m));
-        storeMarkers = [];
-
-        const stores = [
-            {% for store in nearest_stores %}
-                {
-                    name: "{{ store.store|escapejs }}",
-                    latitude: {{ store.latitude }},
-                    longitude: {{ store.longitude }},
-                    distance: {{ store.distance_km }},
-                    duration: "{{ store.duration|escapejs }}",
-                    gasUsed: {{ store.gas_used }}
-                },
-            {% endfor %}
-        ];
-
-        // Custom icon for stores
-        const storeIcon = L.divIcon({
-            className: 'store-marker',
-            html: '<i class="fas fa-store"></i>',
-            iconSize: [25, 25],
-            iconAnchor: [12, 12]
-        });
-
-        stores.forEach(store => {
-            const marker = L.marker([store.latitude, store.longitude], {icon: storeIcon}).addTo(map);
-            marker.bindPopup(`<b>${store.name}</b><br>Растојание: ${store.distance.toFixed(2)} km<br>Време: ${store.duration}<br>Гориво: ${store.gasUsed.toFixed(2)} L`);
-            storeMarkers.push(marker);
-        });
-    }
-
-    function updateMap(lat, lng) {
-        userMarker.setLatLng([lat, lng]).bindPopup("<b>Вашата локација</b>").openPopup();
-        map.setView([lat, lng], 13);
-    }
-
-    function centerMapOnUser() {
-        if (navigator.geolocation) {
-            navigator.geolocation.getCurrentPosition(function(position){
-                updateMap(position.coords.latitude, position.coords.longitude);
-                document.getElementById('latitude').value = position.coords.latitude.toFixed(6);
-                document.getElementById('longitude').value = position.coords.longitude.toFixed(6);
-                showNotification('Мапата е центрирана на вашата локација', 'success');
-            });
-        }
-    }
-
-    function showNotification(message, type) {
-        // Remove any existing notifications
-        const existingNotifications = document.querySelectorAll('.notification');
-        existingNotifications.forEach(notif => notif.remove());
-
-        const notification = document.createElement('div');
-        notification.className = `notification ${type}`;
-        notification.innerHTML = `
-            <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i>
-            <span>${message}</span>
-            <button onclick="this.parentElement.remove()"><i class="fas fa-times"></i></button>
-        `;
-
-        document.body.appendChild(notification);
-
-        // Auto remove after 5 seconds
-        setTimeout(() => {
-            if (notification.parentElement) {
-                notification.remove();
-            }
-        }, 5000);
-    }
-</script>
-
-<style>
-    :root {
-        --primary: #2e652e;
-        --primary-dark: #1f3f1f;
-        --primary-light: #81c784;
-        --accent: #4caf50;
-        --text: #333;
-        --text-light: #666;
-        --background: #f9f9f9;
-        --card-bg: #ffffff;
-        --border: #e0e0e0;
-        --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-        --shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
-        --success: #4caf50;
-        --error: #f44336;
-    }
-
-    * {
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-    }
-
-    body {
-    font-family: Arial, sans-serif;
-        background: var(--background);
-        color: var(--text);
-        line-height: 1.6;
-    }
-
-    .stores-wrapper {
-        max-width: 1400px;
-        margin: 0 auto;
-        padding: 20px;
-    }
-
-    .stores-container {
-        background: var(--card-bg);
-        border-radius: 16px;
-        overflow: hidden;
-        box-shadow: var(--shadow);
-    }
-
-    .stores-header {
-        background: linear-gradient(135deg, rgba(46,101,46,0.9) 0%, rgba(76,175,80,0.8) 100%), url('{% static "images/baner1.jpg" %}') center/cover no-repeat;
-        color: white;
-        padding: 30px;
-        position: relative;
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-    }
-
-    .header-content {
-        max-width: 70%;
-    }
-
-    .stores-main-title {
-        font-size: 2.5rem;
-        font-weight: 700;
-        margin-bottom: 10px;
-        text-shadow: 0 2px 4px rgba(0,0,0,0.2);
-    }
-
-    .stores-subtitle {
-        font-size: 1.1rem;
-        opacity: 0.9;
-        font-weight: 300;
-    }
-
-    .back-button {
-        position: absolute;
-        top: 20px;
-        right: 20px;
-    }
-
-    .back-link {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        background: rgba(255, 255, 255, 0.2);
-        backdrop-filter: blur(10px);
-        color: white;
-        padding: 10px 20px;
-        border-radius: 30px;
-        text-decoration: none;
-        transition: all 0.3s ease;
-        border: 1px solid rgba(255, 255, 255, 0.3);
-    }
-
-    .back-link:hover {
-        background: rgba(255, 255, 255, 0.3);
-        transform: translateY(-2px);
-    }
-
-    .search-card {
-        padding: 30px;
-        border-bottom: 1px solid var(--border);
-    }
-
-    .form-row {
-        display: flex;
-        gap: 20px;
-        margin-bottom: 20px;
-        flex-wrap: wrap;
-    }
-
-    .form-group {
-        flex: 1;
-        min-width: 250px;
-    }
-
-    .form-group label {
-        display: block;
-        margin-bottom: 8px;
-        color: var(--primary);
-        font-weight: 600;
-        font-size: 0.9rem;
-    }
-
-    .form-input, select {
-        width: 100%;
-        padding: 14px 16px;
-        border-radius: 10px;
-        border: 1px solid var(--border);
-        font-size: 1rem;
-        transition: all 0.3s ease;
-        background: var(--card-bg);
-    }
-
-    .form-input:focus, select:focus {
-        outline: none;
-        border-color: var(--primary);
-        box-shadow: 0 0 0 3px rgba(46, 101, 46, 0.1);
-    }
-
-    .form-actions {
-        display: flex;
-        gap: 15px;
-        margin-top: 20px;
-        flex-wrap: wrap;
-    }
-
-    .action-button {
-        padding: 14px 28px;
-        border-radius: 10px;
-        font-weight: 600;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        display: inline-flex;
-        align-items: center;
-        gap: 10px;
-        border: none;
-        font-size: 1rem;
-    }
-
-    .primary-button {
-        background: var(--primary);
-        color: white;
-    }
-
-    .primary-button:hover {
-        background: var(--primary-dark);
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(46, 101, 46, 0.2);
-    }
-
-    .secondary-button {
-        background: #e8f5e9;
-        color: var(--primary);
-    }
-
-    .secondary-button:hover {
-        background: #d0f0d0;
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(46, 101, 46, 0.1);
-    }
-
-    .loading-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        padding: 60px 30px;
-        text-align: center;
-    }
-
-    .loading-spinner {
-        margin-bottom: 20px;
-    }
-
-    .spinner {
-        width: 60px;
-        height: 60px;
-        border: 4px solid rgba(46, 101, 46, 0.1);
-        border-radius: 50%;
-        border-top: 4px solid var(--primary);
-        animation: spin 1s linear infinite;
-    }
-
-    @keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-    }
-
-    .loading-text h3 {
-        color: var(--primary);
-        margin-bottom: 10px;
-    }
-
-    .loading-text p {
-        color: var(--text-light);
-    }
-
-    .results-section {
-        padding: 30px;
-        border-bottom: 1px solid var(--border);
-    }
-
-    .section-title {
-        font-size: 1.5rem;
-        margin-bottom: 25px;
-        color: var(--primary);
-        display: flex;
-        align-items: center;
-        gap: 10px;
-    }
-
-    .stores-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-        gap: 20px;
-    }
-
-    .store-card {
-        background: var(--card-bg);
-        border-radius: 12px;
-        padding: 20px;
-        box-shadow: var(--shadow);
-        transition: all 0.3s ease;
-        border-left: 4px solid var(--primary-light);
-        display: flex;
-        flex-direction: column;
-    }
-
-    .store-card:hover {
-        transform: translateY(-5px);
-        box-shadow: var(--shadow-hover);
-    }
-
-    .store-card-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        margin-bottom: 15px;
-    }
-
-    .store-title {
-        color: var(--primary);
-        font-size: 1.2rem;
-        font-weight: 600;
-    }
-
-    .store-distance {
-        background: var(--primary-light);
-        color: var(--primary-dark);
-        padding: 4px 10px;
-        width: 100px;
-        border-radius: 20px;
-        font-size: 0.9rem;
-        font-weight: 600;
-    }
-
-    .store-meta {
-        margin-bottom: 15px;
-    }
-
-    .meta-item {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        margin-bottom: 8px;
-        color: var(--text-light);
-    }
-
-    .store-card-footer {
-        margin-top: auto;
-    }
-
-    .store-chain-badge {
-        background: #e8f5e9;
-        color: var(--primary);
-        padding: 4px 12px;
-        border-radius: 20px;
-        font-size: 0.8rem;
-        font-weight: 600;
-    }
-
-    .map-section {
-        padding: 30px;
-    }
-
-    #map-container {
-        height: 500px;
-        border-radius: 12px;
-        overflow: hidden;
-        margin-bottom: 20px;
-        box-shadow: var(--shadow);
-    }
-
-    #map {
-        width: 100%;
-        height: 100%;
-    }
-
-    .map-controls {
-        display: flex;
-        justify-content: center;
-    }
-
-    .no-stores {
-        padding: 60px 30px;
-        text-align: center;
-    }
-
-    .no-stores-icon {
-        font-size: 3rem;
-        color: #bdbdbd;
-        margin-bottom: 20px;
-    }
-
-    .no-stores h3 {
-        color: var(--text-light);
-        margin-bottom: 10px;
-    }
-
-    .no-stores p {
-        color: var(--text-light);
-    }
-
-    /* Custom map markers */
-    .user-marker {
-        position: relative;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: white;
-        font-size: 14px;
-        background: var(--primary);
-        border-radius: 50%;
-        width: 30px;
-        height: 30px;
-        box-shadow: 0 0 0 4px rgba(46, 101, 46, 0.3);
-    }
-
-    .pulse-dot {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-        background: var(--primary);
-        animation: pulse 2s infinite;
-        z-index: -1;
-    }
-
-    @keyframes pulse {
-        0% {
-            transform: scale(1);
-            opacity: 0.8;
-        }
-        70% {
-            transform: scale(2.5);
-            opacity: 0;
-        }
-        100% {
-            transform: scale(1);
-            opacity: 0;
-        }
-    }
-
-    .store-marker {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: white;
-        font-size: 14px;
-        background: var(--accent);
-        border-radius: 50%;
-        width: 25px;
-        height: 25px;
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    }
-
-    /* Notification system */
-    .notification {
-        position: fixed;
-        top: 20px;
-        right: 20px;
-        padding: 15px 20px;
-        border-radius: 10px;
-        color: white;
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        box-shadow: var(--shadow);
-        z-index: 1000;
-        animation: slideIn 0.3s ease;
-        max-width: 350px;
-    }
-
-    .notification.success {
-        background: var(--success);
-    }
-
-    .notification.error {
-        background: var(--error);
-    }
-
-    .notification button {
-        background: none;
-        border: none;
-        color: white;
-        cursor: pointer;
-        margin-left: 10px;
-    }
-
-    @keyframes slideIn {
-        from {
-            transform: translateX(100%);
-            opacity: 0;
-        }
-        to {
-            transform: translateX(0);
-            opacity: 1;
-        }
-    }
-
-    /* Responsive design */
-    @media (max-width: 768px) {
-        .stores-header {
-            flex-direction: column;
-            gap: 20px;
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Nearby Stores</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            padding: 20px;
         }
 
-        .header-content {
-            max-width: 100%;
+        h1, h2 {
+            color: #2c3e50;
         }
 
-        .back-button {
-            position: relative;
-            top: 0;
-            right: 0;
-            align-self: flex-end;
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 15px;
         }
 
-        .stores-main-title {
-            font-size: 2rem;
+        th, td {
+            padding: 12px;
+            border: 1px solid #ddd;
+            text-align: left;
         }
 
-        .form-row {
-            flex-direction: column;
-            gap: 15px;
+        tr:nth-child(even) {
+            background-color: #f8f8f8;
         }
+    </style>
+</head>
+<body>
+<h2>Nearby Stores</h2>
 
-        .form-group {
-            min-width: 100%;
-        }
+<p>Your location: Latitude {{ latitude }}, Longitude {{ longitude }}</p>
+<p>Your car's fuel consumption: {{ fuel_usage }} L/100km</p>
+<p>Store chain: {{ selected_store }}</p>
 
-        .form-actions {
-            flex-direction: column;
-        }
-
-        .action-button {
-            width: 100%;
-            justify-content: center;
-        }
-
-        #map-container {
-            height: 300px;
-        }
-    }
-</style>
-{% endblock %}
+{% if nearby_stores %}
+    <h3>Closest Stores:</h3>
+    <ul>
+        {% for store in nearby_stores %}
+            <li>
+                {{ store.name }} -
+                {{ store.distance|floatformat:2 }} km away -
+                {{ store.fuel|floatformat:2 }} liters used
+            </li>
+        {% endfor %}
+    </ul>
+{% else %}
+    <p>No stores found for the selected chain.</p>
+{% endif %}
+</body>
+</html>
Index: main/templates/main/product_detail.html
===================================================================
--- main/templates/main/product_detail.html	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ main/templates/main/product_detail.html	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
@@ -1,8 +1,4 @@
-{% extends 'main/header.html' %}
-{% load category_filters %}
-{% load static %}
-{% load custom_filters %}
-{% block content %}
-
+    {% load static %}
+    {% load custom_filters %}
     <!DOCTYPE html>
     <html lang="en">
@@ -11,5 +7,4 @@
         <title>{{ product.name }}</title>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
-        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <style>
@@ -23,66 +18,113 @@
             html, body {
                 height: 100%;
-                font-family: Arial, sans-serif;
-                background-color: #f5f5f5;
+                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+                background-image: url('{% static "images/baner1.jpg" %}');
+                background-size: cover;
+                background-position: center;
+                background-repeat: no-repeat;
+                background-attachment: fixed;
                 position: relative;
                 overflow-x: hidden;
             }
 
-            /* Main container */
-            .main-container {
-                display: grid;
-                grid-template-columns: 250px 1fr 350px;
-                gap: 20px;
-                max-width: 1400px;
-                margin: 20px auto;
-                padding: 0 20px;
-            }
-
-            /* Left column - Product image and actions */
-            .left-column {
-                background: white;
+            body::before {
+                content: '';
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: inherit;
+                filter: blur(10px);
+                z-index: -1;
+            }
+
+            .product-wrapper {
+                max-width: 800px;
+                margin: 60px auto;
+                background: rgba(255, 255, 255, 0.95);
+                border-radius: 16px;
+                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+                padding: 40px;
+                animation: fadeIn 0.8s ease-in-out;
+            }
+
+            @keyframes fadeIn {
+                from {
+                    opacity: 0;
+                    transform: translateY(30px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+
+            h1, h2 {
+                text-align: center;
+                color: #222;
+                margin-bottom: 20px;
+            }
+
+            .product-image {
+                text-align: center;
+                margin-bottom: 30px;
+            }
+
+            .product-image img {
+                max-width: 240px;
+                border-radius: 10px;
+                box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
+                transition: transform 0.3s ease;
+            }
+
+            .product-image img:hover {
+                transform: scale(1.05);
+            }
+
+            .product-info {
+                margin-bottom: 25px;
+                padding: 0 10px;
+            }
+
+            .product-info p {
+                margin: 10px 0;
+                font-size: 17px;
+                color: #444;
+            }
+
+            .product-info p strong {
+                color: #111;
+            }
+
+            .product-actions {
+                text-align: center;
+                margin-top: 20px;
+            }
+
+            .view-product, .add-to-list {
+                display: inline-block;
+                padding: 12px 24px;
+                margin: 8px;
+                font-size: 15px;
+                font-weight: 600;
                 border-radius: 8px;
-                padding: 20px;
-                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-                height: fit-content;
-            }
-
-            .product-image-container {
-                text-align: center;
-                margin-bottom: 20px;
-            }
-
-            .product-image-container img {
-                max-width: 100%;
-                max-height: 250px;
-                object-fit: contain;
-            }
-
-            .product-actions {
-                display: flex;
-                flex-direction: column;
-                gap: 10px;
-            }
-
-            .view-product-btn, .add-to-list-btn {
-                padding: 10px;
-                border-radius: 4px;
-                font-weight: 600;
-                text-align: center;
                 text-decoration: none;
-                transition: all 0.3s;
-            }
-
-            .view-product-btn {
-                background: #3498db;
+                transition: all 0.3s ease;
+                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+            }
+
+            .view-product {
+                background-color: #3498db;
                 color: white;
             }
 
-            .view-product-btn:hover {
-                background: #2980b9;
-            }
-
-            .add-to-list-btn {
-                background: #2ecc71;
+            .view-product:hover {
+                background-color: #2980b9;
+                box-shadow: 0 6px 16px rgba(41, 128, 185, 0.4);
+            }
+
+            .add-to-list {
+                background-color: #28a745;
                 color: white;
                 border: none;
@@ -90,218 +132,60 @@
             }
 
-            .add-to-list-btn:hover {
-                background: #27ae60;
-            }
-
-            /* Middle column - Product info and similar products */
-            .middle-column {
-                background: white;
-                border-radius: 8px;
-                padding: 20px;
-                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-            }
-
-            .product-info {
-                margin-bottom: 30px;
-            }
-
-            .product-info h2 {
-                font-size: 20px;
-                margin-bottom: 15px;
-                color: #333;
-            }
-
-            .info-item {
-                margin-bottom: 10px;
-            }
-
-            .info-label {
-                font-weight: 600;
-                color: #555;
-            }
-
-            .info-value {
-                color: #333;
+            .add-to-list:hover {
+                background-color: #218838;
+                box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
             }
 
             .similar-products {
-                margin-top: 30px;
-            }
-
-            .similar-products h3 {
-                font-size: 18px;
-                margin-bottom: 15px;
-                color: #333;
-                border-bottom: 1px solid #eee;
-                padding-bottom: 10px;
-            }
-
-            .similar-product-card {
-                display: flex;
-                align-items: center;
-                padding: 15px;
-                border: 1px solid #eee;
-                border-radius: 6px;
-                margin-bottom: 15px;
-                transition: all 0.3s;
-            }
-
-            .similar-product-card:hover {
-                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            }
-
-            .similar-product-card.cheaper {
-                border: 2px solid #e74c3c;
-                background-color: #fdecea;
-                animation: pulse 2s infinite;
-            }
-
-            @keyframes pulse {
-                0% {
-                    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4);
-                }
-                70% {
-                    box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
-                }
-                100% {
-                    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
-                }
-            }
-
-            .similar-product-image {
-                flex: 0 0 80px;
-                margin-right: 15px;
-            }
-
-            .similar-product-image img {
-                max-width: 80px;
-                max-height: 80px;
-                object-fit: contain;
-            }
-
-            .similar-product-info {
-                flex: 1;
-            }
-
-            .similar-product-name {
-                font-weight: 600;
-                margin-bottom: 5px;
-            }
-
-            .similar-product-price {
-                font-weight: bold;
-            }
-
-            .similar-product-price.cheaper {
-                color: #e74c3c;
-            }
-
-            .similar-product-store {
+                margin-top: 40px;
+            }
+
+            .similar-products h2 {
+                margin-bottom: 16px;
+            }
+
+            .similar-products ul {
+                list-style: none;
+                padding: 0 20px;
+            }
+
+            .similar-products li {
+                margin: 10px 0;
+                font-size: 15px;
+                color: #2c3e50;
+            }
+
+            .similar-products li a {
+                text-decoration: none;
+                color: #007bff;
+                font-weight: 500;
+            }
+
+            .similar-products li a:hover {
+                text-decoration: underline;
+            }
+
+            .similar-store {
                 font-size: 13px;
-                color: #666;
-                margin-top: 5px;
-            }
-
-            .similar-product-actions {
-                flex: 0 0 100px;
-                text-align: right;
-            }
-
-            .view-similar-btn {
-                padding: 6px 12px;
-                background: #3498db;
-                color: white;
-                border-radius: 4px;
-                text-decoration: none;
-                font-size: 13px;
-                transition: all 0.3s;
-            }
-
-            .view-similar-btn:hover {
-                background: #2980b9;
-            }
-
-            /* Right column - Price chart */
-            .right-column {
-                background: white;
-                border-radius: 8px;
-                padding: 20px;
-                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-                height: fit-content;
-            }
-
-            .price-chart-container h3 {
-                font-size: 18px;
-                margin-bottom: 15px;
-                color: #333;
-                border-bottom: 1px solid #eee;
-                padding-bottom: 10px;
-            }
-
-            .chart-container {
-                position: relative;
-                height: 300px;
-                width: 100%;
-            }
-
-            .no-data-message {
-                text-align: center;
-                padding: 20px;
-                color: #666;
-                font-style: italic;
-            }
-
-            /* Lists dropdown styles */
-            .lists-dropdown {
-                position: relative;
-                display: inline-block;
-            }
-
-            .lists-toggle {
-                background: none;
-                border: none;
-                cursor: pointer;
-                font-weight: 600;
-                font-size: 1rem;
-                color: black;
-                padding: 5px 10px;
-                border-radius: 5px;
-            }
-
-            .lists-toggle:hover {
-                background-color: #f0f0f0;
-            }
-
-            .dropdown-content {
-                display: none;
-                position: absolute;
-                background-color: white;
-                min-width: 160px;
-                box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-                z-index: 1;
-                border-radius: 5px;
-            }
-
-            .dropdown-content a {
-                color: black;
-                padding: 12px 16px;
-                text-decoration: none;
-                display: block;
-            }
-
-            .dropdown-content a:hover {
-                background-color: #f1f1f1;
-            }
-
-            .show {
-                display: block;
-            }
-
-            .lists-toggle:hover .selected-list-badge {
-                background: #1f3f1f;
-                transform: scale(1.05);
-            }
-
-            /* Modal styles */
+                color: #888;
+                margin-left: 5px;
+            }
+
+            @media (max-width: 600px) {
+                .product-wrapper {
+                    padding: 25px 20px;
+                    margin: 30px 15px;
+                }
+
+                .product-image img {
+                    max-width: 180px;
+                }
+
+                .view-product, .add-to-list {
+                    width: 100%;
+                    margin: 10px 0;
+                }
+            }
+
             .modal {
                 position: fixed;
@@ -329,5 +213,5 @@
 
             .modal-content h3 {
-                padding: 10px;
+                margin-bottom: 15px;
             }
 
@@ -355,871 +239,705 @@
             }
 
-            a {
+            /* ===== 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;
+            }
+
+            #logo img {
+                height: 90px;
+            }
+
+            #other a,
+            .user-actions a,
+            .user-actions button {
+                margin-left: 20px;
+                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;
+            }
+
+            #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;
-            }
-
-            /* Price history section */
-            .section-header {
+                background: none;
+                border: none;
+                text-align: left;
+            }
+
+            /* Logo on the left */
+            #logo img {
+                height: 90px;
+            }
+
+            /* Links on the right */
+            #nav-links {
                 display: flex;
                 align-items: center;
-                gap: 10px;
-                margin-bottom: 15px;
-            }
-
-            .section-header h3 {
-                margin: 0;
-                font-size: 18px;
-                color: #333;
-            }
-
-            .section-header i {
-                color: #2e652e;
-                font-size: 20px;
-            }
-
-            .chart-summary {
-                display: grid;
-                grid-template-columns: repeat(3, 1fr);
-                gap: 10px;
-                margin-top: 15px;
-                background: #f8f9fa;
-                padding: 12px;
-                border-radius: 8px;
-            }
-
-            .summary-item {
-                text-align: center;
-            }
-
-            .summary-label {
-                display: block;
-                font-size: 12px;
-                color: #666;
-                margin-bottom: 5px;
-            }
-
-            .summary-value {
+                gap: 25px;
+            }
+
+            /* Style all links and buttons */
+            #nav-links a,
+            .user-actions a,
+            .user-actions button {
+                color: black;
+                text-decoration: none;
                 font-weight: 600;
-                color: #2e652e;
-            }
-
-            /* Date range selector */
-            .date-range-form {
-                margin-top: 15px;
-            }
-
-            .form-row {
+                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: 10px;
-                margin-bottom: 10px;
-            }
-
-            .form-group {
-                flex: 1;
-            }
-
-            .form-group label {
-                display: block;
-                margin-bottom: 5px;
-                font-size: 13px;
-                color: #555;
-            }
-
-            .form-group label i {
-                margin-right: 5px;
-            }
-
-            .form-input {
-                width: 100%;
-                padding: 8px 12px;
-                border: 1px solid #ddd;
-                border-radius: 6px;
-                font-size: 14px;
-            }
-
-            .update-chart-btn {
-                width: 100%;
-                padding: 10px;
-                background-color: #2e652e;
+                gap: 15px;
+                align-items: center;
+            }
+
+            .logout-btn {
+                background-color: #2ecc71; /* Green background */
                 color: white;
                 border: none;
-                border-radius: 6px;
-                font-weight: 500;
-                cursor: pointer;
-                transition: background-color 0.3s;
-            }
-
-            .update-chart-btn:hover {
-                background-color: #1f3f1f;
-            }
-
-            .update-chart-btn i {
-                margin-right: 8px;
-            }
-
-            /* Promo banner */
-            .promo-banner {
-                margin-top: 20px;
+                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; /* Darker green on hover */#}
+            }
+
+
+            /* ===== 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;
+            }
+
+            #overlay.active {
+                display: block;
+            }
+
+            /* ===== RESPONSIVENESS ===== */
+            @media (max-width: 768px) {
+                #desktop-navbar {
+                    display: none;
+                }
+
+                #mobile-header {
+                    display: flex;
+                }
+            }
+
+            .mobile-search-form {
+                display: flex;
+                align-items: center;
+                padding: 10px 16px;
+                gap: 8px;
+                background-color: white;
+                border-bottom: 1px solid #eee;
+            }
+
+            .mobile-search-form input {
+                flex: 1;
+                padding: 8px 14px;
+                border-radius: 20px;
+                border: 1px solid #ccc;
+                font-size: 14px;
+                outline: none;
+            }
+
+            .mobile-search-form button {
+                background-color: #2ecc71;
+                color: white;
+                border: none;
+                padding: 8px 12px;
+                border-radius: 50%;
+                font-size: 16px;
+                cursor: pointer;
+                transition: background-color 0.3s ease;
+            }
+
+            .mobile-search-form button:hover {
+                background-color: #27ae60;
+            }
+
+            .similar-products {
+                border: 2px solid #e74c3c;
+                background-color: #fdecea;
+                padding: 10px;
+                border-radius: 10px;
+            }
+
+            .similar-products .cheaper-product img {
+                max-width: 120px !important;
+                transform: scale(0.9);
+            }
+
+            /* Add to your styles */
+            .lists-dropdown {
                 position: relative;
-                border-radius: 8px;
-                overflow: hidden;
-                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-            }
-
-            .promo-banner img {
-                width: 100%;
-                height: auto;
+                display: inline-block;
+            }
+
+            .lists-toggle {
+                background: none;
+                border: none;
+                cursor: pointer;
+                font-weight: 600;
+                font-size: 1rem;
+                color: black;
+                padding: 5px 10px;
+                border-radius: 5px;
+            }
+
+            .lists-toggle:hover {
+                background-color: #f0f0f0;
+            }
+
+            .dropdown-content {
+                display: none;
+                position: absolute;
+                background-color: white;
+                min-width: 160px;
+                box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+                z-index: 1;
+                border-radius: 5px;
+            }
+
+            .dropdown-content a {
+                color: black;
+                padding: 12px 16px;
+                text-decoration: none;
                 display: block;
             }
 
-            .banner-overlay {
+            .dropdown-content a:hover {
+                background-color: #f1f1f1;
+            }
+
+            .show {
+                display: block;
+            }
+
+            /* Mobile lists dropdown styles */
+            .lists-dropdown-mobile {
+                position: relative;
+                display: inline-block;
+            }
+
+            .lists-toggle-mobile {
+                background: none;
+                border: none;
+                cursor: pointer;
+                font-size: 20px;
+                color: black;
+                padding: 5px;
+            }
+
+            .dropdown-content-mobile {
+                display: none;
                 position: absolute;
-                bottom: 0;
-                left: 0;
                 right: 0;
-                background: rgba(0, 0, 0, 0.6);
+                background-color: white;
+                min-width: 160px;
+                box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+                z-index: 1003; /* Above mobile menu */
+                border-radius: 5px;
+                max-height: 300px;
+                overflow-y: auto;
+            }
+
+            .dropdown-content-mobile a {
+                color: black;
+                padding: 12px 16px;
+                text-decoration: none;
+                display: block;
+            }
+
+            .dropdown-content-mobile a:hover {
+                background-color: #f1f1f1;
+            }
+
+            .dropdown-content-mobile.show {
+                display: block;
+            }
+
+            /* Adjust mobile menu z-index */
+            .mobile-menu {
+                z-index: 1002; /* Below dropdown */
+            }
+
+            /* Add to your CSS */
+            .selected-list-badge {
+                font-size: 12px;
+                background: #2ecc71;
                 color: white;
-                padding: 15px;
-            }
-
-            .banner-overlay h4 {
-                margin: 0 0 5px 0;
-                font-size: 16px;
-            }
-
-            .banner-overlay p {
-                margin: 0;
-                font-size: 13px;
-                opacity: 0.9;
-            }
-
-            /* Chart tooltip styling */
-            .chartjs-tooltip {
-                background: rgba(0, 0, 0, 0.7);
-                border-radius: 4px;
-                color: white;
-                padding: 8px 12px;
-                font-size: 14px;
-            }
-
-            /* Message container for alerts */
-            .message-container {
-                position: fixed;
-                top: 20px;
-                right: 20px;
-                z-index: 1000;
-                max-width: 400px;
-            }
-
-            .alert {
-                padding: 15px;
-                margin-bottom: 10px;
-                border-radius: 4px;
+                padding: 2px 6px;
+                border-radius: 10px;
+                margin-left: 5px;
+            }
+
+
+        </style>
+    </head>
+    <body>
+
+
+    <!-- FULL NAVBAR -->
+    <div id="navbar">
+
+        <!-- DESKTOP NAVBAR -->
+        <div id="desktop-navbar">
+            <!-- Logo on the left -->
+            <div id="logo">
+                <a href="{% url 'home' %}"><img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого"/></a>
+            </div>
+
+            <!-- Navigation links on the right -->
+            <div id="nav-links">
+    {#            <a href="{% url 'home' %}">Дома</a>#}
+                <a href="{% url 'product_list' %}">Каталог</a>
+                <a href="#"><img src="{% static 'images/stats.png' %}" width="57px"></a>
+
+                <div class="lists-dropdown">
+                    <button class="lists-toggle" onclick="toggleListsDropdown()">
+                        <i class="fas fa-list"></i> Листи
+                        <span id="selected-list-name">{% if user_lists %}(Избери листа){% else %}(Нема
+                            листи){% endif %}</span>
+                    </button>
+                    <div id="listsDropdown" class="dropdown-content">
+                        {% for list in user_lists %}
+                            <a href="#" onclick="selectList('{{ list.id }}', '{{ list.name }}')">{{ list.name }}</a>
+                        {% empty %}
+                            <a href="{% url 'create_list' %}">Креирај нова листа</a>
+                        {% endfor %}
+                    </div>
+                </div>
+
+
+                <div class="user-actions">
+                    {% if user.is_authenticated %}
+                        <form method="post" action="{% url 'logout' %}">
+                            {% csrf_token %}
+                            <button type="submit" class="logout-btn"><img src="{% static 'images/log_out.png' %}"width="35px"></button>
+                        </form>
+                    {% else %}
+                        <a href="{% url 'login' %}" id="login">Login</a>
+                        <a href="{% url 'register' %}" id="signup">Sign Up</a>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+
+
+        <div id="mobile-header">
+            <div id="mobile-logo">
+                <img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого" style="height: 40px;">
+            </div>
+            <div style="display: flex; align-items: center; gap: 10px;">
+                <!-- Lists dropdown for mobile -->
+                <div class="lists-dropdown-mobile">
+                    <button class="lists-toggle-mobile" onclick="toggleMobileListsDropdown()">
+                        <i class="fas fa-list"></i>
+                    </button>
+                    <div id="mobileListsDropdown" class="dropdown-content-mobile">
+                        {% for list in user_lists %}
+                            <a href="#" onclick="selectList('{{ list.id }}', '{{ list.name }}')">{{ list.name }}</a>
+                        {% empty %}
+                            <a href="{% url 'create_list' %}">Креирај нова листа</a>
+                        {% endfor %}
+                    </div>
+                </div>
+                <!-- Hamburger menu -->
+                <div class="menu-toggle" onclick="toggleMobileMenu()">☰</div>
+            </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">
+                <input type="text" name="q" placeholder="Пребарај производ..." required/>
+                <button type="submit"><i class="fas fa-magnifying-glass"></i></button>
+            </form>
+            <nav>
+                <a href="{% url 'home' %}">Дома</a>
+                <a href="{% url 'product_list' %}">Каталог</a>
+                <a href="#">Статистика</a>
+                {% if user.is_authenticated %}
+                    <form method="post" action="{% url 'logout' %}">
+                        {% csrf_token %}
+                        <button type="submit">Logout</button>
+                    </form>
+                {% else %}
+                    <a href="{% url 'login' %}">Login</a>
+                    <a href="{% url 'register' %}">Sign Up</a>
+                {% endif %}
+            </nav>
+        </div>
+        <!-- MOBILE DARK OVERLAY -->
+        <div id="overlay" onclick="toggleMobileMenu()"></div>
+
+
+    </div>
+
+
+    <div class="product-wrapper">
+        <div class="product-detail">
+            <div class="product-image">
+                {% if product.image_url %}
+                    <img style="width:150px" src="{{ product.image_url }}" alt="{{ product.name }}">
+                {% else %}
+                    <p>📷 Нема слика за овој производ.</p>
+                {% endif %}
+            </div>
+
+            <h1>{{ product.name }}</h1>
+
+            <div class="product-info">
+                <p><strong>Категорија:</strong> {{ product.category }}</p>
+                <p><strong>Продавница:</strong> {{ product.store }}</p>
+                <p><strong>Цена:</strong> {{ product.price }} ден</p>
+            </div>
+
+            <div class="product-actions">
+                <a href="{{ product.product_url }}" target="_blank" class="view-product">🔗 Види производ</a>
+                <button class="add-to-list" onclick="addToList({{ product.id }})">
+                    ➕ Додади во листа
+                </button>
+            </div>
+        </div>
+
+        <div class="similar-products">
+            <h2>Слични производи</h2>
+            <ul>
+                {% for similar in similar_products|slice:":3" %}
+                    {% if similar.price < product.price %}
+                        <div class="cheaper-product-alert"
+                             style="border: 2px solid #e74c3c; background-color: #fdecea; padding: 15px; border-radius: 10px; margin-bottom: 15px; animation: pulse 2s infinite;">
+                            <div style="display: flex; align-items: center; gap: 15px;">
+                                {% if similar.image_url %}
+                                    <img src="{{ similar.image_url }}" alt="{{ similar.name }}"
+                                         style="max-width: 120px; border-radius: 8px;">
+                                {% endif %}
+                                <div>
+                                    <h3 style="color: #c0392b; margin-bottom: 5px;">ПОЕВТИНО!</h3>
+                                    <p><strong>Име:</strong> <a href="{% url 'product_detail' similar.id %}"
+                                                                style="color: #2980b9; font-weight: bold;">{{ similar.name }}</a>
+                                    </p>
+                                    <p><strong>Цена:</strong> <span
+                                            style="color: #c0392b; font-weight: bold;">{{ similar.price }} ден</span>
+                                        (заштеда: {{ product.price|subtract:similar.price }} ден)</p>
+                                    <p><strong>Продавница:</strong>
+                                        {% if similar.store == "Vero" %}
+                                            <img src="{% static 'images/vero_logo.png' %}" alt="Vero"
+                                                 style="height: 30px; vertical-align: middle;">
+                                        {% elif similar.store == "Reptil" %}
+                                            <img src="{% static 'images/reptil_logo.jpg' %}" alt="Reptil"
+                                                 style="height: 30px; vertical-align: middle;">
+                                        {% elif similar.store == "Ramstore" %}
+                                            <img src="{% static 'images/ramstore_logo.png' %}" alt="Ramstore"
+                                                 style="height: 30px; vertical-align: middle;">
+                                        {% endif %}
+                                        {{ similar.store }}
+                                    </p>
+                                    <a href="{% url 'product_detail' similar.id %}"
+                                       style="display: inline-block; margin-top: 10px; padding: 8px 15px; background-color: #e74c3c; color: white; border-radius: 5px; text-decoration: none;">Види
+                                        производ</a>
+                                </div>
+                            </div>
+                        </div>
+                    {% else %}
+                        <li class="similar-product">
+                            <div style="display: flex; align-items: center; gap: 15px;">
+                                {% if similar.image_url %}
+                                    <img src="{{ similar.image_url }}" alt="{{ similar.name }}"
+                                         style="max-width: 80px; border-radius: 6px;">
+                                {% endif %}
+                                <div>
+                                    <a href="{% url 'product_detail' similar.id %}">{{ similar.name }}</a><br>
+                                    <span>Цена: {{ similar.price }} ден</span>
+                                    {% if similar.store == "Vero" %}
+                                        <img src="{% static 'images/vero_logo.png' %}" alt="Vero"
+                                             style="height: 25px; vertical-align: middle;">
+                                    {% elif similar.store == "Reptil" %}
+                                        <img src="{% static 'images/reptil_logo.jpg' %}" alt="Reptil"
+                                             style="height: 25px; vertical-align: middle;">
+                                    {% elif similar.store == "Ramstore" %}
+                                        <img src="{% static 'images/ramstore_logo.png' %}" alt="Ramstore"
+                                             style="height: 25px; vertical-align: middle;">
+                                    {% endif %}
+                                    <span class="similar-store"> | {{ similar.store }}</span>
+                                </div>
+                            </div>
+                        </li>
+                    {% endif %}
+                {% empty %}
+                    <li>Нема слични производи.</li>
+                {% endfor %}
+            </ul>
+        </div>
+
+        <style>
+            @keyframes pulse {
+                0% {
+                    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4);
+                }
+                70% {
+                    box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
+                }
+                100% {
+                    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
+                }
+            }
+
+            .cheaper-product-alert {
                 position: relative;
-                background-color: #f8f9fa;
-                border-left: 4px solid #6c757d;
-            }
-
-            .alert-close-btn {
-                position: absolute;
-                right: 15px;
-                top: 50%;
-                transform: translateY(-50%);
-                cursor: pointer;
-                font-size: 20px;
-            }
-
-            .similar-product-card {
-                padding: 15px;
-                margin-bottom: 15px;
-                border-radius: 8px;
-                transition: all 0.3s ease;
-                background: white;
-                border: 1px solid #e0e0e0;
-            }
-
-            .similar-product-card.cheaper {
-                border: 2px solid #e74c3c;
-                background-color: #fff5f5;
-                box-shadow: 0 4px 12px rgba(231, 76, 60, 0.15);
-                position: relative;
-            }
-
-            .similar-product-card.cheaper::before {
-                content: "ПОНИСКА ЦЕНА";
+            }
+
+            .cheaper-product-alert::before {
+                content: "🔥 Поевтино!";
                 position: absolute;
                 top: -10px;
                 left: 15px;
-                background: #e74c3c;
+                background-color: #e74c3c;
                 color: white;
-                padding: 3px 8px;
-                border-radius: 4px;
-                font-size: 11px;
+                padding: 3px 10px;
+                border-radius: 20px;
+                font-size: 12px;
                 font-weight: bold;
             }
-
-            /* Improved similar product image container */
-            .similar-product-image {
-                flex: 0 0 100px;
-                height: 100px;
-                margin-right: 15px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                background: #f9f9f9;
-                border-radius: 6px;
-                overflow: hidden;
-                border: 1px solid #eee;
-            }
-
-            .similar-product-image img {
-                max-width: 100%;
-                max-height: 100%;
-                object-fit: contain;
-                width: auto;
-                height: auto;
-            }
-
-            /* Enhanced price highlighting */
-            .similar-product-price.cheaper {
-                color: #e74c3c;
-                font-weight: bold;
-                font-size: 18px;
-            }
-
-            /* Improved list selection badge */
-            .selected-list-badge {
-                font-size: 12px;
-                background: #2e652e;
-                color: white;
-                padding: 4px 8px;
-                border-radius: 12px;
-                margin-left: 8px;
-                display: inline-flex;
-                align-items: center;
-                line-height: 1;
-                transition: all 0.2s;
-            }
-
-            .lists-toggle:hover .selected-list-badge {
-                background: #1f3f1f;
-                transform: scale(1.05);
-            }
-
-            /* Make sure images in similar products are visible */
-            .similar-product-image img {
-                display: block;
-                width: auto;
-                height: auto;
-                max-width: 100%;
-                max-height: 100%;
-            }
-
-            :root {
-                --fa-style-family-classic: "Font Awesome 6 Free";
-                --fa-font-solid: normal 900 1em / 1 "Font Awesome 6 Free";
-            }
-
-            .mobile-search-form button {
-                margin-left: -7px;
-            }
-
-            /* Prevent horizontal scrolling */
-            body {
-                overflow-x: hidden;
-                width: 100%;
-            }
-
-            .mobile-menu{
-                width: 86%;
-            }
-
-            /* ===== RESPONSIVENESS ===== */
-            @media (max-width: 1200px) {
-                .main-container {
-                    grid-template-columns: 250px 1fr;
-                }
-
-                .right-column {
-                    grid-column: span 2;
-                }
-
-                .chart-container {
-                    height: 400px;
-                }
-            }
-
-            @media (max-width: 992px) {
-                .main-container {
-                    grid-template-columns: 1fr;
-                    padding: 15px;
-                    gap: 15px;
-                }
-
-                .left-column, .middle-column, .right-column {
-                    width: 100%;
-                }
-
-                .right-column {
-                    grid-column: span 1;
-                }
-
-                .product-image-container img {
-                    max-height: 200px;
-                }
-
-                .similar-product-card {
-                    flex-direction: column;
-                    align-items: flex-start;
-                }
-
-                .similar-product-image {
-                    margin-bottom: 10px;
-                    margin-right: 0;
-                }
-
-                .similar-product-actions {
-                    margin-top: 10px;
-                    width: 100%;
-                    text-align: left;
-                }
-
-                .view-similar-btn {
-                    display: block;
-                    width: 100%;
-                    text-align: center;
-                }
-            }
-
-            @media (max-width: 768px) {
-                .promo-banner {
-                    display: none;
-                }
-
-                .chart-summary {
-                    grid-template-columns: 1fr;
-                }
-
-                .form-row {
-                    flex-direction: column;
-                }
-
-                .similar-product-image {
-                    width: 100%;
-                    height: auto;
-                    flex: none;
-                }
-            }
-
-            @media (max-width: 576px) {
-                .main-container {
-                    padding: 10px;
-                }
-
-                .product-info h2 {
-                    font-size: 18px;
-                }
-
-                .similar-products h3 {
-                    font-size: 16px;
-                }
-
-                .similar-product-card {
-                    padding: 10px;
-                }
-
-                .price-chart-container h3 {
-                    font-size: 16px;
-                }
-
-                .chart-container {
-                    height: 300px;
-                }
-            }
-            .header-search input{
-                width: 102%;
-            }
         </style>
-    </head>
-    <body>
-
-    <!-- Message container for alerts -->
-    <div class="message-container">
-        {% if messages %}
-            {% for message in messages %}
-                <div class="alert alert-{{ message.tags }}">
-                    {{ message }}
-                    <span class="alert-close-btn" onclick="this.parentElement.remove()">×</span>
-                </div>
-            {% endfor %}
-        {% endif %}
+
     </div>
-
-    <!-- Main content -->
-    <div class="main-container">
-        <!-- Left column - Add banner below product image -->
-        <div class="left-column">
-            <div class="product-image-container">
-                {% if product.image_url %}
-                    <img src="{{ product.image_url }}" alt="{{ product.name }}">
-                {% else %}
-                    <div class="no-image-placeholder">
-                        <span>Нема слика</span>
-                    </div>
-                {% endif %}
-            </div>
-
-            <div class="product-actions">
-                <a href="{{ product.product_url }}" target="_blank" class="view-product-btn">
-                    <i class="fas fa-external-link-alt"></i> Види производ
-                </a>
-                <button class="add-to-list-btn" onclick="addToList({{ product.id }})">
-                    <i class="fas fa-plus"></i> Додади во листа
-                </button>
-            </div>
-
-            <!-- New promotional banner -->
-            <div class="promo-banner">
-                <img src="{% static 'images/vertical_banner.png' %}" alt="Промоција">
-                <div class="banner-overlay">
-                    <h4>Специјална понуда!</h4>
-                    <p>Дознајте ги нашите најнови промоции</p>
-                </div>
-            </div>
+    <div id="listModal" style="display: none;" class="modal">
+        <div class="modal-content">
+            <span class="close-modal" onclick="closeModal()">&times;</span>
+            <h3>Избери листа</h3>
+            <ul id="listOptions">
+                {% for list in user_lists %}
+                    <li>
+                        <button onclick="addToList({{ list.id }})">{{ list.name }}</button>
+                    </li>
+                {% empty %}
+                    <li>Немаш листи. <a href="{% url 'create_list' %}">Креирај тука</a></li>
+                {% endfor %}
+            </ul>
         </div>
-        <!-- Middle column - Product info and similar products -->
-        <div class="middle-column">
-            <div class="product-info">
-                <h2>{{ product.name }}</h2>
-
-                <div class="info-item">
-                    <span class="info-label">Категорија:</span>
-                    <span class="info-value">{{ product.category | translate_category }}</span>
-                </div>
-
-                <div class="info-item">
-                    <span class="info-label">Продавница:</span>
-                    <span class="info-value">
-                    {% if product.store == "Vero" %}
-                        <img src="{% static 'images/vero_logo1.png' %}" alt="Vero"
-                             style="height: 25px; vertical-align: middle;">
-                    {% elif product.store == "Reptil" %}
-                        <img src="{% static 'images/reptil_logo.jpg' %}" alt="Reptil"
-                             style="height: 25px; vertical-align: middle;">
-                    {% elif product.store == "Ramstore" %}
-                        <img src="{% static 'images/ramstore_logo.png' %}" alt="Ramstore"
-                             style="height: 25px; vertical-align: middle;">
-                    {% endif %}
-                </span>
-                </div>
-
-                <div class="info-item">
-                    <span class="info-label">Цена:</span>
-                    <span class="info-value" style="font-weight: bold; font-size: 18px; color: #2e652e;">
-                    {{ product.price }} ден
-                </span>
-                </div>
-            </div>
-
-            <div class="similar-products">
-                <h3><i class="fas fa-random"></i> Слични производи</h3>
-
-                {% for similar in similar_products|slice:":5" %}
-                    <div class="similar-product-card {% if similar.price < product.price %}cheaper{% endif %}">
-                        <div class="similar-product-image">
-                            {% if similar.image %}
-                                <img src="{{ similar.image }}" alt="{{ similar.name }}"
-                                     onerror="this.onerror=null;this.src='{% static 'images/no-image.png' %}'">
-                            {% else %}
-                                <img src="{% static 'images/no-image.png' %}" alt="Нема слика">
-                            {% endif %}
-                        </div>
-
-                        <div class="similar-product-info">
-                            <div class="similar-product-name">
-                                <a href="{% url 'product_detail' similar.id %}">{{ similar.name }}</a>
-                            </div>
-                            <div class="similar-product-price {% if similar.price < product.price %}cheaper{% endif %}">
-                                {{ similar.price }} ден
-                                {% if similar.price < product.price %}
-                                    <span style="color: #e74c3c; font-size: 13px;">
-                                    (Заштеда: {{ product.price|subtract:similar.price }} ден)
-                                </span>
-                                {% endif %}
-                            </div>
-                            <div class="similar-product-store">
-                                {% if similar.store == "Vero" %}
-                                    <img src="{% static 'images/vero_logo1.png' %}" alt="Vero"
-                                         style="height: 20px; vertical-align: middle;">
-                                {% elif similar.store == "Reptil" %}
-                                    <img src="{% static 'images/reptil_logo.jpg' %}" alt="Reptil"
-                                         style="height: 20px; vertical-align: middle;">
-                                {% elif similar.store == "Ramstore" %}
-                                    <img src="{% static 'images/ramstore_logo.png' %}" alt="Ramstore"
-                                         style="height: 20px; vertical-align: middle;">
-                                {% endif %}
-                            </div>
-                        </div>
-
-                        <div class="similar-product-actions">
-                            <a href="{% url 'product_detail' similar.id %}" class="view-similar-btn">
-                                <i class="fas fa-info-circle"></i> Детали
-                            </a>
-                        </div>
-                    </div>
-                {% empty %}
-                    <div style="padding: 20px; text-align: center; color: #666;">
-                        Нема слични производи во моментов.
-                    </div>
-                {% endfor %}
-            </div>
-        </div>
-
-        <!-- Right column - Price chart -->
-        <div class="right-column">
-            <div class="price-history-container">
-                <div class="section-header">
-                    <i class="fas fa-chart-line"></i>
-                    <h3>Историја на цени</h3>
-                </div>
-
-                <div class="chart-container">
-                    {% if price_history %}
-                        <canvas id="priceChart"></canvas>
-                        <div class="chart-summary">
-                            <div class="summary-item">
-                                <span class="summary-label">Тековна цена:</span>
-                                <span class="summary-value">{{ product.price|floatformat:2 }} ден</span>
-                            </div>
-                        </div>
-                    {% else %}
-                        <div class="no-data-message">
-                            <i class="fas fa-exclamation-circle"></i>
-                            <p>Нема достапни историски податоци за цените.</p>
-                        </div>
-                    {% endif %}
-                </div>
-
-                {% if price_history %}
-                    <div class="date-range-selector">
-                        <form method="get" class="date-range-form">
-                            <div class="form-row">
-                                <div class="form-group">
-                                    <label for="start-date"><i class="far fa-calendar-alt"></i> Од:</label>
-                                    <input type="date" id="start-date" name="start_date" class="form-input"
-                                           value="{{ start_date|default:'' }}">
-                                </div>
-                                <div class="form-group">
-                                    <label for="end-date"><i class="far fa-calendar-alt"></i> До:</label>
-                                    <input type="date" id="end-date" name="end_date" class="form-input"
-                                           value="{{ end_date|default:'' }}">
-                                </div>
-                            </div>
-                            <input type="hidden" name="product_id" value="{{ product.id }}">
-                            <button type="submit" class="update-chart-btn">
-                                <i class="fas fa-sync-alt"></i> Ажурирај графикон
-                            </button>
-                        </form>
-                    </div>
-                {% endif %}
-            </div>
-        </div>
-        <!-- List Selection Modal -->
-        <div id="listModal" style="display: none;" class="modal">
-            <div class="modal-content">
-                <span class="close-modal" onclick="closeModal()">×</span>
-                <h3>Избери листа</h3>
-                <ul id="listOptions" style="list-style: none; padding: 0;">
-                    {% for list in user_lists %}
-                        <li style="margin: 10px 0;">
-                            <button onclick="addToList({{ list.id }})"
-                                    style="width: 100%; text-align: left; padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: white; cursor: pointer;">
-                                {{ list.name }}
-                            </button>
-                        </li>
-                    {% empty %}
-                        <li style="margin: 20px 0; text-align: center;">
-                            Немаш листи. <a href="{% url 'create_list' %}" style="color: #2e652e;">Креирај тука</a>
-                        </li>
-                    {% endfor %}
-                </ul>
-            </div>
-        </div>
-
-        <script>
-            function toggleListsDropdown() {
-                document.getElementById("listsDropdown").classList.toggle("show");
-            }
-
-            document.addEventListener('DOMContentLoaded', function () {
-                if (selectedListId && selectedListName) {
-                    document.getElementById("selected-list-name").textContent = selectedListName;
-                }
-
-                // Initialize price chart if data exists
-                {% if price_history %}
-                    initializePriceChart();
-                {% endif %}
-            });
-
-            function initializePriceChart() {
-                const ctx = document.getElementById('priceChart').getContext('2d');
-
-                // Prepare data from Django template
-                const labels = [
-                    {% for entry in chart_data %}
-                        "{{ entry.date|date:'d.m.Y' }}"{% if not forloop.last %},{% endif %}
-                    {% endfor %}
-                ];
-
-                const prices = [
-                    {% for entry in chart_data %}
-                        {{ entry.price }}{% if not forloop.last %},{% endif %}
-                    {% endfor %}
-                ];
-
-                const minPrice = Math.min(...prices);
-                const maxPrice = Math.max(...prices);
-                const range = maxPrice - minPrice;
-                const suggestedMin = Math.max(0, minPrice - range * 0.1);
-                const suggestedMax = maxPrice + range * 0.1;
-
-                new Chart(ctx, {
-                    type: 'line',
-                    data: {
-                        labels: labels,
-                        datasets: [{
-                            label: 'Цена (ден) за {{ product.name }}',
-                            data: prices,
-                            borderColor: '#2ecc71',
-                            backgroundColor: 'rgba(46, 204, 113, 0.1)',
-                            borderWidth: 2,
-                            tension: 0.1,
-                            fill: true
-                        }]
-                    },
-                    options: {
-                        responsive: true,
-                        maintainAspectRatio: false,
-                        scales: {
-                            y: {
-                                beginAtZero: false,
-                                suggestedMin: suggestedMin,
-                                suggestedMax: suggestedMax,
-                                ticks: {
-                                    callback: function (value) {
-                                        return value + ' ден';
-                                    }
-                                },
-                                grid: {
-                                    color: 'rgba(0, 0, 0, 0.05)'
-                                }
-                            },
-                            x: {
-                                grid: {
-                                    display: false
-                                }
-                            }
-                        },
-                        plugins: {
-                            tooltip: {
-                                callbacks: {
-                                    label: function (context) {
-                                        return 'Цена: ' + context.parsed.y + ' ден';
-                                    }
-                                }
-                            }
-                        }
+    </div>
+    <script>
+        let selectedProductId = null;
+
+        function showListOptions(button) {
+            selectedProductId = button.dataset.productId;
+            document.getElementById('listModal').style.display = 'flex';
+        }
+
+        function closeModal() {
+            document.getElementById('listModal').style.display = 'none';
+            selectedProductId = null;
+        }
+
+        function toggleMobileMenu() {
+            const menu = document.getElementById("mobile-menu");
+            const overlay = document.getElementById("overlay");
+
+            menu.classList.toggle("open");
+            overlay.classList.toggle("active");
+        }
+
+        function toggleListsDropdown() {
+            document.getElementById("listsDropdown").classList.toggle("show");
+        }
+
+        let selectedListId = localStorage.getItem('selectedListId');
+        let selectedListName = localStorage.getItem('selectedListName');
+
+
+        document.addEventListener('DOMContentLoaded', function () {
+            if (selectedListId && selectedListName) {
+                document.getElementById("selected-list-name").textContent = selectedListName;
+            }
+        });
+        window.onclick = function (event) {
+            if (!event.target.matches('.lists-toggle')) {
+                const dropdowns = document.getElementsByClassName("dropdown-content");
+                for (let i = 0; i < dropdowns.length; i++) {
+                    const openDropdown = dropdowns[i];
+                    if (openDropdown.classList.contains('show')) {
+                        openDropdown.classList.remove('show');
                     }
+                }
+            }
+        }
+
+        function addToList(productId) {
+            if (!{{ request.user.is_authenticated|yesno:"true,false" }}) {
+                alert("Мора да бите најавени за да додавате производи во листа!");
+                return;
+            }
+
+            if (!selectedListId) {
+                alert("Ве молиме изберете листа од менито 'Листи'!");
+                return;
+            }
+
+            fetch("{% url 'add_to_list' %}", {
+                method: "POST",
+                headers: {
+                    "X-CSRFToken": "{{ csrf_token }}",
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify({
+                    list_id: selectedListId,
+                    product_id: productId
+                })
+            })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        alert(`Производот е успешно додаден во листата "${selectedListName}"!`);
+                    } else {
+                        alert("Грешка: " + data.message);
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    alert("Настана грешка при додавањето на производот.");
                 });
-                try {
-                    new Chart(document.getElementById('priceChart').getContext('2d'), {
-                        type: 'line',
-                        data: {labels: ['Test'], datasets: [{label: 'Test', data: [1]}]}
-                    });
-                    console.log("Test chart created successfully");
-                } catch (e) {
-                    console.error("Chart.js error:", e);
-                }
-            }
-
-            window.onclick = function (event) {
-                if (!event.target.matches('.lists-toggle')) {
-                    const dropdowns = document.getElementsByClassName("dropdown-content");
-                    for (let i = 0; i < dropdowns.length; i++) {
-                        const openDropdown = dropdowns[i];
-                        if (openDropdown.classList.contains('show')) {
-                            openDropdown.classList.remove('show');
-                        }
-                    }
-                }
-            }
-
-            function addToList(productId) {
-                if (!{{ request.user.is_authenticated|yesno:"true,false" }}) {
-                    alert("Мора да бите најавени за да додавате производи во листа!");
-                    return;
-                }
-
-                if (!selectedListId) {
-                    alert("Ве молиме изберете листа од менито 'Листи'!");
-                    return;
-                }
-
-                fetch("{% url 'add_to_list' %}", {
-                    method: "POST",
-                    headers: {
-                        "X-CSRFToken": "{{ csrf_token }}",
-                        "Content-Type": "application/json"
-                    },
-                    body: JSON.stringify({
-                        list_id: selectedListId,
-                        product_id: productId
-                    })
-                })
-                    .then(response => response.json())
-                    .then(data => {
-                        if (data.success) {
-                            alert(`Производот е успешно додаден во листата "${selectedListName}"!`);
-                        } else {
-                            alert("Грешка: " + data.message);
-                        }
-                    })
-                    .catch(error => {
-                        console.error('Error:', error);
-                        alert("Настана грешка при додавањето на производот.");
-                    });
-            }
-
-            function selectList(listId, listName) {
-                selectedListId = listId;
-                selectedListName = listName;
-
-                localStorage.setItem('selectedListId', listId);
-                localStorage.setItem('selectedListName', listName);
-
-                document.getElementById("selected-list-name").textContent = listName;
-
-                document.getElementById("listsDropdown").classList.remove('show');
-                document.getElementById("mobileListsDropdown").classList.remove('show');
-            }
-
-            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>
+        }
+
+        // Add this function for mobile dropdown toggle
+        function toggleMobileListsDropdown() {
+            document.getElementById("mobileListsDropdown").classList.toggle("show");
+        }
+
+        // Close mobile dropdown when clicking outside
+        document.addEventListener('click', function (event) {
+            if (!event.target.closest('.lists-dropdown-mobile') && !event.target.classList.contains('lists-toggle-mobile')) {
+                const dropdown = document.getElementById("mobileListsDropdown");
+                if (dropdown.classList.contains('show')) {
+                    dropdown.classList.remove('show');
+                }
+            }
+        });
+
+        // Update your existing selectList function to work with both dropdowns
+        function selectList(listId, listName) {
+            selectedListId = listId;
+            selectedListName = listName;
+
+            // Store in localStorage
+            localStorage.setItem('selectedListId', listId);
+            localStorage.setItem('selectedListName', listName);
+
+            // Update both desktop and mobile displays
+            document.getElementById("selected-list-name").textContent = listName;
+
+            // Close both dropdowns
+            document.getElementById("listsDropdown").classList.remove('show');
+            document.getElementById("mobileListsDropdown").classList.remove('show');
+        }
+    </script>
+
     </body>
-{% endblock %}
-</html>
+    </html>
Index: main/templates/main/product_list.html
===================================================================
--- main/templates/main/product_list.html	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ main/templates/main/product_list.html	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
@@ -1,2575 +1,1584 @@
-{% extends 'main/header.html' %}
 {% load static %}
-{% 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 */
+{% 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;
+        }
+
+        /* Filters sidebar */
+        .filters {
+            width: 250px;
+            padding: 20px;
+            background-color: #cea274;
+            border-radius: 8px;
+            margin-right: 30px;
+        }
+
+        .filter-section {
+            margin-bottom: 25px;
+            border-bottom: 1px solid #ddd;
+            padding-bottom: 15px;
+        }
+
+        .filter-section h3 {
+            margin-top: 0;
+            margin-bottom: 15px;
+            font-size: 16px;
+        }
+
+        .filter-option {
+            margin-bottom: 10px;
+        }
+
+        .price-slider {
+            width: 100%;
+        }
+
+        .price-range {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+            font-size: 12px;
+            color: #666;
+        }
+
+        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;
+        }
+
+        .sorting-options select {
+            width: auto;
+            margin-left: 10px;
+        }
+
+        .grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 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;
+        }
+
+        .product-price {
+            color: #007bff;
+            font-weight: bold;
+            margin-bottom: 10px;
+        }
+
+        .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;
+        }
+
+        .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.8em;
+            color: #666;
+            margin-top: 3px;
+        }
+
+        .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;
+        }
+
+        .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 {
                 display: flex;
-                max-width: 1200px;
-                margin: 0 auto;
-                padding: 0 20px;
-                margin-top: 20px;
-            }
-
-            .header-search input {
-                width: 97%;
-            }
-
-            /* 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;
-                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;
-                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;
+            }
+
+            #logo {
+                margin-right: 0;
+                order: 2;
+                flex-grow: 1;
                 text-align: center;
             }
 
-            .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;
-                }
-
-                .pagination {
-                    margin-bottom: 50px;
-                }
-            }
-
-            @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;
+            .menu-toggle {
                 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: 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 {
+                padding: 5px 15px;
+                order: 1;
+            }
+
+            #other {
+                display: none;
+                width: 100%;
+                flex-direction: column;
+                margin-top: 10px;
+                padding: 0;
+                background: none;
+                border-radius: 0;
+                margin-left: 0;
+            }
+
+            #other.active {
                 display: flex;
-                max-width: 1200px;
-                margin: 0 auto;
-                padding: 0 20px;
+            }
+
+            #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) {
+            #desktop-navbar {
+                display: none;
+            }
+
+            #mobile-header {
+                display: flex;
+            }
+        }
+
+        .mobile-search-form {
+            display: flex;
+            align-items: center;
+            padding: 10px 16px;
+            gap: 8px;
+            background-color: white;
+            border-bottom: 1px solid #eee;
+        }
+
+        .mobile-search-form input {
+            flex: 1;
+            padding: 8px 14px;
+            border-radius: 20px;
+            border: 1px solid #ccc;
+            font-size: 14px;
+            outline: none;
+        }
+
+        .mobile-search-form button {
+            background-color: #2ecc71;
+            color: white;
+            border: none;
+            padding: 8px 12px;
+            border-radius: 50%;
+            font-size: 16px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+
+        .mobile-search-form button:hover {
+            background-color: #27ae60;
+        }
+
+        /* 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;
             }
 
-            /* 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;
+                padding: 10px 15px;
+                font-size: 0.9rem;
             }
 
             .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;
-            }
-
+                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 {
+            margin-bottom: 25px;
+            border-bottom: 1px solid #ddd;
+            padding-bottom: 15px;
+            max-height: 200px; /* Ограничи максимална висина */
+            overflow-y: auto; /* Овозможи вертикален скрол */
+        }
+
+        .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 h3 {
+            margin-top: 0;
+            margin-bottom: 15px;
+            font-size: 16px;
+            position: sticky;
+            top: 0;
+            background-color: #cb7e31;
+            padding: 5px 0;
+            z-index: 1;
+            color: white;
+            padding-left: 10px;
+            border-radius: 10px;
+        }
+
+        /* Стилови за скролбар за различни прелистувачи */
+        .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 {
-                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 {
+                max-height: 150px; /* Помал скрол контејнер за мобилни */
+            }
+        }
+
+        @keyframes pulse {
+            0% {
+                transform: scale(1);
+            }
+            50% {
                 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;
-                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: 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;
-                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);
-                }
-            }
-        </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 }}">
+            100% {
+                transform: scale(1);
+            }
+        }
+
+        .pulse-on-click {
+            animation: pulse 0.4s ease;
+        }
+
+
+    </style>
+</head>
+<body>
+{% load static %}
+<div id="navbar">
+
+    <!-- DESKTOP NAVBAR -->
+    <div id="desktop-navbar">
+        <!-- Logo on the left -->
+        <div id="logo">
+            <a href="{% url 'home' %}"><img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого"/></a>
+        </div>
+
+        <!-- Navigation links on the right -->
+        <div id="nav-links">
+            {#            <a href="{% url 'home' %}">Дома</a>#}
+            <a href="{% url 'product_list' %}">Каталог</a>
+            <a href="#"><img src="{% static 'images/stats.png' %}" width="57px"></a>
+            <a href="{% url 'view_lists' %}"><img src="{% static 'images/lists.png' %}" width="30px"></a>
+            <!-- Add the Листи link here -->
+
+            <div class="user-actions">
+                {% if user.is_authenticated %}
+                    <form method="post" action="{% url 'logout' %}">
+                        {% csrf_token %}
+                        <button type="submit" class="logout-btn"><img src="{% static 'images/log_out.png' %}"
+                                                                      width="35px"></button>
+                    </form>
+                {% else %}
+                    <a style="padding: 10px" href="{% url 'login' %}" id="login">Login</a>
+                    <a style="padding: 10px" href="{% url 'register' %}" id="signup">Sign Up</a>
                 {% 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>
+        </div>
+    </div>
+
+    <!-- MOBILE NAVBAR -->
+    <div id="mobile-header">
+        <div id="mobile-logo">
+            <img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого" style="height: 30px;">
+        </div>
+        <div class="menu-toggle" onclick="toggleMobileMenu()">☰</div>
+    </div>
+
+    <!-- MOBILE SLIDE-IN 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">
+            <input type="text" name="q" placeholder="Пребарај производ..." required/>
+            <button type="submit"><i class="fas fa-magnifying-glass"></i></button>
+        </form>
+        <nav>
+            <a href="{% url 'home' %}">Дома</a>
+            <a href="{% url 'product_list' %}">Каталог</a>
+            <a href="#">Статистика</a>
+            <a href="{% url 'view_lists' %}">Листи</a> <!-- Add Листи here as well -->
+
+            {% if user.is_authenticated %}
+                <form method="post" action="{% url 'logout' %}">
+                    {% csrf_token %}
+                    <button type="submit">Logout</button>
+                </form>
+            {% else %}
+                <a href="{% url 'login' %}">Login</a>
+                <a href="{% url 'register' %}">Sign Up</a>
+            {% endif %}
+        </nav>
+    </div>
+    <!-- MOBILE DARK OVERLAY -->
+    <div id="overlay" onclick="toggleMobileMenu()"></div>
+
+</div>
+
+<div id="horizontal_picture"
+     style="background-image: url('{% static 'images/baner1.jpg' %}'); background-size: cover; background-position: center; padding: 50px 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="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">
+                <h3>Категории</h3>
+                {% for category in categories %}
                     <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="-"> -- Избери --
-                        </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.store == 'Vero' %}#}
-                                {#                                    <img src="{% static 'images/no-image.png' %}" alt="no-image">#}
-                                {#                                {% else %}#}
-                                {#                                    <img src="{{ product.image_url }}" alt="{{ product.name }}"#}
-                                {#                                         style="max-width: 100%; max-height: 100%;">#}
-                                {#                                {% endif %}#}
-                                {% if product.image_url and product.store != 'Vero' %}
-                                    <img src="{{ product.image_url }}" alt="{{ product.name }}"
-                                         style="max-width: 100%; max-height: 100%;">
-                                {% else %}
-                                    <img src="{% static 'images/no-image.png' %}" alt="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"
-                                                data-product-id="{{ product.id }}">
-                                            <i class="far fa-heart"></i>
-                                        </button>
-                                    </div>
-
-
-                                </div>
-                            </div>
-                        </a>
-                    </div>
-                {% empty %}
-                    <div class="no-products">
-                        Нема пронајдени продукти што ги задоволуваат избраните филтри
+                        <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>
 
-            <!-- 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">
+            <div class="filter-section">
+                <h3>Цена</h3>
+                <input type="range" min="0" max="1000" value="{{ selected_max_price|default:'1000' }}"
+                       class="price-slider" id="priceRange" name="max_price">
+                <div class="price-range">
+                    <span>0 ден.</span>
+                    <span id="maxPriceDisplay">{{ selected_max_price|default:'1000' }} ден.</span>
+                </div>
+            </div>
+
+            <div class="filter-section">
+                <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>
+
+            <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">
+            <label style="margin-top: 7px" for="sort">Сортирај по:</label>
+            <select id="sort" onchange="updateSort()">
+                <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>
+                <option value="popular" {% if selected_sort == 'popular' %}selected{% endif %}>Најпопуларни</option>
+            </select>
+            <select id="listSelector" class="form-select">
+                <option value="">-- Избери листа --</option>
+            </select>
+        </div>
+
+        <!-- Product Grid -->
+        <div class="grid">
+            {% for product in page_obj %}
+                <div class="product-card">
+                    <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 class="product-price">
                                 {% if product.popust %}
-                                    <div class="ribbon-flag"></div>
-                                    <div class="ribbon-flag-text">
-                                        <img src="{% static 'images/novo_disc.png' %}" width="90px">
-                                    </div>
+                                    <span class="old-price">{{ product.price }} ден.</span>
+                                    {{ product.actual_price }} ден.
+                                    <span class="discount-badge">Попуст!</span>
+                                    {% if product.popust_date %}
+                                        <div class="discount-valid">
+                                            Важи до: {{ product.popust_date|date:"d.m.Y" }}
+                                        </div>
+                                    {% endif %}
+                                {% else %}
+                                    {{ product.price }} ден.
                                 {% endif %}
-
-                                <!-- Move the anchor to only wrap the product image and info, not the button -->
-                                <a href="{% url 'product_detail' product.id %}">
-                                    <div class="product-image">
-                                        {% if product.image_url and product.store != 'Vero' %}
-                                            <img src="{{ product.image_url }}" alt="{{ product.name }}"
-                                                 style="max-width: 100%; max-height: 100%;">
-                                        {% else %}
-                                            <img src="{% static 'images/no-image.png' %}" alt="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>
-                                </a>
-
+                            </div>
+
+
+                            <div class="product-store">
+                                {% if product.store == 'Vero' %}
+                                    <img src="{% static 'images/vero_logo.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;">
+                                {% 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">Види
+                                    производ</a>
                                 <div class="product-actions">
-                                    <a href="{{ product.product_url }}" target="_blank" class="view-product"
-                                       style="color: rgba(22,53,22,0.93); ">Види производ</a>
-
-                                    <!-- Buttons are now directly inside the div -->
                                     <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"
-                                            data-product-id="{{ product.id }}">
-                                        <i class="far fa-heart"></i>
+                                            data-product-id="{{ product.id }}">Додај
+                                        во листа
                                     </button>
                                 </div>
+
+
                             </div>
-                        {% endfor %}
-                    </div>
+                        </div>
+                    </a>
                 </div>
+            {% empty %}
+                <div class="no-products">
+                    Нема пронајдени продукти што ги задоволуваат избраните филтри
+                </div>
+            {% endfor %}
+        </div>
+
+        {% if page_obj.has_other_pages %}
+            <div class="pagination">
+        <span class="step-links" style="margin-bottom: 40px">
+            {% if page_obj.has_previous %}
+                <a href="?page=1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+                        {% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">&laquo;</a>
+                <a href="?page=
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+                        {{ page_obj.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">&lsaquo;</a>
             {% endif %}
 
-            {% if page_obj.has_other_pages %}
-                <div class="pagination">
-            <span class="step-links" style="margin-bottom: 40px">
-                {% if page_obj.has_previous %}
-                    <a href="?page=1
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-                            {% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">&laquo;</a>
-                    <a href="?page=
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-                            {{ page_obj.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">&lsaquo;</a>
-                {% endif %}
-
-                <span class="current">
-                    Страна {{ page_obj.number }} од {{ page_obj.paginator.num_pages }}.
-                </span>
-
-                {% if page_obj.has_next %}
-                    <a href="?page=
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-                            {{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">&rsaquo;</a>
-                    <a href="?page=
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-                            {{ page_obj.paginator.num_pages }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">&raquo;</a>
-                {% endif %}
+            <span class="current">
+                Страна {{ page_obj.number }} од {{ page_obj.paginator.num_pages }}.
             </span>
-                </div>
+
+            {% if page_obj.has_next %}
+                <a href="?page=
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+                        {{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">&rsaquo;</a>
+                <a href="?page=
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+                        {{ page_obj.paginator.num_pages }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">&raquo;</a>
             {% endif %}
-        </div>
+        </span>
+            </div>
+        {% endif %}
     </div>
-
-
-    <script>
-        let userLists = [];
-        let currentProductId = null;
-
-        document.addEventListener('DOMContentLoaded', function () {
-            if (window.innerWidth <= 768) {
-                document.querySelectorAll('.filter-section').forEach(section => {
-                    section.classList.remove('active');
-                });
-            }
-
-            const priceSlider = document.getElementById('priceRange');
-            const maxPriceDisplay = document.getElementById('maxPriceDisplay');
-
-            if (priceSlider && maxPriceDisplay) {
-                if ("{{ selected_max_price }}" && "{{ selected_max_price }}" !== "1000") {
-                    priceSlider.value = "{{ selected_max_price }}";
-                    maxPriceDisplay.textContent = "{{ selected_max_price }}" + ' ден.';
-                }
-
-                priceSlider.addEventListener('input', function () {
-                    maxPriceDisplay.textContent = this.value + ' ден.';
-                });
-            }
-
-            const sortSelect = document.getElementById('sort');
-            if (sortSelect) {
-                sortSelect.addEventListener('change', function () {
-                    const sortValue = this.value;
-
-                    const urlParams = new URLSearchParams(window.location.search);
-
-                    urlParams.set('sort', sortValue);
-                    urlParams.set('page', '1');
-                    window.location.search = urlParams.toString();
-                });
-            }
-
-            document.querySelectorAll('.filter-option input[type="checkbox"]').forEach(checkbox => {
-                checkbox.addEventListener('change', function () {
-                    document.getElementById('filterForm').submit();
-                });
+</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) {
+            document.querySelectorAll('.filter-section').forEach(section => {
+                section.classList.remove('active');
             });
-
-            document.getElementById('filterForm').addEventListener('submit', function (e) {
-            });
-
-            setupSearchFunctionality();
-            {% if user.is_authenticated %}
-                fetchUserLists();
-            {% endif %}
-
-            if (!localStorage.getItem('catalogTourShown')) {
-                setTimeout(showInstructionModal, 1000);
-                localStorage.setItem('catalogTourShown', 'true');
-            }
-
-            document.getElementById('closeInstruction')?.addEventListener('click', function () {
-                document.getElementById('instructionModal').style.display = 'none';
-            });
-
-            setupFavoriteButtons();
-        });
-
-        function toggleFilters() {
-            document.querySelectorAll('.filter-section').forEach(section => {
-                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')) {
@@ -2579,263 +1588,432 @@
             }
         });
-
-        async function handleAddToListClick(e) {
-            e.preventDefault();
-            e.stopPropagation();
-
-            this.classList.remove('pulse-on-click');
-            void this.offsetWidth; // Trigger reflow
-            this.classList.add('pulse-on-click');
-
-            const productId = this.dataset.productId;
-
-            const selectedListId = document.getElementById('listSelector')?.value;
-
-            if (!selectedListId) {
-                alert("Ве молиме изберете листа.");
-                return;
-            }
-
-            try {
-                const response = await fetch('/api/lists/add-product/', {
+    });
+    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': getCookie('csrftoken'),
+                        'X-CSRFToken': '{{ csrf_token }}'
                     },
-                    body: JSON.stringify({product_id: productId, list_id: selectedListId})
-                });
-
-                const result = await response.json();
-                if (result.success) {
-                    const counter = document.querySelector(`#counter-${productId}`);
-                    if (counter) counter.textContent = parseInt(counter.textContent) + 1;
-                    alert("Продуктот е успешно додаден во листата!");
-                } else {
-                    alert("Грешка: " + result.message);
-                }
-            } catch (error) {
-                console.error("Fetch error:", error);
-                alert("Настана грешка. Обидете се повторно.");
-            }
-        }
-
-        async function fetchUserLists() {
-            try {
-                const response = await fetch('/api/lists/');
-                const data = await response.json();
-                console.log("Fetched data from /api/lists/:", data);
-
-                if (data.lists && Array.isArray(data.lists)) {
-                    userLists = data.lists;
-                } else {
-                    console.error("Unexpected response format:", data);
-                    userLists = [];
-                }
-            } catch (error) {
-                console.error('Error fetching lists:', error);
-                alert('Грешка при вчитување на листите.');
-            }
-        }
-
-        function setupSearchFunctionality() {
-            const searchInput = document.getElementById('searchInput');
-            const suggestionsDiv = document.getElementById('suggestions');
-            const searchForm = document.getElementById('searchForm');
-
-            const mobileSearchInput = document.getElementById('mobileSearchInput');
-            const mobileSearchForm = document.getElementById('mobileSearchForm');
-
-            if (searchInput && suggestionsDiv && searchForm) {
-                setupSearch(searchInput, searchForm, suggestionsDiv);
-            }
-
-            if (mobileSearchInput && mobileSearchForm) {
-                setupSearch(mobileSearchInput, mobileSearchForm, suggestionsDiv);
-            }
-
-            document.addEventListener('click', function (e) {
-                if (suggestionsDiv &&
-                    !searchInput?.contains(e.target) &&
-                    !suggestionsDiv.contains(e.target) &&
-                    !mobileSearchInput?.contains(e.target)) {
-                    suggestionsDiv.style.display = 'none';
-                }
-            });
-        }
-
-        function setupSearch(input, form, suggestionsDiv) {
-            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();
-                }
-            });
-        }
-
-        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 setupFavoriteButtons() {
-            const favoriteButtons = document.querySelectorAll('.favorite-btn');
-            favoriteButtons.forEach(button => {
-                button.addEventListener('click', function (e) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    const productId = this.getAttribute('data-product-id');
-                    toggleFavorite(this, productId);
-                });
-            });
-
-            {% if user.is_authenticated %}
-                fetch('/get-favorites/')
+                    body: JSON.stringify({
+                        product_id: productId
+                    })
+                })
                     .then(response => response.json())
                     .then(data => {
                         if (data.success) {
-                            favoriteButtons.forEach(button => {
-                                const productId = button.getAttribute('data-product-id');
-                                if (data.favorites.includes(parseInt(productId))) {
-                                    const icon = button.querySelector('i');
-                                    icon.classList.remove('far');
-                                    icon.classList.add('fas');
-                                    icon.style.color = '#e74c3c';
-                                }
-                            });
+                            alert('Продуктот е додаден во вашата листа!');
+                        } else {
+                            alert('Грешка: ' + data.message);
                         }
                     })
                     .catch(error => {
-                        console.error('Error fetching favorites:', error);
+                        console.error('Error:', error);
+                        alert('Настана грешка при додавање на продуктот.');
                     });
-            {% endif %}
-        }
-
-        function toggleFavorite(button, productId) {
-            const icon = button.querySelector('i');
-
-            fetch('/toggle-favorite/', {
+            });
+        });
+    });
+    // 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 => {
+                if (data.success) {
+                    userLists.push({id: data.list_id, name: listName});
+                    renderUserLists();
+                    alert('Листата е успешно креирана!');
+                } else {
+                    alert('Грешка: ' + data.message);
+                }
+            })
+            .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();
+        }
+
+        // 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': getCookie('csrftoken')
+                    'X-CSRFToken': getCSRFToken()
                 },
-                body: JSON.stringify({product_id: productId})
+                body: JSON.stringify({
+                    product_id: productId,
+                    list_id: listId
+                })
+            });
+
+            const data = await response.json();
+
+            if (data.success) {
+                alert('Продуктот е успешно додаден во листата!');
+                closeModal();
+            } else {
+                alert('Грешка: ' + data.message);
+            }
+        } catch (error) {
+            console.error('Error:', error);
+            alert('Настана грешка при додавање на продуктот.');
+        }
+    }
+
+    // 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);
+                }
             })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        icon.classList.toggle('far');
-                        icon.classList.toggle('fas');
-
-                        if (icon.classList.contains('fas')) {
-                            icon.style.color = '#e74c3c';
-                            button.classList.add('pulse');
-                            setTimeout(() => button.classList.remove('pulse'), 600);
-                        } else {
-                            icon.style.color = '#ccc';
-                        }
-
-                        if (window.location.pathname === '/favorites/') {
-                            window.location.reload();
-                        }
+            .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();
+            }
+        });
+
+        // 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 {
-                        console.error('Failed to toggle favorite:', data.message);
-                        if (data.redirect) {
-                            window.location.href = data.redirect;
-                        }
+                        alert("Грешка: " + result.message);
                     }
-                })
-                .catch(error => {
-                    console.error('Error toggling favorite:', error);
-                });
-        }
-
+                } 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 cookie of cookies) {
-                    cookie = cookie.trim();
-                    if (cookie.startsWith(name + '=')) {
+                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;
@@ -2845,66 +2023,15 @@
             return cookieValue;
         }
-
-        function showInstructionModal() {
-            const modal = document.getElementById('instructionModal');
-            if (modal) {
-                modal.style.display = 'flex';
-            }
-        }
-
-        function closeTour() {
-            const modal = document.getElementById('instructionModal');
-            if (modal) {
-                modal.style.animation = 'modalExit 0.3s forwards';
-                setTimeout(() => {
-                    modal.style.display = 'none';
-                }, 300);
-            }
-        }
-
-        function updateSort() {
-            const sortSelect = document.getElementById('sort');
-            if (sortSelect) {
-                const sortValue = sortSelect.value;
-
-                const urlParams = new URLSearchParams(window.location.search);
-                urlParams.set('sort', sortValue);
-                urlParams.set('page', '1');
-                window.location.search = urlParams.toString();
-            }
-        }
-    </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>
-                    {#                    <span id="counter-{{ product.id }}">0</span>#}
-                    <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>
-
-    </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 %}
+    });
+    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');
+        });
+    });
+
+
+</script>
+</body>
 </html>
Index: in/templates/main/profile.html
===================================================================
--- main/templates/main/profile.html	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ 	(revision )
@@ -1,10 +1,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-</head>
-<body>
-
-</body>
-</html>
Index: main/templates/main/register.html
===================================================================
--- main/templates/main/register.html	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ main/templates/main/register.html	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
@@ -1,285 +1,179 @@
 {% load static %}
-{% load socialaccount %}
 <!DOCTYPE html>
-<html lang="mk">
+<html lang="en">
 <head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Регистрација</title>
-<style>
-    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
-
-    * {
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-    }
-
-    body {
-        font-family: 'Poppins', Arial, sans-serif;
-        min-height: 100vh;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background: url('{% static "images/baner1.jpg" %}') center/cover no-repeat fixed;
-        position: relative;
-        color: #333;
-        padding: 15px;
-    }
-
-    body::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background: inherit;
-        filter: blur(8px) brightness(0.7);
-        z-index: -1;
-    }
-
-    .auth-container {
-        position: relative;
-        width: 100%;
-        max-width: 700px;
-        background-color: rgba(255, 255, 255, 0.97);
-        padding: 25px;
-        border-radius: 12px;
-        box-shadow: 0 8px 25px rgba(0,0,0,0.2);
-        text-align: center;
-    }
-
-    .auth-container h2 {
-        font-weight: 600;
-        font-size: 1.6rem;
-        margin-bottom: 20px;
-        color: #2e652e;
-    }
-
-    .two-column-form {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 15px;
-    }
-
-    .form-column {
-        flex: 1;
-        min-width: 280px;
-    }
-
-    .form-group {
-        margin-bottom: 12px;
-        text-align: left;
-    }
-
-    .form-group label {
-        display: block;
-        margin-bottom: 5px;
-        font-weight: 500;
-        color: #2e652e;
-        font-size: 0.9rem;
-    }
-
-    .form-group input {
-        width: 100%;
-        padding: 10px 12px;
-        border: 1.5px solid #ddd;
-        border-radius: 6px;
-        font-size: 0.9rem;
-        transition: all 0.3s ease;
-    }
-
-    .form-group input:focus {
-        border-color: #28a745;
-        box-shadow: 0 0 5px rgba(40, 167, 69, 0.3);
-        outline: none;
-    }
-
-    .full-width {
-        width: 100%;
-        flex-basis: 100%;
-    }
-
-    button[type="submit"] {
-        width: 100%;
-        padding: 12px;
-        background-color: #2e652e;
-        color: white;
-        font-weight: 600;
-        font-size: 0.95rem;
-        border: none;
-        border-radius: 6px;
-        cursor: pointer;
-        transition: background-color 0.3s ease;
-        margin-top: 8px;
-    }
-
-    button[type="submit"]:hover {
-        background-color: #1f3f1f;
-    }
-
-    .divider {
-        display: flex;
-        align-items: center;
-        margin: 15px 0;
-        color: #777;
-        font-size: 0.85rem;
-    }
-
-    .divider::before,
-    .divider::after {
-        content: "";
-        flex: 1;
-        height: 1px;
-        background-color: #ddd;
-    }
-
-    .divider::before {
-        margin-right: 8px;
-    }
-
-    .divider::after {
-        margin-left: 8px;
-    }
-
-    .login-link {
-        margin-top: 15px;
-        font-size: 0.9rem;
-        color: #555;
-    }
-
-    .login-link a {
-        color: #2e652e;
-        font-weight: 600;
-        text-decoration: none;
-    }
-
-    .login-link a:hover {
-        color: #1f3f1f;
-        text-decoration: underline;
-    }
-
-    .errorlist {
-        background: #ffe6e6;
-        border: 1px solid #ff4d4d;
-        color: #d8000c;
-        padding: 8px 10px;
-        margin-bottom: 12px;
-        border-radius: 6px;
-        list-style: none;
-        font-weight: 500;
-        font-size: 0.8rem;
-    }
-
-    .errorlist li {
-        margin: 0;
-    }
-
-    .social-buttons {
-        display: flex;
-        gap: 10px;
-        margin-top: 12px;
-    }
-
-    .social-buttons a {
-        flex: 1;
-        text-align: center;
-        text-decoration: none;
-        padding: 10px;
-        border-radius: 6px;
-        font-weight: 500;
-        color: white;
-        font-size: 0.9rem;
-        transition: all 0.3s ease;
-    }
-
-    .social-buttons a.google {
-        background-color: #DB4437;
-    }
-
-    .social-buttons a.google:hover {
-        background-color: #c1351d;
-    }
-
-    .social-buttons a.facebook {
-        background-color: #3b5998;
-    }
-
-    .social-buttons a.facebook:hover {
-        background-color: #2d4373;
-    }
-
-    .help-text {
-        color: #666;
-        font-size: 0.75rem;
-        display: block;
-        margin-top: 4px;
-    }
-
-    @media (max-width: 650px) {
-        .two-column-form {
-            flex-direction: column;
+    <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;
         }
 
-        .form-column {
-            min-width: 100%;
+        body::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: inherit;
+            filter: blur(8px);
+            z-index: -1;
         }
 
-        .social-buttons {
-            flex-direction: column;
-            gap: 8px;
+        .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;
         }
-    }
-</style>
+
+        .auth-container h2 {
+            text-align: center;
+            margin-bottom: 25px;
+            color: #333;
+            font-size: 28px;
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        .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;
+        }
+
+        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;
+        }
+
+        .login-link {
+            text-align: center;
+            margin-top: 20px;
+        }
+
+        .login-link a {
+            color: #007bff;
+            text-decoration: none;
+            transition: color 0.3s;
+        }
+
+        .login-link a:hover {
+            color: #0056b3;
+            text-decoration: underline;
+        }
+
+        .errorlist {
+            color: #dc3545;
+            margin-bottom: 15px;
+            padding-left: 20px;
+        }
+
+        .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>
 </head>
 <body>
-<div class="auth-container">
-    <h2>Регистрација</h2>
-
-    {% if form.non_field_errors %}
-        <ul class="errorlist full-width">
-        {% for error in form.non_field_errors %}
-            <li>{{ error }}</li>
-        {% endfor %}
+    <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 %}
+            {% endfor %}
         </ul>
-    {% endif %}
-
-    <form method="post" novalidate>
-        {% csrf_token %}
-        <div class="two-column-form">
+        {% endif %}
+        
+        <form method="post">
+            {% csrf_token %}
+            
             {% for field in form %}
-            <div class="form-column">
                 <div class="form-group">
                     {{ field.label_tag }}
                     {{ field }}
                     {% if field.help_text %}
-                        <span class="help-text">{{ field.help_text }}</span>
-                    {% endif %}
-                    {% if field.errors %}
-                        <ul class="errorlist">
-                        {% for error in field.errors %}
-                            <li>{{ error }}</li>
-                        {% endfor %}
-                        </ul>
+                        <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>
-            {% endfor %}
-
-            <div class="full-width">
-                <button type="submit">Регистрирај се</button>
-            </div>
-        </div>
-    </form>
-
-    <div class="divider full-width">или регистрирај се со</div>
-
-    <div class="social-buttons full-width">
-        <a href="{% provider_login_url 'google' %}" class="google">Google</a>
-        <a href="{% provider_login_url 'facebook' %}" class="facebook">Facebook</a>
+        </form>
     </div>
-
-    <div class="login-link full-width">
-        Веќе имате сметка? <a href="{% url 'login' %}">Најавете се</a>
-    </div>
-</div>
 </body>
 </html>
Index: main/templates/main/stats.html
===================================================================
--- main/templates/main/stats.html	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ main/templates/main/stats.html	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
@@ -1,1057 +1,376 @@
-{% extends 'main/header.html' %}
-{% load category_filters %}
-{% load custom_filters %}
 {% load static %}
-{% block content %}
-
-<div class="message-container">
-    {% if messages %}
-        {% for message in messages %}
-            <div class="alert alert-{{ message.tags }}">
-                {{ message }}
-                <span class="close-btn" onclick="this.parentElement.remove()">×</span>
-            </div>
-        {% endfor %}
-    {% endif %}
-</div>
-
-<div class="stores-wrapper">
-    <div class="stores-container">
-        <!-- Header Section -->
-        <div class="stores-header">
-            <div class="header-content">
-                <h1 class="stores-main-title">Ценовна историја</h1>
-                <p class="stores-subtitle">Откријте ја историјата на цените на производите од вашите омилени продавници</p>
-            </div>
-            <div class="back-button">
-                <a href="{% url 'home' %}" class="back-link">
-                    <i class="fas fa-arrow-left"></i> Назад кон почетна
-                </a>
-            </div>
-        </div>
-
-        <!-- Search Card -->
-        <div class="search-card">
-            <form method="get" id="searchForm" class="store-search-form">
-                <div class="form-row">
-                    <div class="form-group">
-                        <label for="store"><i class="fas fa-store"></i> Продавница:</label>
-                        <select name="store" id="store" 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">
-                        <label for="searchInput"><i class="fas fa-search"></i> Име на производ:</label>
-                        <input type="text" name="query" id="searchInput" value="{{ query }}" required
-                               class="form-input" placeholder="Внеси име на производ (латиница или кирилица)" autocomplete="off">
-                        <div id="suggestions" class="suggestions-container"></div>
-                    </div>
+
+<div class="stats-wrapper">
+    <div class="back-button">
+{#        <a href="javascript:history.back()" class="action-button secondary-button">#}
+        <a href="{% url 'home' %}" class="action-button secondary-button">
+            <i class="fas fa-arrow-left"></i> Назад
+        </a>
+    </div>
+
+    <div class="stats-container">
+        <h1 class="stats-main-title"
+            style="padding: 10px; color: white; border-radius: 10px; background: linear-gradient(135deg, #1f3f1f, #2e652e);">
+            Ценовна историја
+        </h1>
+
+        <form method="get" class="stats-form">
+            <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">Vero</option>
+                    <option value="Ramstore">Ramstore</option>
+                    <option value="Reptil">Reptil</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="product-input">Продукт:</label>
+                <input type="text" id="product-input" name="query" placeholder="напр. ВОДА" required
+                       value="{{ query|default:'' }}" class="form-input">
+            </div>
+            <!-- Add these date range fields -->
+            <div class="form-row">
+                <div class="form-group">
+                    <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-actions">
-                    <button type="submit" class="action-button primary-button">
-                        <i class="fas fa-search"></i> Пребарај
-                    </button>
+                <div class="form-group">
+                    <label for="end-date">До датум:</label>
+                    <input type="date" id="end-date" name="end_date" class="form-input"
+                           value="{{ end_date|default:'' }}">
                 </div>
-            </form>
-        </div>
-
-        <!-- Main Content Area -->
-        <div class="main-content-area">
-            {% if similar_products %}
-            <div class="similar-products-section">
-                <h2 class="section-title"><i class="fas fa-lightbulb"></i> Слични производи</h2>
-                <div class="similar-products-grid">
-                    {% for p, similarity in similar_products %}
-                    <div class="similar-product-card" data-product="{{ p }}">
-                        <span class="product-name">{{ p }}</span>
-{#                        <span class="similarity-badge">{{ similarity|floatformat:2 }}% сличност</span>#}
-                    </div>
+            </div>
+            <div class="form-actions">
+                <button type="submit" class="action-button primary-button">
+                    <i class="fas fa-chart-line"></i> Прикажи историја
+                </button>
+            </div>
+        </form>
+
+        {% if similar_products and not exact_match %}
+            <div class="product-choices">
+                <h3>Слични производи во {{ store }}:</h3>
+                <div class="products-grid">
+                    {% for product, similarity in similar_products %}
+                        <div class="product-card">
+                            <a href="?store={{ store|urlencode }}&query={{ query|urlencode }}&selected_product={{ product|urlencode }}"
+                               class="product-card-link">
+                                <h4 class="product-title">{{ product }}</h4>
+                                <div class="product-meta">
+                                    <span class="similarity-badge">{{ similarity|floatformat:2 }} сличност</span>
+                                </div>
+                            </a>
+                        </div>
                     {% endfor %}
                 </div>
             </div>
-            {% endif %}
-
-            <!-- Chart Section -->
-            <div class="results-section">
-                <h2 class="section-title"><i class="fas fa-chart-line"></i> Графикон на цени</h2>
-
-                <div class="chart-container" id="chartContainer">
-                    <div class="chart-header">
-                        <h3 class="chart-title" id="chartTitle">Изберете производ за да ја видите ценовната историја</h3>
-                        <div class="chart-actions" id="chartActions" style="display: none;"></div>
-                    </div>
-
-                    <div id="chartContent">
-                        <div class="no-data">
-                            <i class="fas fa-chart-bar"></i>
-                            <h4>Нема податоци за приказ</h4>
-                            <p>Изберете производ од листата за да ја видите неговата ценовната историја</p>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="stats-container" id="statsContainer" style="display: none;">
-                    <div class="stat-card">
-                        <div class="stat-icon"><i class="fas fa-tag"></i></div>
-                        <div class="stat-info">
-                            <span class="stat-value" id="currentPrice">-</span>
-                            <span class="stat-label">Тековна цена</span>
-                        </div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-icon low"><i class="fas fa-arrow-down"></i></div>
-                        <div class="stat-info">
-                            <span class="stat-value" id="lowestPrice">-</span>
-                            <span class="stat-label">Најниска цена</span>
-                        </div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-icon high"><i class="fas fa-arrow-up"></i></div>
-                        <div class="stat-info">
-                            <span class="stat-value" id="highestPrice">-</span>
-                            <span class="stat-label">Највисока цена</span>
-                        </div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-icon avg"><i class="fas fa-balance-scale"></i></div>
-                        <div class="stat-info">
-                            <span class="stat-value" id="averagePrice">-</span>
-                            <span class="stat-label">Просечна цена</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+        {% endif %}
+
+        {% if matched_name %}
+            <div class="price-history">
+                <h3>Ценовна историја за {{ matched_name }} во {{ store }}</h3>
+                <canvas id="priceChart"></canvas>
+            </div>
+        {% elif query %}
+            <div class="no-results">
+                <i class="fas fa-exclamation-circle"></i>
+                <p>Не се пронајдени производи за "{{ query }}" во {{ store }}.</p>
+                <p>Обидете се со различни термини или проверете го пишувањето.</p>
+            </div>
+        {% endif %}
     </div>
 </div>
 
-<!-- Chart.js -->
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-
 <script>
-let priceChart = null;
-
-// Show messages
-document.querySelectorAll('.alert').forEach(alert => {
-    setTimeout(() => alert.classList.add('show'), 100);
-    setTimeout(() => { alert.remove(); }, 5000);
-});
-
-// Handle product click
-document.querySelectorAll('.similar-product-card').forEach(item => {
-    item.addEventListener('click', async function() {
-        document.querySelectorAll('.similar-product-card').forEach(i => i.classList.remove('active'));
-        this.classList.add('active');
-
-        const productName = this.dataset.product;
-        const store = document.querySelector('#store').value;
-        if (!store) {
-            showNotification("Ве молам изберете продавница прво.", "error");
-            return;
-        }
-
-        document.getElementById('chartTitle').innerText = `Историја на цени за: ${productName}`;
-        document.getElementById('chartActions').style.display = 'flex';
-        document.getElementById('chartContent').innerHTML = '<div class="loading-spinner"><div class="spinner"></div><p>Вчитување на податоци...</p></div>';
-        document.getElementById('statsContainer').style.display = 'grid';
-        document.querySelectorAll('.stat-value').forEach(el => el.innerText = '...');
-
-        try {
-            const res = await fetch(`/api/product-history/?store=${store}&product=${encodeURIComponent(productName)}`);
-            const data = await res.json();
-
-            if (!data?.data?.length) {
-                document.getElementById('chartContent').innerHTML = `
-                    <div class="no-data">
-                        <i class="fas fa-exclamation-circle"></i>
-                        <h4>Нема податоци за цени</h4>
-                        <p>Не се пронајдени записи за цени на овој производ</p>
-                    </div>`;
-                document.getElementById('statsContainer').style.display = 'none';
-                return;
-            }
-
-            const sorted = data.data.sort((a,b)=> new Date(a.date)-new Date(b.date));
-            const labels = sorted.map(e=>e.date);
-            const prices = sorted.map(e=>parseFloat(e.price));
-
-            document.getElementById('currentPrice').innerText = prices[prices.length-1] + " МКД";
-            document.getElementById('lowestPrice').innerText = Math.min(...prices) + " МКД";
-            document.getElementById('highestPrice').innerText = Math.max(...prices) + " МКД";
-            document.getElementById('averagePrice').innerText = (prices.reduce((a,b)=>a+b,0)/prices.length).toFixed(2) + " МКД";
-
-            document.getElementById('chartContent').innerHTML = '<canvas id="priceChart"></canvas>';
-            const ctx = document.getElementById('priceChart').getContext('2d');
-            if (priceChart) priceChart.destroy();
-
-            priceChart = new Chart(ctx, {
-                type:'line',
-                data:{
-                    labels: labels,
-                    datasets:[{
-                        label:'Цена (МКД)',
-                        data: prices,
-                        borderColor:'#2e652e',
-                        backgroundColor:'rgba(46,101,46,0.1)',
-                        fill:true,
-                        tension: 0.3,
-                        borderWidth: 2,
-                        pointBackgroundColor: '#2e652e',
-                        pointRadius: 4,
-                        pointHoverRadius: 6
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: {
-                        legend: {
-                            position: 'top',
-                        },
-                        tooltip: {
-                            mode: 'index',
-                            intersect: false,
+    {% 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)'
                         }
                     },
-                    scales: {
-                        y: {
-                            beginAtZero: false,
-                            title: {
-                                display: true,
-                                text: 'Цена (МКД)'
-                            }
-                        },
-                        x: {
-                            title: {
-                                display: true,
-                                text: 'Датум'
-                            }
+                    x: {
+                        grid: {
+                            color: 'rgba(0, 0, 0, 0.05)'
                         }
                     }
                 }
-            });
-
-        } catch(err){
-            console.error(err);
-            document.getElementById('chartContent').innerHTML = `
-                <div class="no-data">
-                    <i class="fas fa-exclamation-triangle"></i>
-                    <h4>Грешка при вчитување</h4>
-                    <p>Настана грешка при вчитување на податоците</p>
-                </div>`;
-            document.getElementById('statsContainer').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();
         }
     });
-});
-
-// ==================== Transliteration + Search Suggestions ====================
-document.addEventListener('DOMContentLoaded', function () {
-    const searchInput = document.getElementById('searchInput');
-    const suggestionsDiv = document.getElementById('suggestions');
-    const searchForm = document.getElementById('searchForm');
-
-    // Enhanced transliteration function
-    function transliterateLatinToCyrillic(text) {
-        const map = {
-            'dzh': 'џ', 'dz': 'ѕ', 'zh': 'ж', 'ch': 'ч', 'sh': 'ш',
-            'lj': 'љ', 'nj': 'њ', 'kj': 'ќ', 'gj': 'ѓ',
-            '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': 'к'
-        };
-
-        let result = '';
-        let i = 0;
-        const t = text.toLowerCase();
-
-        while (i < t.length) {
-            let found = false;
-
-            // Check for 3-character sequences first
-            if (i + 2 < t.length && map[t.substring(i, i + 3)]) {
-                result += map[t.substring(i, i + 3)];
-                i += 3;
-                found = true;
-            }
-            // Check for 2-character sequences
-            else if (i + 1 < t.length && map[t.substring(i, i + 2)]) {
-                result += map[t.substring(i, i + 2)];
-                i += 2;
-                found = true;
-            }
-            // Check for single characters
-            else if (map[t[i]]) {
-                result += map[t[i]];
-                i++;
-                found = true;
-            }
-
-            // If no mapping found, keep the original character
-            if (!found) {
-                result += t[i];
-                i++;
-            }
-        }
-
-        return result;
-    }
-
-    // Handle form submission with transliteration
-    searchForm.addEventListener('submit', function(e) {
-        const query = searchInput.value.trim();
-        if (query) {
-            // Check if the query is in Latin script
-            const isLatin = /[a-zA-Z]/.test(query) && !/[а-яА-Я]/.test(query);
-
-            if (isLatin) {
-                // Convert Latin to Cyrillic for search
-                const cyrillicQuery = transliterateLatinToCyrillic(query);
-
-                // Create a hidden input to submit the Cyrillic version
-                const hiddenInput = document.createElement('input');
-                hiddenInput.type = 'hidden';
-                hiddenInput.name = 'query_cyr';
-                hiddenInput.value = cyrillicQuery;
-
-                // Add to form and submit
-                this.appendChild(hiddenInput);
-            }
-        }
-    });
-
-    async function fetchSuggestions(query){
-        const store = document.querySelector('#store').value;
-        if(!store) {
-            suggestionsDiv.style.display='none';
-            return [];
-        }
-
-        // Check if query is in Latin and transliterate
-        const isLatin = /[a-zA-Z]/.test(query) && !/[а-яА-Я]/.test(query);
-        const searchQuery = isLatin ? transliterateLatinToCyrillic(query) : query;
-
-        try {
-            const res = await fetch(`/api/similar-products/?store=${store}&q=${encodeURIComponent(searchQuery)}`);
-            const data = await res.json();
-            return data.products || [];
-        } catch (error) {
-            console.error("Error fetching suggestions:", error);
-            return [];
-        }
-    }
-
-    searchInput.addEventListener('input', async function(){
-        const val = this.value.trim();
-        if(!val) {
-            suggestionsDiv.style.display='none';
-            return;
-        }
-
-        const suggestions = await fetchSuggestions(val);
-
-        if(suggestions.length){
-            suggestionsDiv.innerHTML = suggestions.map(p=>`<div class="suggestion-item" data-product="${p}">${p}</div>`).join('');
-            suggestionsDiv.style.display='block';
-
-            document.querySelectorAll('.suggestion-item').forEach(el=>{
-                el.addEventListener('click', function(){
-                    searchInput.value = this.dataset.product;
-                    suggestionsDiv.style.display='none';
-                });
-            });
-        } else {
-            suggestionsDiv.style.display='none';
-        }
-    });
-
-    document.addEventListener('click', e=>{
-        if(!suggestionsDiv.contains(e.target) && e.target!==searchInput) {
-            suggestionsDiv.style.display='none';
-        }
-    });
-});
-
-function showNotification(message, type) {
-    // Remove any existing notifications
-    const existingNotifications = document.querySelectorAll('.notification');
-    existingNotifications.forEach(notif => notif.remove());
-
-    const notification = document.createElement('div');
-    notification.className = `notification ${type}`;
-    notification.innerHTML = `
-        <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i>
-        <span>${message}</span>
-        <button onclick="this.parentElement.remove()"><i class="fas fa-times"></i></button>
-    `;
-
-    document.body.appendChild(notification);
-
-    // Auto remove after 5 seconds
-    setTimeout(() => {
-        if (notification.parentElement) {
-            notification.remove();
-        }
-    }, 5000);
-}
 </script>
 
 <style>
-:root {
-    --primary: #2e652e;
-    --primary-dark: #1f3f1f;
-    --primary-light: #81c784;
-    --accent: #4caf50;
-    --text: #333;
-    --text-light: #666;
-    --background: #f9f9f9;
-    --card-bg: #ffffff;
-    --border: #e0e0e0;
-    --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-    --shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
-    --success: #4caf50;
-    --error: #f44336;
-}
-
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
-
-body {
-    font-family: Arial, sans-serif;
-    background: var(--background);
-    color: var(--text);
-    line-height: 1.6;
-}
-
-.stores-wrapper {
-    max-width: 1600px;
-    margin: 0 auto;
-    padding: 20px;
-}
-
-.stores-container {
-    background: var(--card-bg);
-    border-radius: 16px;
-    overflow: hidden;
-    box-shadow: var(--shadow);
-}
-
-.stores-header {
-    background: linear-gradient(135deg, rgba(46,101,46,0.9) 0%, rgba(76,175,80,0.8) 100%), url('{% static "images/baner1.jpg" %}') center/cover no-repeat;
-    color: white;
-    padding: 30px;
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-}
-
-.header-content {
-    max-width: 70%;
-}
-
-.stores-main-title {
-    font-size: 2.5rem;
-    font-weight: 700;
-    margin-bottom: 10px;
-    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
-}
-
-.stores-subtitle {
-    font-size: 1.1rem;
-    opacity: 0.9;
-    font-weight: 300;
-}
-
-.back-button {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-}
-
-.back-link {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    background: rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(10px);
-    color: white;
-    padding: 10px 20px;
-    border-radius: 30px;
-    text-decoration: none;
-    transition: all 0.3s ease;
-    border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-.back-link:hover {
-    background: rgba(255, 255, 255, 0.3);
-    transform: translateY(-2px);
-}
-
-.search-card {
-    padding: 30px;
-    border-bottom: 1px solid var(--border);
-}
-
-.form-row {
-    display: flex;
-    gap: 20px;
-    margin-bottom: 20px;
-    flex-wrap: wrap;
-}
-
-.form-group {
-    flex: 1;
-    min-width: 250px;
-    position: relative;
-}
-
-.form-group label {
-    display: block;
-    margin-bottom: 8px;
-    color: var(--primary);
-    font-weight: 600;
-    font-size: 0.9rem;
-}
-
-.form-input, select {
-    width: 100%;
-    padding: 14px 16px;
-    border-radius: 10px;
-    border: 1px solid var(--border);
-    font-size: 1rem;
-    transition: all 0.3s ease;
-    background: var(--card-bg);
-}
-
-.form-input:focus, select:focus {
-    outline: none;
-    border-color: var(--primary);
-    box-shadow: 0 0 0 3px rgba(46, 101, 46, 0.1);
-}
-
-.form-actions {
-    display: flex;
-    gap: 15px;
-    margin-top: 20px;
-    flex-wrap: wrap;
-}
-
-.action-button {
-    padding: 14px 28px;
-    border-radius: 10px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    display: inline-flex;
-    align-items: center;
-    gap: 10px;
-    border: none;
-    font-size: 1rem;
-}
-
-.primary-button {
-    background: var(--primary);
-    color: white;
-}
-
-.primary-button:hover {
-    background: var(--primary-dark);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(46, 101, 46, 0.2);
-}
-
-/* Main content area with side-by-side layout */
-.main-content-area {
-    display: flex;
-    padding: 20px;
-    gap: 30px;
-    align-items: flex-start;
-}
-
-.similar-products-section {
-    flex: 0 0 35%;
-    max-width: 35%;
-    padding: 20px;
-    background: var(--card-bg);
-    border-radius: 12px;
-    box-shadow: var(--shadow);
-}
-
-.results-section {
-    flex: 1;
-    min-width: 0;
-}
-
-.section-title {
-    font-size: 1.5rem;
-    margin-bottom: 25px;
-    color: var(--primary);
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.similar-products-grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 15px;
-    max-height: 600px;
-    overflow-y: auto;
-    padding-right: 10px;
-}
-
-.similar-products-grid::-webkit-scrollbar {
-    width: 8px;
-}
-
-.similar-products-grid::-webkit-scrollbar-track {
-    background: #f1f1f1;
-    border-radius: 10px;
-}
-
-.similar-products-grid::-webkit-scrollbar-thumb {
-    background: var(--primary-light);
-    border-radius: 10px;
-}
-
-.similar-products-grid::-webkit-scrollbar-thumb:hover {
-    background: var(--primary);
-}
-
-.similar-product-card {
-    background: var(--card-bg);
-    border-radius: 12px;
-    padding: 20px;
-    box-shadow: var(--shadow);
-    transition: all 0.3s ease;
-    border-left: 4px solid var(--primary-light);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-}
-
-.similar-product-card:hover {
-    transform: translateY(-5px);
-    box-shadow: var(--shadow-hover);
-}
-
-.similar-product-card.active {
-    background: #e8f5e9;
-    border-left: 4px solid var(--primary);
-}
-
-.product-name {
-    font-weight: 500;
-    color: var(--text);
-    flex: 1;
-}
-
-.similarity-badge {
-    background: var(--primary-light);
-    color: var(--primary-dark);
-    padding: 4px 10px;
-    border-radius: 20px;
-    font-size: 0.8rem;
-    font-weight: 600;
-    margin-left: 10px;
-}
-
-.chart-container {
-    background: var(--card-bg);
-    border-radius: 12px;
-    padding: 25px;
-    box-shadow: var(--shadow);
-    margin-bottom: 25px;
-    min-height: 500px;
-    display: flex;
-    flex-direction: column;
-}
-
-.chart-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
-    flex-wrap: wrap;
-    gap: 15px;
-}
-
-.chart-title {
-    font-size: 1.2rem;
-    color: var(--text);
-    margin: 0;
-    font-weight: 600;
-}
-
-.chart-actions {
-    display: flex;
-    gap: 10px;
-}
-
-.chart-btn {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 15px;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-weight: 500;
-    font-size: 0.9rem;
-}
-
-.export-btn {
-    background: var(--primary);
-    color: white;
-}
-
-.export-btn:hover {
-    background: var(--primary-dark);
-}
-
-.info-btn {
-    background: #2196f3;
-    color: white;
-}
-
-.info-btn:hover {
-    background: #0b7dda;
-}
-
-#chartContent {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}
-
-#priceChart {
-    flex: 1;
-    min-height: 400px;
-}
-
-.no-data {
-    text-align: center;
-    color: var(--text-light);
-    padding: 40px 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 400px;
-    flex: 1;
-}
-
-.no-data i {
-    font-size: 3.5rem;
-    margin-bottom: 15px;
-    color: #ddd;
-}
-
-.no-data h4 {
-    font-size: 1.3rem;
-    margin: 0 0 10px 0;
-    color: var(--text-light);
-}
-
-.no-data p {
-    margin: 0;
-    font-size: 1rem;
-}
-
-.loading-spinner {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 60px 30px;
-    text-align: center;
-    flex: 1;
-}
-
-.spinner {
-    width: 60px;
-    height: 60px;
-    border: 4px solid rgba(46, 101, 46, 0.1);
-    border-radius: 50%;
-    border-top: 4px solid var(--primary);
-    animation: spin 1s linear infinite;
-    margin-bottom: 20px;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-.stats-container {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 20px;
-}
-
-.stat-card {
-    background: var(--card-bg);
-    border-radius: 12px;
-    padding: 20px;
-    box-shadow: var(--shadow);
-    display: flex;
-    align-items: center;
-    transition: all 0.3s ease;
-}
-
-.stat-card:hover {
-    transform: translateY(-5px);
-    box-shadow: var(--shadow-hover);
-}
-
-.stat-icon {
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 15px;
-    background: rgba(46, 101, 46, 0.1);
-    color: var(--primary);
-    font-size: 1.2rem;
-}
-
-.stat-icon.low {
-    background: rgba(76, 175, 80, 0.1);
-    color: var(--success);
-}
-
-.stat-icon.high {
-    background: rgba(244, 67, 54, 0.1);
-    color: var(--error);
-}
-
-.stat-icon.avg {
-    background: rgba(33, 150, 243, 0.1);
-    color: #2196f3;
-}
-
-.stat-info {
-    display: flex;
-    flex-direction: column;
-}
-
-.stat-value {
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--text);
-    margin-bottom: 5px;
-}
-
-.stat-label {
-    font-size: 0.9rem;
-    color: var(--text-light);
-}
-.stores-wrapper{
-    margin-left: 60px;
-    margin-right: 60px;
-}
-
-.message-container {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    z-index: 1000;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.alert {
-    position: relative;
-    padding: 15px 20px;
-    background: var(--card-bg);
-    border-left: 4px solid var(--primary);
-    border-radius: 6px;
-    box-shadow: var(--shadow);
-    opacity: 0;
-    transform: translateX(100%);
-    transition: 0.4s;
-    max-width: 350px;
-}
-
-.alert.show {
-    opacity: 1;
-    transform: translateX(0);
-}
-
-.close-btn {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    cursor: pointer;
-    font-weight: bold;
-    font-size: 1.2rem;
-    color: var(--text-light);
-}
-
-.close-btn:hover {
-    color: var(--text);
-}
-
-.suggestions-container {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    background: white;
-    border: 1px solid var(--border);
-    border-radius: 0 0 8px 8px;
-    box-shadow: var(--shadow);
-    z-index: 100;
-    display: none;
-    max-height: 200px;
-    overflow-y: auto;
-}
-
-.suggestion-item {
-    padding: 12px 15px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border-bottom: 1px solid #f0f0f0;
-}
-
-.suggestion-item:hover {
-    background: #e8f5e9;
-}
-
-.suggestion-item:last-child {
-    border-bottom: none;
-}
-
-/* Notification system */
-.notification {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    padding: 15px 20px;
-    border-radius: 10px;
-    color: white;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    box-shadow: var(--shadow);
-    z-index: 1000;
-    animation: slideIn 0.3s ease;
-    max-width: 350px;
-}
-
-.notification.success {
-    background: var(--success);
-}
-
-.notification.error {
-    background: var(--error);
-}
-
-.notification button {
-    background: none;
-    border: none;
-    color: white;
-    cursor: pointer;
-    margin-left: 10px;
-}
-
-@keyframes slideIn {
-    from {
-        transform: translateX(100%);
-        opacity: 0;
-    }
-    to {
-        transform: translateX(0);
-        opacity: 1;
-    }
-}
-
-/* Responsive design */
-@media (max-width: 1200px) {
-    .main-content-area {
-        flex-direction: column;
-    }
-
-    .similar-products-section {
+    .stats-wrapper {
+        width: 100%;
+        padding: 20px;
+        box-sizing: border-box;
+        background: url('{% static "images/baner1.jpg" %}') no-repeat center center fixed;
+        background-size: cover;
+        min-height: 100vh;
+    }
+
+    .back-button {
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        z-index: 10;
+    }
+
+    .stats-container {
+        max-width: 1200px;
+        margin: 0 auto;
+        background: rgba(255, 255, 255, 0.95);
+        border-radius: 12px;
+        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15);
+        padding: 30px;
+        margin-top: 60px;
+    }
+
+    .stats-main-title {
+        text-align: center;
+        margin-bottom: 30px;
+        font-size: 28px;
+        font-weight: 600;
+    }
+
+    .stats-form {
+        margin-bottom: 30px;
+    }
+
+    .form-group {
+        margin-bottom: 20px;
+    }
+
+    .form-group label {
+        display: block;
+        margin-bottom: 8px;
+        font-weight: 500;
+        color: #2e652e;
+    }
+
+    .form-input {
+        width: 100%;
+        padding: 12px 15px;
+        border: 1px solid #aed581;
+        border-radius: 6px;
+        font-size: 16px;
+        transition: all 0.3s;
+        background-color: white;
+    }
+
+    .form-input:focus {
+        border-color: #2e652e;
+        outline: none;
+        box-shadow: 0 0 0 3px rgba(46, 101, 46, 0.2);
+    }
+
+    .form-actions {
+        text-align: center;
+        margin-top: 25px;
+    }
+
+    .action-button {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 12px 25px;
+        border-radius: 6px;
+        font-weight: 500;
+        text-decoration: none;
+        transition: all 0.3s ease;
+        cursor: pointer;
+        border: 2px solid transparent;
+    }
+
+    .primary-button {
+        background-color: #2e652e;
+        color: white;
+        border-color: #2e652e;
+    }
+
+    .primary-button:hover {
+        background-color: #1f3f1f;
+        border-color: #1f3f1f;
+    }
+
+    .secondary-button {
+        background-color: #e8f5e9;
+        color: #2e652e;
+        border-color: #c8e6c9;
+    }
+
+    .secondary-button:hover {
+        background-color: #d0f0d0;
+        border-color: #b2dfdb;
+    }
+
+    .product-choices {
+        margin: 30px 0;
+    }
+
+    .products-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 20px;
+        margin-top: 20px;
+    }
+
+    .product-card {
+        background: white;
+        border-left: 4px solid #81c784;
+        border-radius: 8px;
+        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
+        padding: 15px;
+        transition: all 0.3s;
+    }
+
+    .product-card:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
+    }
+
+    .product-card-link {
+        text-decoration: none;
+        color: inherit;
+        display: block;
+    }
+
+    .product-title {
+        color: #2e652e;
+        margin: 0 0 10px 0;
+        font-size: 16px;
+        font-weight: 500;
+    }
+
+    .product-meta {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .similarity-badge {
+        background: #e8f5e9;
+        color: #2e652e;
+        padding: 4px 10px;
+        border-radius: 12px;
+        font-size: 13px;
+        font-weight: 500;
+    }
+
+    .price-history {
+        margin: 40px 0;
+        padding: 20px;
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    }
+
+    .price-history h3 {
+        color: #2e652e;
+        margin-top: 0;
+        margin-bottom: 20px;
+    }
+
+    .no-results {
+        text-align: center;
+        padding: 30px;
+        background: #fff3e0;
+        border-radius: 8px;
+        color: #e65100;
+        margin: 30px 0;
+    }
+
+    .no-results i {
+        font-size: 40px;
+        margin-bottom: 15px;
+        color: #e65100;
+    }
+
+    .no-results p {
+        margin: 5px 0;
+        font-size: 16px;
+    }
+
+    @media (max-width: 768px) {
+        .stats-container {
+            padding: 20px;
+        }
+
+        .products-grid {
+            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+        }
+    }
+
+    @media (max-width: 480px) {
+        .stats-container {
+            padding: 15px;
+        }
+
+        .stats-main-title {
+            font-size: 24px;
+        }
+
+        .form-actions button {
+            width: 100%;
+        }
+    }
+
+    .form-row {
+        display: flex;
+        gap: 20px;
+        margin-bottom: 20px;
+    }
+
+    .form-row .form-group {
         flex: 1;
-        max-width: 100%;
-        width: 100%;
-    }
-
-    .similar-products-grid {
-        max-height: 300px;
-    }
-}
-
-@media (max-width: 768px) {
-    .stores-header {
-        flex-direction: column;
-        gap: 20px;
-    }
-
-    .header-content {
-        max-width: 100%;
-    }
-
-    .back-button {
-        position: relative;
-        top: 0;
-        right: 0;
-        align-self: flex-end;
-    }
-
-    .stores-main-title {
-        font-size: 2rem;
-    }
-
-    .form-row {
-        flex-direction: column;
-        gap: 15px;
-    }
-
-    .form-group {
-        min-width: 100%;
-    }
-
-    .form-actions {
-        flex-direction: column;
-    }
-
-    .action-button {
-        width: 100%;
-        justify-content: center;
-    }
-
-    .stats-container {
-        grid-template-columns: 1fr;
-    }
-
-    .chart-header {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    .chart-actions {
-        width: 100%;
-        justify-content: center;
-    }
-}
+    }
+
+    /* Style date inputs to match other form elements */
+    input[type="date"].form-input {
+        padding: 11px 15px; /* Slightly adjusted to account for browser styling */
+    }
 </style>
-
-{% endblock %}
Index: in/templates/socialaccount/1.html
===================================================================
--- main/templates/socialaccount/1.html	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ 	(revision )
@@ -1,11 +1,0 @@
-{% extends "main/index.html" %}
-{% block content %}
-<div style="text-align:center; padding:50px;">
-    <h2>Welcome! Almost done...</h2>
-    <p>Your Google account is about to be connected to our site.</p>
-    <form method="post" action="{% url 'socialaccount_signup' %}">
-        {% csrf_token %}
-        <button type="submit" class="btn btn-primary">Continue</button>
-    </form>
-</div>
-{% endblock %}
Index: main/templatetags/category_filters.py
===================================================================
--- main/templatetags/category_filters.py	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ main/templatetags/category_filters.py	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
@@ -1,4 +1,6 @@
 from django import template
+
 register = template.Library()
+
 CATEGORY_TRANSLATIONS = {
     'snacks': 'Грицки',
@@ -23,7 +25,9 @@
     'frozen food': 'Замрзната Храна',
     'baby food': 'Храна за Бебиња',
+    # Add all other categories
 }
 
 @register.filter(name='translate_category')
 def translate_category(category):
+    # Convert to lowercase and strip whitespace for reliable matching
     return CATEGORY_TRANSLATIONS.get(category.lower().strip(), category)
Index: main/urls.py
===================================================================
--- main/urls.py	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ main/urls.py	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
@@ -4,8 +4,6 @@
 from . import views
 from django.contrib.auth import views as auth_views
-from django.urls import path, include
-from django.contrib import admin
 
-from .views import custom_logout, remove_from_list, get_store_products, stats_view
+from .views import custom_logout, remove_from_list, get_store_products, stats_view, nearby_stores_view
 
 # from .views import test_db_connection
@@ -35,21 +33,4 @@
     path('statistics/', stats_view, name='stats'),
     path('nearby-stores/', views.nearby_stores_view, name='nearby_stores'),
-    # path("recepies/", views.recipe_generator, name="recipe_generator"),
-    path('fridge-recipes/', views.fridge_recipes, name='fridge_recipes'),
-    # path('admin/', admin.site.urls),
-    path('search-suggestions/', views.search_suggestions, name='search_suggestions'),
-
-    path('header/', views.header, name='header'),
-    path('toggle-favorite/', views.toggle_favorite, name='toggle_favorite'),
-    path('favorites/', views.favorites_list, name='favorites_list'),
-    # path('profile/', views.profile, name='profile'),
-    path('get-favorites/', views.get_favorites, name='get_favorites'),
-    path('api/product-history/', views.product_history_api, name='product_history_api'),
-    path("accounts/", include("allauth.urls")),
-    path('admin/', admin.site.urls),
-    path("api/lists/<int:list_id>/cheaper/", views.generate_cheaper_list, name="generate_cheaper_list"),
-    path('update-list-item/<int:item_id>/', views.update_list_item, name='update_list_item'),
-
-
 
 ]
Index: main/utils/similarity.py
===================================================================
--- main/utils/similarity.py	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ main/utils/similarity.py	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
@@ -1,55 +1,22 @@
 import pickle
 import numpy as np
-import re
-from collections import Counter
 from sentence_transformers import SentenceTransformer
 from sklearn.metrics.pairwise import cosine_similarity
-from .db import get_all_products
+from .db import get_all_products  # We'll make this next
+
 
 model = SentenceTransformer('sentence-transformers/all-MiniLM-L6-v2')
 
-STOPWORDS = {
-    "млад", "млади", "свежо", "голем", "мал", "ситен", "парче", "парчиња", "грам", "г.", "ком", "комад", "бр", "(Р)"
-}
-
 def get_similar_products(product_name, product_category, top_n=5):
     query_embedding = model.encode([product_name])
+
     products = get_all_products()
 
-    current_product_store = None
+    similarities = []
+
     for p in products:
-        if p['name'] == product_name and p['category'] == product_category:
-            current_product_store = p.get('store')
-            break
-
-    filtered_products = [p for p in products if p['category'] == product_category and p['name'] != product_name]
-
-    all_keywords = []
-    for p in filtered_products:
-        all_keywords += tokenize(p['name'])
-    keyword_freq = Counter(all_keywords)
-
-    query_keywords = set(tokenize(product_name))
-
-    results = []
-
-    for p in filtered_products:
         try:
-            product_keywords = set([k for k in tokenize(p['name']) if k not in STOPWORDS])
-            common_keywords = query_keywords & product_keywords
-
-            if len(common_keywords) == 0:
+            if p['category'] != product_category or p['name'] == product_name:
                 continue
-
-            keyword_score = sum(keyword_freq[k] for k in common_keywords)
-
-            bonus = 0
-            if len(common_keywords) >= 2:
-                bonus += 5
-            for word in common_keywords:
-                if word in ['пиво', 'вино', 'ракија', 'сок', 'млеко', 'кромид', 'јаболко']:
-                    bonus += 10
-                elif re.match(r'\d+(\.\d+)?л', word):
-                    bonus += 5
 
             embedding = pickle.loads(p['embedding'])
@@ -57,31 +24,16 @@
             sim = cosine_similarity(query_embedding, embedding)[0][0]
 
-            store_bonus = 0
-            if p.get('store') != current_product_store:
-                store_bonus += 10
-            else:
-                store_bonus -= 5
-
-            total_score = keyword_score + bonus + (sim * 2) + store_bonus
-
-            results.append({
-                'id': p['id'],
+            similarities.append({
+                'id': p['id'],  # Ensure the 'id' is included
                 'name': p['name'],
                 'similarity': round(sim, 2),
-                'keyword_score': keyword_score,
-                'score': round(total_score, 2),
                 'price': p.get('price'),
                 'store': p.get('store'),
                 'image': p.get('image_url'),
+
             })
 
-        except Exception:
+        except Exception as e:
             continue
 
-    return sorted(results, key=lambda x: x['score'], reverse=True)[:top_n]
-
-
-def tokenize(name):
-    name = name.lower()
-    tokens = re.findall(r'\w+(?:\.\d+)?л|\d+|\w+', name)
-    return [t for t in tokens if len(t) > 1 and t not in STOPWORDS]
+    return sorted(similarities, key=lambda x: x['similarity'], reverse=True)[:top_n]
Index: main/views.py
===================================================================
--- main/views.py	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
+++ main/views.py	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
@@ -1,20 +1,45 @@
 import json
-import requests
+from datetime import datetime
+from django.shortcuts import render
+from geopy.distance import geodesic
+
+from .models import Products2
 from django.core.paginator import Paginator
+from django.db.models import Q
+from django.http import JsonResponse
+from django.views.decorators.csrf import csrf_exempt
+from django.contrib.auth.decorators import login_required
+from django.http import HttpResponse
+from django.db import connection
+from django.utils import timezone
+from django.db.models import F
 from django.db.models import Case, When, DecimalField
 from django.shortcuts import render, redirect
 from django.contrib.auth import login
-import transliterate  # pip install transliterate
-
-
 from .forms import RegisterForm
 from django.contrib.auth import logout
+from django.contrib import messages
+from django.shortcuts import render, redirect, get_object_or_404
 from django.contrib.auth.decorators import login_required
-from .models import ShoppingList, ShoppingListItem, Products2, Favorite
+from .models import ShoppingList, ShoppingListItem
+from django.shortcuts import render, redirect, get_object_or_404
+from django.contrib.auth.decorators import login_required
+from django.http import JsonResponse
+from .models import ShoppingList, ShoppingListItem, Products2
 from django.views.decorators.http import require_POST
 from django.views.decorators.csrf import csrf_exempt
+from main.models import User
 from .utils.similarity import get_similar_products
+from .utils.similarity import get_similar_products
+from django.db.models import F
+from django.db.models.functions import Lower, Trim
 from django.shortcuts import render, get_object_or_404
-from datetime import datetime
+from django.shortcuts import render
+from django.db.models import Q
+from datetime import datetime, time
+from difflib import get_close_matches
+from django.shortcuts import render
+from geopy.distance import geodesic
+
 
 
@@ -39,5 +64,5 @@
 
 def index(response):
-    return render(response, "main/index.html")
+    return render(response, "main/base.html")
 
 
@@ -75,5 +100,5 @@
     discounted_products = Products2.objects.filter(
         popust=True
-    ).order_by('-price')[:12]
+    ).order_by('-price')[:12]  # Removed the date filter here
 
     stores = Products2.objects.filter(popust=True).values_list('store', flat=True).distinct()
@@ -83,17 +108,21 @@
         cleaned = store.strip()
 
+        # Debugging step: break down the query into parts to inspect the data
         store_filtered = Products2.objects.filter(store__iexact=cleaned)
         popust_filtered = store_filtered.filter(popust=True)
 
-        # print(f"Store: {cleaned}")
-        # print(f"Products after store filter: {store_filtered.count()}")
-        # print(f"Products after popust filter: {popust_filtered.count()}")
-
-        products = popust_filtered.order_by('-price')[:3]
-
-        # if not products:
-        #     print(f"No discounted products for {cleaned}")
-        # else:
-        #     print(f"Found {len(products)} products for {cleaned}")
+        # Debugging output: Check the number of products for each store
+        print(f"Store: {cleaned}")
+        print(f"Products after store filter: {store_filtered.count()}")
+        print(f"Products after popust filter: {popust_filtered.count()}")
+
+        # Fetch products for the store
+        products = popust_filtered.order_by('-price')[:3]  # No date filter here
+
+        # Debugging output: Check the actual products being fetched
+        if not products:
+            print(f"No discounted products for {cleaned}")
+        else:
+            print(f"Found {len(products)} products for {cleaned}")
 
         stores_with_products.append({
@@ -110,33 +139,22 @@
     }
 
-    return render(response, 'main/index.html', context)
+    return render(response, 'main/base.html', context)
 
 # def base(response):
-#     return render(response, "main/index.html")
-from django.db.models import Q
-from django.utils import timezone
-from django.db.models import Case, When, DecimalField
-from django.core.paginator import Paginator
-
-
+#     return render(response, "main/base.html")
 def product_list(request):
     products = Products2.objects.all()
-    search_query = request.GET.get('search', '').strip()
-    original_query = request.GET.get('original_search', '').strip()
-    cyrillic_query = request.GET.get('cyrillic_search', '').strip()
-
-    # For backward compatibility with old search URLs
-    if not original_query and search_query:
-        original_query = search_query
-        cyrillic_query = transliterate_latin_to_cyrillic(search_query)
-
-    # If there's a search query, find matching products in both Latin and Cyrillic
-    if original_query:
-        products = products.filter(
-            Q(name__icontains=original_query) |
-            Q(name__icontains=cyrillic_query)
-        )
-
-    # Rest of your existing filters remain unchanged
+    query = request.GET.get("q")
+    products = Products2.objects.all()
+
+    if query:
+        products = products.filter(name__icontains=query)
+
+    # Search by name only
+    search_query = request.GET.get('search')
+    if search_query:
+        products = products.filter(name__icontains=search_query)
+
+    # Category filter
     selected_categories = request.GET.getlist('category')
     if selected_categories:
@@ -157,4 +175,5 @@
         )
 
+    # Store filter
     selected_stores = request.GET.getlist('store')
     if selected_stores:
@@ -183,7 +202,7 @@
         products = products.order_by('-name')
     elif sort == 'popular':
-        products = products.order_by('-popularity')
+        products = products.order_by('-popularity')  # Assuming you have a popularity field
     elif sort == 'newest':
-        products = products.order_by('-created_at')
+        products = products.order_by('-created_at')  # Assuming you have a created_at field
 
     show_discounted = request.GET.get('discounted')
@@ -195,28 +214,4 @@
     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 original_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 = {
@@ -227,31 +222,27 @@
         'selected_stores': selected_stores,
         'selected_sort': sort,
-        'search_query': original_query or search_query,  # Show the original query in the UI
-        'fav_ids': fav_ids,
-        'similar_products': similar_products,
+        'search_query': search_query,
     }
     return render(request, 'main/product_list.html', context)
 
 
-# Helper function for transliteration
-def transliterate_latin_to_cyrillic(text):
-    mapping = {
-        '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': 'ју'
+def product_catalog(request):
+    products = Products2.objects.all()
+
+    # Handle search
+    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,
+        # your other context variables
     }
-
-    text = text.lower()
-    for lat, cyr in mapping.items():
-        text = text.replace(lat, cyr)
-    return text
-
-from django.contrib.auth import authenticate, login
+    return render(request, 'main/product_list.html', context)
+
 
 def register(request):
@@ -259,14 +250,7 @@
         form = RegisterForm(request.POST)
         if form.is_valid():
-            # 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')
+            user = form.save()
+            login(request, user)
+            return redirect('home')  # Redirect to your homepage
     else:
         form = RegisterForm()
@@ -274,8 +258,8 @@
 
 
-
 def custom_logout(request):
     logout(request)
 
+    # Get the same context data as your home view
     categories = Products2.objects.exclude(
         Q(category__isnull=True) | Q(category__exact='')
@@ -288,24 +272,10 @@
     ).order_by('-price')[:12]
 
-    stores = Products2.objects.filter(popust=True).values_list('store', flat=True).distinct()
-    stores_with_products = []
-    for store in stores:
-        cleaned = store.strip()
-        store_filtered = Products2.objects.filter(store__iexact=cleaned)
-        popust_filtered = store_filtered.filter(popust=True)
-        products = popust_filtered.order_by('-price')[:3]
-        if products.exists():
-            stores_with_products.append({
-                'name': cleaned,
-                'products': list(products),
-                'count': products.count()
-            })
-
     context = {
         'categories': categories,
-        'discounted_products': discounted_products,
-        'stores_with_products': stores_with_products
+        'discounted_products': discounted_products
     }
-    return render(request, 'main/index.html', context)
+
+    return render(request, 'main/base.html', context)
 
 
@@ -319,26 +289,10 @@
 def create_list(request):
     if request.method == 'POST':
-        list_name = request.POST.get('list_name', '').strip()
-
-        # Transliterate Cyrillic to Latin if needed
-        try:
-            if any(ord(char) > 127 for char in list_name):  # Check for non-ASCII
-                list_name = transliterate.translit(list_name, reversed=True)
-        except:
-            pass  # Fall through to original name
-
-        try:
+        list_name = request.POST.get('list_name')
+        if list_name:
             ShoppingList.objects.create(user=request.user, name=list_name)
-            return JsonResponse({'success': True})
-        except Exception as e:
-            return JsonResponse({
-                'success': False,
-                'error': str(e)
-            })
-
-    return JsonResponse({
-        'success': False,
-        'error': 'Invalid request method'
-    })
+            return redirect('view_lists')
+    return redirect('view_lists')
+
 
 
@@ -349,36 +303,7 @@
 
     # Debugging: Log the items being passed to the template
-    # print(f"Items in list {shopping_list.name}: {items}")
+    print(f"Items in list {shopping_list.name}: {items}")
 
     return render(request, 'main/list_detail.html', {'shopping_list': shopping_list, 'items': items})
-
-@login_required
-@csrf_exempt   # ако користиш fetch без CSRF token
-def update_list_item(request, item_id):
-    if request.method == "POST":
-        try:
-            data = json.loads(request.body)
-            item = get_object_or_404(ShoppingListItem, id=item_id, shopping_list__user=request.user)
-
-            # quantity update
-            if "quantity" in data:
-                item.quantity = int(data["quantity"])
-
-            # checked update (ако го користиш)
-            if "checked" in data:
-                item.checked = bool(data["checked"])
-
-            item.save()
-
-            return JsonResponse({
-                "success": True,
-                "id": item.id,
-                "quantity": item.quantity,
-                "checked": item.checked,
-            })
-        except Exception as e:
-            return JsonResponse({"success": False, "error": str(e)}, status=400)
-
-    return JsonResponse({"success": False, "error": "Invalid request"}, status=400)
 
 @login_required
@@ -412,4 +337,28 @@
     return JsonResponse({'success': False})
 
+
+# @csrf_exempt
+# @require_POST
+# def add_to_list(request):
+#     product_id = request.POST.get('product_id')
+#     list_id = request.POST.get('list_id')
+#
+#     try:
+#         # Get or create the list item
+#         item, created = ShoppingListItem.objects.get_or_create(
+#             list_id=list_id,
+#             product_id=product_id,
+#             defaults={'quantity': 1}
+#         )
+#
+#         if not created:
+#             item.quantity += 1
+#             item.save()
+#
+#         return JsonResponse({'success': True, 'message': 'Product added to list'})
+#
+#     except Exception as e:
+#         return JsonResponse({'success': False, 'message': str(e)}, status=400)
+
 @csrf_exempt
 @require_POST
@@ -417,8 +366,4 @@
 def add_to_list(request):
     try:
-        # Only allow POST
-        if request.method != "POST":
-            return JsonResponse({'success': False, 'message': 'Invalid request'}, status=405)
-
         # Extract data from POST request
         data = json.loads(request.body)
@@ -426,4 +371,8 @@
         list_id = data.get('list_id')
 
+        # Debugging: Log received values
+        print(f"Product ID: {product_id}, List ID: {list_id}, User: {request.user}")
+
+        # Validate inputs
         if not product_id or not list_id:
             return JsonResponse({'success': False, 'message': 'Missing product or list ID'}, status=400)
@@ -433,5 +382,8 @@
         product = get_object_or_404(Products2, id=product_id)
 
-        # Get or create the item
+        # Debugging: Confirm the product and list are found
+        print(f"Shopping List: {shopping_list}, Product: {product}")
+
+        # Get or create the list item
         item, created = ShoppingListItem.objects.get_or_create(
             shopping_list=shopping_list,
@@ -440,17 +392,18 @@
         )
 
+        # Check if item is created or updated
         if not created:
             item.quantity += 1
             item.save()
 
-        return JsonResponse({
-            'success': True,
-            'message': f'{product.name} added to list',
-            'quantity': item.quantity
-        })
+        # Debugging: Confirm the item was saved
+        print(f"Item: {item}, Created: {created}")
+
+        return JsonResponse({'success': True, 'message': 'Product added to list'})
 
     except Exception as e:
-        print(f"Error: {e}")
+        print(f"Error: {e}")  # Log error details
         return JsonResponse({'success': False, 'message': str(e)}, status=400)
+
 def get_user_lists(request):
     if not request.user.is_authenticated:
@@ -464,30 +417,14 @@
     product = get_object_or_404(Products2, id=product_id)
 
-    chart_data = []
-    with connection.cursor() as cursor:
-        cursor.execute("""
-            SELECT scraped_date, price 
-            FROM product_history2 
-            WHERE name = %s AND store LIKE %s
-            ORDER BY scraped_date ASC
-        """, [product.name, '%' + product.store + '%'])
-
-        result = cursor.fetchall()
-        chart_data = [{
-            'date': row[0].isoformat(),
-            'price': float(row[1])
-        } for row in result]
-
+    # You can call your get_similar_products function here
     similar_products = get_similar_products(product.name, product.category)
 
     return render(request, 'main/product_detail.html', {
         'product': product,
-        'similar_products': similar_products,
-        'chart_data': chart_data,
-        'price_history': chart_data
+        'similar_products': similar_products
     })
 @login_required
 @require_POST
-@csrf_exempt
+@csrf_exempt  # Add this if you're still having CSRF issues during testing
 def remove_from_list(request, item_id):
     try:
@@ -512,5 +449,4 @@
         {
             'name': p.name,
-            'id': p.id,
             'price': str(p.price),
             'actual_price': str(p.actual_price),
@@ -523,4 +459,7 @@
 
 
+from difflib import SequenceMatcher
+from django.db import connection
+
 from difflib import get_close_matches
 from django.db import connection
@@ -532,7 +471,9 @@
     selected_product = request.GET.get('selected_product', '').strip()
 
+    # Get date range parameters
     start_date = request.GET.get('start_date')
     end_date = request.GET.get('end_date')
 
+    # Validate and parse dates
     try:
         start_date_obj = datetime.strptime(start_date, '%Y-%m-%d').date() if start_date else None
@@ -546,28 +487,21 @@
     similar_products = []
     exact_match = False
-    current_price = None
-    min_price = None
-    max_price = None
-    avg_price = None
-
-    if store and (query or selected_product):
-        # First check for exact match if we have a query (not selected product)
-        if query and not selected_product:
-            with connection.cursor() as cursor:
-                cursor.execute("""
-                    SELECT DISTINCT name 
-                    FROM product_history2 
-                    WHERE store LIKE %s AND name = %s
-                    LIMIT 1
-                """, ['%' + store + '%', query])
-                exact_match_result = cursor.fetchone()
-
-                if exact_match_result:
-                    matched_name = exact_match_result[0]
-                    exact_match = True
-
-        # If no exact match or we have selected_product, find similar products
-        if not exact_match:
-            with connection.cursor() as cursor:
+
+    if store and query:
+        with connection.cursor() as cursor:
+            # 1. First try exact match
+            cursor.execute("""
+                SELECT DISTINCT name 
+                FROM product_history2 
+                WHERE store LIKE %s AND name = %s
+                LIMIT 1
+            """, ['%' + store + '%', query])
+            exact_match_result = cursor.fetchone()
+
+            if exact_match_result:
+                matched_name = exact_match_result[0]
+                exact_match = True
+            else:
+                # 2. Get all product names from this store
                 cursor.execute("""
                     SELECT DISTINCT name FROM product_history2 
@@ -576,28 +510,36 @@
                 all_store_products = [row[0] for row in cursor.fetchall()]
 
-                search_term = selected_product if selected_product else query
+                # 3. Find similar products using multiple approaches
                 similar_products = []
 
-                if search_term:
-                    from difflib import get_close_matches
-                    string_matches = get_close_matches(
-                        search_term,
-                        all_store_products,
-                        n=10,
-                        cutoff=0.3
-                    )
-
-                    query_lower = search_term.lower()
-                    contains_matches = [
+                # Approach 1: Close string matches
+                string_matches = get_close_matches(
+                    query,
+                    all_store_products,
+                    n=10,
+                    cutoff=0.3
+                )
+
+                # Approach 2: Products containing the search term
+                query_lower = query.lower()
+                contains_matches = [
+                                       p for p in all_store_products
+                                       if query_lower in p.lower()
+                                   ][:10]
+
+                all_matches = list(set(string_matches + contains_matches))
+
+                if len(all_matches) < 5:
+                    all_matches.extend([
                                            p for p in all_store_products
-                                           if query_lower in p.lower()
-                                       ][:10]
-
-                    all_matches = list(set(string_matches + contains_matches))
-                    similar_products = [(p, 100) for p in all_matches[:10]]  # Using 100% for all for simplicity
-
-        # If we have a selected product or exact match, get price history
-        product_to_search = selected_product if selected_product else matched_name
-        if product_to_search:
+                                           if p not in all_matches
+                                       ][:10 - len(all_matches)])
+
+                similar_products = [(p, 1.0) for p in all_matches[:10]]
+
+        if selected_product:
+            matched_name = selected_product
+
+        if matched_name:
             base_sql = """
                 SELECT scraped_date, price 
@@ -605,6 +547,7 @@
                 WHERE name = %s AND store LIKE %s
             """
-            params = [product_to_search, '%' + store + '%']
-
+            params = [matched_name, '%' + store + '%']
+
+            # Add date range conditions if provided
             if start_date_obj and end_date_obj:
                 base_sql += " AND scraped_date BETWEEN %s AND %s"
@@ -627,14 +570,7 @@
                 } for row in result]
 
-                if result:
-                    prices = [float(row[1]) for row in result]
-                    current_price = prices[-1]
-                    min_price = min(prices)
-                    max_price = max(prices)
-                    avg_price = sum(prices) / len(prices)
-
-    context = {
+    return render(request, 'main/stats.html', {
         'chart_data': chart_data,
-        'matched_name': matched_name or selected_product,
+        'matched_name': matched_name,
         'query': query,
         'store': store,
@@ -643,416 +579,67 @@
         'start_date': start_date,
         'end_date': end_date,
-        'current_price': current_price,
-        'min_price': min_price,
-        'max_price': max_price,
-        'avg_price': avg_price,
+    })
+
+
+STORE_LOCATIONS = {
+    'Reptil': [
+        {'name': 'Reptil 1', 'lat': 42.002, 'lon': 21.400},
+        {'name': 'Reptil 2', 'lat': 42.005, 'lon': 21.410},
+        {'name': 'Reptil 3', 'lat': 42.010, 'lon': 21.420},
+    ],
+    'Vero': [
+        {'name': 'Vero 1', 'lat': 41.998, 'lon': 21.435},
+        {'name': 'Vero 2', 'lat': 42.012, 'lon': 21.395},
+    ],
+    'Ramstore': [
+        {'name': 'Ramstore 1', 'lat': 42.007, 'lon': 21.408},
+        {'name': 'Ramstore 2', 'lat': 42.015, 'lon': 21.420},
+    ]
+}
+
+def nearby_stores_view(request):
+    latitude = request.GET.get('latitude')
+    longitude = request.GET.get('longitude')
+    fuel_usage = request.GET.get('fuel_usage')
+    selected_store = request.GET.get('store')
+
+    if not latitude or not longitude or not fuel_usage or not selected_store:
+        return render(request, 'main/nearby_stores.html', {'error': 'Missing parameters'})
+
+    try:
+        user_location = (float(latitude), float(longitude))
+        fuel_usage = float(fuel_usage)
+    except ValueError:
+        return render(request, 'main/nearby_stores.html', {'error': 'Invalid input'})
+
+    stores = [
+        {'name': 'Reptil 1', 'lat': 42.003, 'lon': 21.406},
+        {'name': 'Reptil 2', 'lat': 42.010, 'lon': 21.420},
+        {'name': 'Reptil 3', 'lat': 42.005, 'lon': 21.400},
+        {'name': 'Vero 1', 'lat': 42.007, 'lon': 21.410},
+    ]
+
+    nearby_stores = []
+    for store in stores:
+        print(f"Checking store: {store['name']}")
+        if selected_store.lower() in store['name'].lower():
+            store_location = (store['lat'], store['lon'])
+            distance_km = geodesic(user_location, store_location).km
+            fuel_needed = (fuel_usage / 100) * distance_km
+            nearby_stores.append({
+                'name': store['name'],
+                'distance': distance_km,
+                'fuel': fuel_needed
+            })
+
+    nearby_stores.sort(key=lambda x: x['distance'])
+
+    context = {
+        'nearby_stores': nearby_stores,
+        'latitude': latitude,
+        'longitude': longitude,
+        'fuel_usage': fuel_usage,
+        'selected_store': selected_store,
     }
 
-    # Debug output - remove in production
-    # print("Context being sent to template:")
-    for key, value in context.items():
-        print(f"{key}: {value}")
-
-    return render(request, 'main/stats.html', context)
-
-# def get_driving_distance(user_lat, user_lon, store_lat, store_lon, api_key):
-#     url = "https://maps.googleapis.com/maps/api/distancematrix/json"
-#     params = {
-#         "origins": f"{user_lat},{user_lon}",
-#         "destinations": f"{store_lat},{store_lon}",
-#         "key": api_key,
-#         "units": "metric"
-#     }
-#     response = requests.get(url, params=params)
-#     data = response.json()
-#     print("Distance Matrix API response:", data)  # <-- add this
-#
-#     if data['status'] == 'OK':
-#         element = data['rows'][0]['elements'][0]
-#         if element['status'] == 'OK':
-#             distance_km = element['distance']['value'] / 1000
-#             duration = element['duration']['text']
-#             return distance_km, duration
-#     return None, None
-
-import openrouteservice
-
-def get_driving_distance(user_lat, user_lon, store_lat, store_lon, api_key):
-    client = openrouteservice.Client(key=api_key)
-    coords = ((user_lon, user_lat), (store_lon, store_lat))  # ORS expects (lon, lat)
-
-    try:
-        route = client.directions(coords, profile='driving-car', format='geojson')
-        distance_m = route['features'][0]['properties']['segments'][0]['distance']  # meters
-        duration_s = route['features'][0]['properties']['segments'][0]['duration']  # seconds
-
-        distance_km = distance_m / 1000
-        duration_min = round(duration_s / 60)
-        duration = f"{duration_min} min"
-
-        return distance_km, duration
-    except Exception as e:
-        print("ORS error:", e)
-        return None, None
-
-
-
-
-from django.conf import settings
-
-from django.shortcuts import render
-
-def nearby_stores_view(request):
-    user_lat = request.GET.get('latitude')
-    user_lon = request.GET.get('longitude')
-    fuel_consumption = request.GET.get('fuel_consumption')
-    store_chain = request.GET.get('store_chain')
-
-    # print("Received params:", user_lat, user_lon, fuel_consumption, store_chain)
-
-    if not all([user_lat, user_lon, fuel_consumption, store_chain]):
-        return render(request, "main/nearby_stores.html", {
-            "error": "Missing parameters.",
-            "results": [],
-        })
-
-    user_lat = float(user_lat)
-    user_lon = float(user_lon)
-    fuel_consumption = float(fuel_consumption)
-    store_chain = store_chain.lower()
-
-    stores = [
-        {"name": "Reptil Market Ruzveltova", "lat": 42.0040878561334, "lon": 21.41538436528707, "chain": "reptil"},
-        {"name": "Reptil Market Crniche", "lat": 41.98424985514346, "lon": 21.42854499185496, "chain": "reptil"},
-        {"name": "Reptil Market Butel", "lat": 42.03151299550568, "lon": 21.44460271127004, "chain": "reptil"},
-        {"name": "Reptil Market Avtokomanda", "lat": 42.00314285371043, "lon": 21.464809841955148, "chain": "reptil"},
-        {"name": "Reptil Market Radishani", "lat": 42.05659527027985, "lon": 21.451523714968985, "chain": "reptil"},
-        {"name": "Reptil Market Madzari", "lat": 42.00080136926024, "lon": 21.488524284283873, "chain": "reptil"},
-        {"name": "Reptil Market Lisice", "lat": 41.975386066287584, "lon": 21.472738657297704, "chain": "reptil"},
-        {"name": "Reptil Market Ardorom bul.Jane Sandanski", "lat": 41.98410917961027, "lon": 21.46690158428389, "chain": "reptil"},
-        {"name": "Reptil Market Bardovci", "lat": 42.025668068096394, "lon": 21.37584645411437, "chain": "reptil"},
-        {"name": "Reptil Market Aerodrom", "lat": 41.985188473060354, "lon": 21.453380984283882, "chain": "reptil"},
-        {"name": "Reptil Market Shop & Go", "lat": 41.99948987076041, "lon": 21.423976899626428, "chain": "reptil"},
-        {"name": "Reptil Market Zelen Pazar", "lat": 41.991862538872645, "lon": 21.433574943394476, "chain": "reptil"},
-        {"name": "Reptil Market Drzhavna Bolnica", "lat": 41.99082095885179, "lon": 21.424983018422854, "chain": "reptil"},
-        {"name": "Reptil Market Kisela Voda", "lat": 41.98173349419106, "lon": 21.43810738428388, "chain": "reptil"},
-        {"name": "Reptil Market Aerodrom", "lat": 41.9780, "lon": 21.4680, "chain": "reptil"},
-        {"name": "Reptil Market Karposh 3 br.9", "lat": 42.007022300132036, "lon": 21.400571526550074, "chain": "reptil"},
-        {"name": "Reptil Market Karposh br.6", "lat": 42.00112199222344, "lon": 21.41212279925285, "chain": "reptil"},
-        {"name": "Reptil Market Karposh br.5", "lat": 42.007478018986724, "lon": 21.395736283910317, "chain": "reptil"},
-        {"name": "Reptil Market Porta Vlae", "lat": 42.00816321194575, "lon": 21.370438003817473, "chain": "reptil"},
-        {"name": "Reptil Market Nerezi", "lat": 41.995647756137735, "lon": 21.39414196856774, "chain": "reptil"},
-        {"name": "Reptil Market Vlae", "lat": 42.011056469322966, "lon": 21.374480029937953, "chain": "reptil"},
-        {"name": "Reptil Market Centar Pestaloci", "lat": 41.99836555442384, "lon": 21.421861676512417, "chain": "reptil"},
-        {"name": "Ramstore Market 11", "lat": 41.9896248940383, "lon": 21.45568173713548, "chain": "ramstore"},
-        {"name": "Ramstore Cair", "lat": 42.017436971570035, "lon": 21.436184959875927, "chain": "ramstore"},
-        {"name": "Ramstore Cair 2", "lat": 42.022700328389064, "lon": 21.435762437135484, "chain": "ramstore"},
-        {"name": "Ramstore Star Aerodrom", "lat": 41.98654757229333, "lon": 21.450426514395055, "chain": "ramstore"},
-        {"name": "Ramstore Shopping Center", "lat": 41.99251527889315, "lon": 21.427055698505697, "chain": "ramstore"},
-        {"name": "Ramstore Kapitol", "lat": 41.9878772356499, "lon": 21.46707632124615, "chain": "ramstore"},
-        {"name": "Ramstore Market", "lat": 41.9853253132668, "lon": 21.483641643472588, "chain": "ramstore"},
-        {"name": "Ramstore Kapishtec", "lat": 41.9947383374632, "lon": 21.416895067820587, "chain": "ramstore"},
-        {"name": "Ramstore Taftalidze", "lat": 42.001758830707814, "lon": 21.389292875765268, "chain": "ramstore"},
-        {"name": "Ramstore Prashka", "lat": 41.99939882083739, "lon": 21.39787594427638, "chain": "ramstore"},
-        {"name": "Ramstore Vodno", "lat": 41.98469521844405, "lon":  21.420580291654616, "chain": "ramstore"},
-        {"name": "Ramstore Karposh", "lat": 42.00807772238484, "lon":  21.408472021246162, "chain": "ramstore"},
-        {"name": "Ramstore Debar Maalo", "lat": 42.002711576049585, "lon": 21.416465914395033, "chain": "ramstore"},
-        {"name": "Ramstore City Mall", "lat": 42.00592369715923, "lon": 21.391752451931264, "chain": "ramstore"},
-        {"name": "Vero Center", "lat": 41.99349349030633, "lon": 21.441443522297725, "chain": "vero"},
-        {"name": "Vero Market Diamond Mall", "lat": 41.99070018070719, "lon": 21.430010799252866, "chain": "vero"},
-        {"name": "Vero GTC", "lat": 41.9953250741886, "lon": 21.43430233350842, "chain": "vero"},
-        {"name": "Vero Kisela Voda", "lat": 41.98282114008978, "lon": 21.440353396808742, "chain": "vero"},
-        {"name": "Vero Aerodrom", "lat": 41.984879474737774, "lon": 21.46860481127003, "chain": "vero"},
-        {"name": "Vero Taftalidze", "lat": 41.99826594634961, "lon": 21.40492322342702, "chain": "vero"},
-        {"name": "Vero Market", "lat": 41.995321011631525, "lon": 21.420769939888274, "chain": "vero"},
-        {"name": "Vero Market Cair", "lat": 42.01471886198107, "lon": 21.44505766894132, "chain": "vero"},
-        {"name": "Vero Karposh 4", "lat": 42.00712126048666, "lon": 21.392984968941317, "chain": "vero"},
-    ]
-
-    filtered_stores = [s for s in stores if s["chain"] == store_chain]
-    # print("Filtered stores:", filtered_stores)
-
-    results = []
-    for store in filtered_stores:
-        distance_km, duration = get_driving_distance(
-            user_lat,
-            user_lon,
-            store["lat"],
-            store["lon"],
-            settings.ORS_API_KEY  # Pass your ORS key here
-        )
-        if distance_km is not None:
-            gas_used = (distance_km * 2 * fuel_consumption) / 100  # round trip
-            results.append({
-                "store": store["name"],
-                "distance_km": round(distance_km, 2),
-                "duration": duration,
-                "gas_used": round(gas_used, 2),
-                "latitude": store["lat"],
-                "longitude": store["lon"],
-            })
-
-    nearest_stores_top5 = sorted(results, key=lambda x: x['distance_km'])[:5]
-    least_gas_stores_top5 = sorted(results, key=lambda x: x['gas_used'])[:5]
-
-    context = {
-        "results": results,
-        "nearest_stores": nearest_stores_top5,
-        "least_gas_stores": least_gas_stores_top5,
-        "latitude": user_lat,
-        "longitude": user_lon,
-        "fuel_consumption": fuel_consumption,
-        "store_chain": store_chain.title(),
-    }
-
-    return render(request, "main/nearby_stores.html", context)
-
-
-from django.shortcuts import render
-from django.http import JsonResponse
-from django.views.decorators.csrf import csrf_exempt
-
-@csrf_exempt
-def fridge_recipes(request):
-    if request.method != 'POST':
-        return JsonResponse({'error': 'Invalid method'}, status=405)
-    try:
-        data = json.loads(request.body)
-        ingredients = data.get('ingredients', '')
-
-        payload = {
-            "inputs": f"User has the following ingredients: {ingredients}. Suggest a Macedonian recipe using them. Return only one recipe with name and preparation steps."
-        }
-        headers = {
-            "Authorization": f"Bearer {settings.HUGGINGFACE_TOKEN}"
-        }
-        response = requests.post(
-            "https://api-inference.huggingface.co/models/mistralai/Mistral-7B-Instruct-v0.1",
-            headers=headers,
-            json=payload
-        )
-
-        if response.status_code != 200:
-            print(f"Hugging Face API error {response.status_code}: {response.text}")
-            return JsonResponse({"error": "Не може да се генерира рецепт. Обидете се повторно."}, status=500)
-
-        result = response.json()
-        if isinstance(result, dict) and result.get("error"):
-            print(f"HF API returned error: {result['error']}")
-            return JsonResponse({"error": "Не може да се генерира рецепт. Обидете се повторно."}, status=500)
-
-        generated_text = result[0]['generated_text']
-
-        return JsonResponse({
-            "recipes": [{
-                "title": "Предлог Рецепт",
-                "description": generated_text
-            }]
-        })
-    except Exception as e:
-        import traceback
-        traceback.print_exc()
-        return JsonResponse({"error": "Не може да се генерира рецепт. Обидете се повторно."}, status=500)
-
-
-LATIN_TO_CYRILLIC = {
-    'dzh': 'џ', 'ch': 'ч', 'sh': 'ш', 'zh': 'ж', 'lj': 'љ', 'nj': 'њ', 'kj': 'ќ', 'dj': 'ѓ',
-    'a': 'а', 'b': 'б', 'v': 'в', 'g': 'г', 'd': 'д', 'e': 'е', 'z': 'з', 'i': 'и',
-    'j': 'ј', 'k': 'к', 'l': 'л', 'm': 'м', 'n': 'н', 'o': 'о', 'p': 'п', 'r': 'р',
-    's': 'с', 't': 'т', 'u': 'у', 'f': 'ф', 'h': 'х', 'c': 'ц',
-}
-
-def transliterate_latin_to_cyrillic(text):
-    result = ''
-    i = 0
-    while i < len(text):
-        if text[i:i+3].lower() in LATIN_TO_CYRILLIC:
-            result += LATIN_TO_CYRILLIC[text[i:i+3].lower()]
-            i += 3
-        elif text[i:i+2].lower() in LATIN_TO_CYRILLIC:
-            result += LATIN_TO_CYRILLIC[text[i:i+2].lower()]
-            i += 2
-        elif text[i].lower() in LATIN_TO_CYRILLIC:
-            result += LATIN_TO_CYRILLIC[text[i].lower()]
-            i += 1
-        else:
-            result += text[i]
-            i += 1
-    return result
-
-def search_suggestions(request):
-    query = request.GET.get('q', '').strip()
-    if len(query) < 2:
-        return JsonResponse({'suggestions': []})
-
-    cyrillic_query = transliterate_latin_to_cyrillic(query)
-
-    suggestions = Products2.objects.filter(
-        name__icontains=cyrillic_query
-    ).values_list('name', flat=True).distinct()[:10]
-
-    if not suggestions:
-        suggestions = Products2.objects.filter(
-            name__icontains=query
-        ).values_list('name', flat=True).distinct()[:10]
-
-    return JsonResponse({'suggestions': list(suggestions)})
-
-
-def header(request):
-    return render(request, "main/header.html")
-
-
-@require_POST
-def toggle_favorite(request):
-    # Handle unauthenticated users
-    if not request.user.is_authenticated:
-        return JsonResponse({
-            'success': False,
-            'message': 'Authentication required',
-            'login_required': True,
-            'login_url': f'/login/?next={request.META.get("HTTP_REFERER", "/")}'
-        }, status=401)
-
-    try:
-        data = json.loads(request.body)
-        product_id = data.get('product_id')
-
-        if not product_id:
-            return JsonResponse({'success': False, 'message': 'Product ID is required'}, status=400)
-
-        product = Products2.objects.get(id=product_id)
-
-        # Check if favorite exists
-        favorite_exists = Favorite.objects.filter(
-            user=request.user,
-            product=product
-        ).exists()
-
-        if favorite_exists:
-            # Delete if exists
-            Favorite.objects.filter(
-                user=request.user,
-                product=product
-            ).delete()
-            return JsonResponse({
-                'success': True,
-                'action': 'removed',
-                'is_favorite': False,
-                'product_id': product_id
-            })
-        else:
-            # Create if doesn't exist
-            Favorite.objects.create(
-                user=request.user,
-                product=product
-            )
-            return JsonResponse({
-                'success': True,
-                'action': 'added',
-                'is_favorite': True,
-                'product_id': product_id
-            })
-
-    except Products2.DoesNotExist:
-        return JsonResponse({
-            'success': False,
-            'message': 'Product not found'
-        }, status=404)
-    except Exception as e:
-        return JsonResponse({
-            'success': False,
-            'message': str(e)
-        }, status=500)
-@login_required
-def favorites_list(request):
-    favorites = Favorite.objects.filter(user=request.user).select_related('product')
-    return render(request, 'main/favorites.html', {'favorites': favorites})
-
-@login_required
-def get_favorites(request):
-    if request.user.is_authenticated:
-        favorites = Favorite.objects.filter(user=request.user).values_list('product_id', flat=True)
-        return JsonResponse({
-            'success': True,
-            'favorites': list(favorites)
-        })
-    return JsonResponse({'success': False, 'message': 'User not authenticated'})
-
-from django.http import JsonResponse
-from django.db import connection
-from datetime import datetime
-
-def product_history_api(request):
-    store = request.GET.get('store', '').strip()
-    product = request.GET.get('product', '').strip()
-    start_date = request.GET.get('start_date')
-    end_date = request.GET.get('end_date')
-
-    if not store or not product:
-        return JsonResponse({'error': 'Missing store or product'}, status=400)
-
-    try:
-        start_date_obj = datetime.strptime(start_date, '%Y-%m-%d').date() if start_date and start_date != 'None' else None
-        end_date_obj = datetime.strptime(end_date, '%Y-%m-%d').date() if end_date and end_date != 'None' else None
-    except (ValueError, TypeError):
-        start_date_obj = None
-        end_date_obj = None
-
-    base_sql = """
-        SELECT scraped_date, price 
-        FROM product_history2 
-        WHERE name = %s AND store LIKE %s
-    """
-    params = [product, f"%{store}%"]
-
-    if start_date_obj and end_date_obj:
-        base_sql += " AND scraped_date BETWEEN %s AND %s"
-        params.extend([start_date_obj, end_date_obj])
-    elif start_date_obj:
-        base_sql += " AND scraped_date >= %s"
-        params.append(start_date_obj)
-    elif end_date_obj:
-        base_sql += " AND scraped_date <= %s"
-        params.append(end_date_obj)
-
-    base_sql += " ORDER BY scraped_date ASC"
-
-    with connection.cursor() as cursor:
-        cursor.execute(base_sql, params)
-        rows = cursor.fetchall()
-        data = [{'date': row[0].isoformat(), 'price': float(row[1])} for row in rows]
-
-    return JsonResponse({'data': data})
-
-from django.http import JsonResponse
-from rapidfuzz import fuzz
-from .models import ShoppingList, ShoppingListItem, Products2
-
-def generate_cheaper_list(request, list_id):
-    shopping_list = get_object_or_404(ShoppingList, id=list_id)
-    items = ShoppingListItem.objects.filter(shopping_list=shopping_list)
-
-    cheaper_alternatives = []
-
-    for item in items:
-        product = item.product
-        product_name = product.name
-        product_category = product.category
-
-        # најди најслични продукти со твојата функција
-        candidates = get_similar_products(product_name, product_category, top_n=5)
-
-        if candidates:
-            # земи го првиот кој е поевтин
-            for candidate in candidates:
-                if candidate['price'] and product.price and candidate['price'] < product.price:
-                    cheaper_alternatives.append({
-                        "original": f"{product.name} ({product.price} ден.)",
-                        "alternative": f"{candidate['name']} ({candidate['price']} ден.)",
-                        "store": candidate['store'],
-                        "image": candidate.get('image'),
-                    })
-                    break  # најдовме поевтина → не барај понатаму
-
-    return JsonResponse({"alternatives": cheaper_alternatives})
+    return render(request, 'main/nearby_stores.html', context)