* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
a.logo {
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    color:wheat
}
a.logo i {
    margin-right: 10px;
    color: var(--accent);
}

:root {
    /* Green grocery theme - Light Mode */
    --primary: #2e7d32;    /* main deep green */
    --secondary: #66bb6a;  /* lighter green for gradients */
    --accent: #8bc34a;     /* accent/CTA green */
    --accent-warm: #f9a825; /* warm yellow accent for contrast */
    --light: #f5f9f3;      /* very light greenish background */
    --dark: #174d21;       /* dark green for text */
    --gray: #687076;
    --card-bg: #ffffff;
    --text-color: #174d21;
    /* subtle background pattern for 'market' vibe */
    --body-pattern: radial-gradient(rgba(23,77,33,0.02) 1px, transparent 1px);
    --body-pattern-size: 12px 12px;
}

/* Dark Mode Theme */
[data-theme="dark"] {
    --primary: #1b5e20;    /* darker green */
    --secondary: #2e7d32;  /* medium green for gradients */
    --accent: #66bb6a;     /* accent green */
    --accent-warm: #fdd835; /* brighter yellow for dark bg */
    --light: #1a2e1a;      /* dark green background */
    --dark: #e8f5e9;       /* light green text */
    --gray: #a5d6a7;
    --card-bg: #244024;    /* dark green card background */
    --text-color: #e8f5e9;
    --body-pattern: radial-gradient(rgba(232,245,233,0.03) 1px, transparent 1px);
}

body {
    /* use theme light background for pages so content sits on a soft green wash */
    background-color: var(--light);
    /* subtle repeating dot texture layered over background color */
    background-image: var(--body-pattern);
    background-size: var(--body-pattern-size);
    background-repeat: repeat;
    color: var(--text-color);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Headings in dark mode */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #e8f5e9;
}

[data-theme="dark"] p {
    color: #c8e6c9;
}

.card {
    background-color: var(--card-bg);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Ensure page content sits on the theme background (no opaque container fill) */
.container, main, section, .content {
    background: transparent;
}

/* Card and product surface styling for a consistent theme */
.card, .product-card {
    background: #fff; /* white surface for cards */
    border-radius: 10px;
    border: 1px solid rgba(46,125,50,0.06);
    box-shadow: 0 8px 24px rgba(23,77,33,0.06);
}

[data-theme="dark"] .card,
[data-theme="dark"] .product-card {
    background: var(--card-bg);
    border: 1px solid rgba(102,187,106,0.2);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.product-card .card-body { padding: 12px; }
.product-card .price { color: var(--accent-warm); font-size: 1rem; }

/* Ensure product names and text are visible in dark mode */
[data-theme="dark"] .card-title,
[data-theme="dark"] .product-card h6,
[data-theme="dark"] .product-card .card-title {
    color: #e8f5e9 !important;
    font-weight: 600;
}

[data-theme="dark"] .card-text,
[data-theme="dark"] .product-card p {
    color: #c8e6c9 !important;
}

[data-theme="dark"] .price,
[data-theme="dark"] .product-card .price {
    color: var(--accent-warm) !important;
}

[data-theme="dark"] .original-price {
    color: #a5d6a7 !important;
}

/* Dark mode text visibility fixes */
[data-theme="dark"] a {
    color: #81c784;
}

[data-theme="dark"] a:hover {
    color: #a5d6a7;
}

[data-theme="dark"] .text-muted {
    color: #a5d6a7 !important;
}

[data-theme="dark"] .alert-info {
    background-color: rgba(102, 187, 106, 0.2);
    border-color: #66bb6a;
    color: #e8f5e9;
}

[data-theme="dark"] .btn-outline-primary {
    color: #81c784;
    border-color: #66bb6a;
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: #66bb6a;
    color: white;
}

[data-theme="dark"] label {
    color: #c8e6c9;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: rgba(102, 187, 106, 0.1);
    border-color: rgba(102, 187, 106, 0.3);
    color: #e8f5e9;
}

[data-theme="dark"] .form-control::placeholder {
    color: #a5d6a7;
}

[data-theme="dark"] .sidebar {
    background-color: var(--card-bg);
    color: var(--text-color);
}

[data-theme="dark"] .sidebar h5 {
    color: #e8f5e9;
}

[data-theme="dark"] .section-header {
    border-bottom-color: rgba(102, 187, 106, 0.3);
}

[data-theme="dark"] .section-header h2 {
    color: #81c784;
}

[data-theme="dark"] .view-more {
    color: #a5d6a7;
}

[data-theme="dark"] .view-more:hover {
    color: #81c784;
}

[data-theme="dark"] .filtered-header {
    background: linear-gradient(90deg, rgba(102, 187, 106, 0.2), rgba(102, 187, 106, 0.1));
    color: #81c784;
}

[data-theme="dark"] .products-grid.filtered .product-card {
    border: 1px solid rgba(102, 187, 106, 0.2);
}

[data-theme="dark"] .btn {
    color: white;
}

[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
}

[data-theme="dark"] .product-badge {
    color: white;
}

[data-theme="dark"] .add-to-cart {
    background: var(--secondary);
    color: white;
}

[data-theme="dark"] .wishlist {
    border-color: rgba(102, 187, 106, 0.3);
    color: #a5d6a7;
}

[data-theme="dark"] .d-flex .text-muted,
[data-theme="dark"] div.text-muted {
    color: #a5d6a7 !important;
}

[data-theme="dark"] table {
    color: #e8f5e9;
}

[data-theme="dark"] table thead th {
    background-color: rgba(102, 187, 106, 0.2);
    color: #e8f5e9;
    border-color: rgba(102, 187, 106, 0.3);
}

[data-theme="dark"] table tbody td {
    border-color: rgba(102, 187, 106, 0.2);
    color: #c8e6c9;
}

[data-theme="dark"] table tbody tr:hover {
    background-color: rgba(102, 187, 106, 0.1);
}

[data-theme="dark"] .table {
    color: #e8f5e9;
    border-color: rgba(102, 187, 106, 0.2);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(102, 187, 106, 0.05);
}

[data-theme="dark"] .breadcrumb {
    background-color: rgba(102, 187, 106, 0.1);
}

[data-theme="dark"] .breadcrumb-item,
[data-theme="dark"] .breadcrumb-item a {
    color: #a5d6a7;
}

[data-theme="dark"] .breadcrumb-item.active {
    color: #e8f5e9;
}

[data-theme="dark"] .badge {
    background-color: var(--primary);
    color: white;
}

[data-theme="dark"] strong,
[data-theme="dark"] b {
    color: #e8f5e9;
}

[data-theme="dark"] small {
    color: #a5d6a7;
}

[data-theme="dark"] hr {
    border-color: rgba(102, 187, 106, 0.3);
}

/* Dropdown menus in dark mode */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--card-bg);
    border-color: rgba(102, 187, 106, 0.3);
}

[data-theme="dark"] .dropdown-item {
    color: #e8f5e9;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: rgba(102, 187, 106, 0.2);
    color: #ffffff;
}

[data-theme="dark"] .dropdown-divider {
    border-color: rgba(102, 187, 106, 0.2);
}

/* Top menu dropdown in dark mode */
[data-theme="dark"] .top-menu .dropdown-menu {
    background-color: #244024;
}

[data-theme="dark"] .top-menu .dropdown-item {
    color: #e8f5e9;
}

[data-theme="dark"] .top-menu .dropdown-item:hover {
    background-color: rgba(102, 187, 106, 0.3);
}

/* Mobile menu in dark mode */
[data-theme="dark"] #nav-menu {
    background: linear-gradient(135deg, #1b5e20, #2e7d32);
}

[data-theme="dark"] #nav-menu li a {
    color: white;
}

[data-theme="dark"] #nav-menu .dropdown-menu {
    background-color: rgba(27, 94, 32, 0.95);
}

[data-theme="dark"] #nav-menu .dropdown-menu li a {
    color: #e8f5e9;
    border-bottom-color: rgba(102, 187, 106, 0.2);
}

[data-theme="dark"] #nav-menu .dropdown-menu li a:hover {
    background-color: rgba(102, 187, 106, 0.3);
}

/* Category dropdown in main nav */
[data-theme="dark"] nav .dropdown-menu {
    background-color: #244024;
    border-color: rgba(102, 187, 106, 0.3);
}

[data-theme="dark"] nav .dropdown-menu li a {
    color: #e8f5e9;
}

[data-theme="dark"] nav .dropdown-menu li a:hover {
    background-color: rgba(102, 187, 106, 0.3);
}

/* Desktop dropdown menus - Bootstrap dropdowns */
[data-theme="dark"] .header-actions .dropdown-menu {
    background-color: #244024;
    border-color: rgba(102, 187, 106, 0.3);
}

[data-theme="dark"] .header-actions .dropdown-item {
    color: #e8f5e9;
}

[data-theme="dark"] .header-actions .dropdown-item:hover {
    background-color: rgba(102, 187, 106, 0.3);
    color: white;
}

/* Specific styles for category dropdown in nav */
[data-theme="dark"] #nav-menu .dropdown-menu {
    background: #244024;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] #nav-menu .dropdown-menu li a {
    color: #e8f5e9;
    border-left-color: transparent;
}

[data-theme="dark"] #nav-menu .dropdown-menu li a:hover {
    background: rgba(102, 187, 106, 0.2);
    color: white;
    border-left-color: #81c784;
}

/* Lists and navigation items */
[data-theme="dark"] ul li {
    color: #c8e6c9;
}

[data-theme="dark"] ol li {
    color: #c8e6c9;
}

/* Buttons */
[data-theme="dark"] .btn-secondary {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: white;
}

[data-theme="dark"] .btn-success {
    background-color: #4caf50;
    color: white;
}

[data-theme="dark"] .btn-light {
    background-color: rgba(102, 187, 106, 0.2);
    border-color: rgba(102, 187, 106, 0.3);
    color: #e8f5e9;
}

[data-theme="dark"] .btn-light:hover {
    background-color: rgba(102, 187, 106, 0.3);
    color: white;
}

/* Text utilities */
[data-theme="dark"] .text-dark {
    color: #e8f5e9 !important;
}

[data-theme="dark"] .text-secondary {
    color: #a5d6a7 !important;
}

[data-theme="dark"] .text-success {
    color: #81c784 !important;
}

/* Navbar brand and links */
[data-theme="dark"] .navbar-brand {
    color: white !important;
}

[data-theme="dark"] .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] .navbar-nav .nav-link:hover {
    color: white !important;
}

/* List group items */
[data-theme="dark"] .list-group-item {
    background-color: var(--card-bg);
    border-color: rgba(102, 187, 106, 0.2);
    color: #e8f5e9;
}

[data-theme="dark"] .list-group-item:hover {
    background-color: rgba(102, 187, 106, 0.1);
}

/* Modals */
[data-theme="dark"] .modal-content {
    background-color: var(--card-bg);
    color: var(--text-color);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: rgba(102, 187, 106, 0.2);
}

[data-theme="dark"] .modal-footer {
    border-top-color: rgba(102, 187, 106, 0.2);
}

[data-theme="dark"] .modal-title {
    color: #e8f5e9;
}

[data-theme="dark"] .close {
    color: #e8f5e9;
}

/* Make index/content area feel warmer and themed */
.hero { margin-bottom: 18px; }


/* Category list themed badges */
.category-list li { margin-bottom: 8px; }
.category-list a {
    display: inline-block;
    padding: 6px 12px;
    color: var(--primary);
    background: rgba(46,125,50,0.06); /* subtle green wash */
    border-radius: 14px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.25s, color 0.25s, transform 0.08s;
}
.category-list a:hover,
.category-list a:focus {
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    color: #fff;
    transform: translateY(-1px);
}

[data-theme="dark"] .category-list a {
    color: #a5d6a7;
    background: rgba(102,187,106,0.15);
}

[data-theme="dark"] .category-list a:hover,
[data-theme="dark"] .category-list a:focus {
    background: linear-gradient(90deg, #2e7d32, #4caf50);
    color: #fff;
}


/* Header Styles */
header {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    padding: 15px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

[data-theme="dark"] header {
    background: linear-gradient(135deg, #1b5e20, #2e7d32);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
}

    .logo i {
        margin-right: 10px;
        color: var(--accent);
    }

nav ul {
    display: flex;
    list-style: none;
}

    nav ul li {
        margin-left: 25px;
        position: relative;
    }

        nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
            position: relative;
        }

            nav ul li a:hover {
                color: var(--accent);
            }

            nav ul li a::after {
                content: '';
                position: absolute;
                width: 0;
                height: 2px;
                bottom: -5px;
                left: 0;
                background-color: var(--accent);
                transition: width 0.3s;
            }

            nav ul li a:hover::after {
                width: 100%;
            }

.header-actions {
    display: flex;
    align-items: center;
}

.top-menu {
    display: flex;
    list-style: none;
    align-items: center;
    margin: 0;
    padding: 0;
}

    .top-menu li {
        margin-left: 20px;
        position: relative;
    }

        .top-menu li a {
            color: white;
            font-size: 1.2rem;
            transition: color 0.3s;
            display: flex;
            align-items: center;
            text-decoration: none;
        }

            .top-menu li a:hover {
                color: var(--accent);
            }

        /* Dropdown menu for user icon */
        .top-menu li ul {
            position: absolute;
            top: 100%;
            right: 0;
            background: white;
            min-width: 150px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease;
            list-style: none;
            padding: 10px 0;
            z-index: 1000;
        }

        /* Allow toggling on mobile by adding a show class to parent li */
        .top-menu li.show > ul {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .top-menu li:hover ul {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        /* Slide-in animation for account dropdown specifically */
        .account-dropdown .dropdown-menu {
            transform: translateY(-12px);
            opacity: 0;
            visibility: hidden;
            transition: transform 180ms ease, opacity 180ms ease, visibility 180ms;
            transform-origin: top right;
        }

        .account-dropdown.show .dropdown-menu,
        .account-dropdown:hover .dropdown-menu {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
        }

        .top-menu li ul li {
            margin: 0;
            width: 100%;
        }

/* Hide mobile-only items on desktop */
.mobile-only {
    display: none;
}

            .top-menu li ul li a {
                color: var(--dark);
                font-size: 0.9rem;
                padding: 8px 15px;
                display: block;
                width: 100%;
                transition: all 0.3s;
            }

                .top-menu li ul li a:hover {
                    background: var(--light);
                    color: var(--primary);
                }

                .top-menu li ul li a i {
                    margin-right: 8px;
                    color: var(--secondary);
                }

.mobile-menu {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Mobile actions container - hidden on desktop */
.mobile-actions {
    display: none;
}

/* Ensure the mobile hamburger sits above other elements and is clickable */
.mobile-menu {
    position: relative;
    z-index: 2000;
}

/* Search Bar Styles */
.search-bar {
    display: none;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    padding: 15px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: sticky;
    top: 70px;
    z-index: 99;
    animation: slideDown 0.3s ease;
}

.search-bar.active {
    display: block;
}

.search-form {
    width: 100%;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 8px;
    padding: 5px 10px;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .search-input-wrapper {
    background: var(--card-bg);
}

.search-input-wrapper i.fa-search {
    color: var(--primary);
    font-size: 1.1rem;
}

.search-input-wrapper input {
    flex: 1;
    border: none;
    padding: 10px;
    font-size: 1rem;
    background: transparent;
    color: var(--text-color);
    outline: none;
}

.search-input-wrapper input::placeholder {
    color: var(--gray);
}

.search-submit-btn {
    padding: 10px 20px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    white-space: nowrap;
}

.search-submit-btn:hover {
    background: var(--secondary);
}

.search-close-btn {
    background: transparent;
    border: none;
    color: var(--gray);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 5px 10px;
    transition: color 0.3s;
}

.search-close-btn:hover {
    color: var(--primary);
}

/* Hero Section */
.hero {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1556909114-4d0d853e5e25?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 100px 0;
    text-align: center;
}

    .hero h1 {
        font-size: 3rem;
        margin-bottom: 20px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .hero p {
        font-size: 1.2rem;
        max-width: 700px;
        margin: 0 auto 30px;
    }

.btn {
    display: inline-block;
    background: var(--accent);
    color: white;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
}

    .btn:hover {
        background: #f57c00;
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

/* Main Content */
.main-content {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 30px;
    padding: 40px 0;
}

/* Sidebar */
.sidebar {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

    .sidebar h3 {
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--secondary);
        color: var(--primary);
    }

.categories {
    list-style: none;
}

    .categories li {
        margin-bottom: 12px;
    }

        .categories li a {
            color: var(--dark);
            text-decoration: none;
            transition: color 0.3s;
            display: flex;
            align-items: center;
        }

            .categories li a:hover {
                color: var(--secondary);
            }

            .categories li a i {
                margin-right: 10px;
                color: var(--secondary);
            }

.offer-banner {
    margin-top: 30px;
    background: linear-gradient(135deg, var(--accent), #ffb74d);
    padding: 20px;
    border-radius: 10px;
    color: white;
    text-align: center;
}

    .offer-banner h4 {
        margin-bottom: 10px;
        font-size: 1.2rem;
    }

    .offer-banner p {
        margin-bottom: 15px;
        font-size: 0.9rem;
    }

/* Products Section */
.products-section {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #eee;
}

    .section-header h2 {
        color: var(--primary);
        font-size: 1.8rem;
    }

.view-more {
    color: var(--secondary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

    .view-more:hover {
        color: var(--primary);
    }

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
}

.product-card {
    background: linear-gradient(180deg, #ffffff, rgba(245,249,243,0.95));
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 26px rgba(23,77,33,0.06);
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
}

[data-theme="dark"] .product-card {
    background: linear-gradient(180deg, #2a4a2a, rgba(26,46,26,0.95));
    box-shadow: 0 8px 26px rgba(0,0,0,0.4);
}

    .product-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 18px 40px rgba(23,77,33,0.10);
    }

[data-theme="dark"] .product-card:hover {
    box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}

.product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--accent);
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 2;
}

    .product-badge.new {
        background: var(--secondary);
    }

    .product-badge.sale {
        background: #f44336;
    }

    .product-badge.organic {
        background: #4caf50;
    }

.product-image {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Highlighted styles when viewing a specific category */
.filtered-header {
    display: inline-block;
    padding: 6px 12px;
    background: linear-gradient(90deg, rgba(13,110,253,0.12), rgba(13,110,253,0.06));
    color: #0d6efd;
    border-radius: 8px;
    font-weight: 600;
}

.products-grid.filtered .product-card {
    border: 1px solid rgba(13,110,253,0.12);
    box-shadow: 0 6px 18px rgba(13,110,253,0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.products-grid.filtered .product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(13,110,253,0.08);
}

.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(23,77,33,0.55); /* green-tinted overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.product-card:hover .product-overlay {
    opacity: 1;
}

.quick-view {
    background: white;
    color: var(--dark);
    padding: 10px 18px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.22s ease;
}

    .quick-view:hover {
        background: linear-gradient(90deg, var(--primary), var(--secondary));
        color: white;
    }

.product-info {
    padding: 15px;
}

    .product-info h3 {
        font-size: 1.1rem;
        margin-bottom: 10px;
        color: var(--primary);
    }

.product-weight {
    color: var(--gray);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.product-price {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.current-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent-warm);
    margin-right: 10px;
}

/* Price warm accent helper (used on Index product listings) */
.price-warm {
    color: var(--accent-warm) !important;
    font-weight: 700;
}

/* Footer styles to match the green grocery theme */
footer {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    padding: 40px 0 20px;
}

[data-theme="dark"] footer {
    background: linear-gradient(135deg, #1b5e20, #2e7d32);
}

.footer-content {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.footer-column {
    flex: 1 1 220px;
}

.footer-column h3 {
    color: #fff;
    margin-bottom: 12px;
}

.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: rgba(255,255,255,0.92); text-decoration: none; }
.footer-links a:hover { color: var(--accent-warm); }

.social-links a { color: rgba(255,255,255,0.9); margin-right: 8px; display:inline-block; }

.copyright { margin-top: 22px; color: rgba(255,255,255,0.85); font-size: 0.9rem; }

/* Make links and CTAs inside content follow the primary color */
a { color: var(--primary); }
a:hover { color: var(--secondary); }

/* Slightly tint section surfaces site-wide */
.card, .products-section, .sidebar { background-clip: padding-box; }

.original-price {
    font-size: 1rem;
    color: var(--gray);
    text-decoration: line-through;
}

.product-actions {
    display: flex;
    justify-content: space-between;
}

.add-to-cart {
    background: var(--secondary);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
    font-weight: 600;
    flex: 1;
    margin-right: 10px;
}

    .add-to-cart:hover {
        background: var(--primary);
    }

.wishlist {
    background: transparent;
    border: 1px solid #ddd;
    color: var(--gray);
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
}

    .wishlist:hover {
        color: var(--accent);
        border-color: var(--accent);
    }

/* Deals Section */
.deals-section {
    margin: 40px 0;
}

.deals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.deal-card {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s;
}

    .deal-card:hover {
        transform: translateY(-5px);
    }

    .deal-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.1);
        transform: rotate(30deg);
    }

    .deal-card h3 {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .deal-card p {
        margin-bottom: 20px;
        opacity: 0.9;
    }

.deal-price {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--accent);
}

.deal-btn {
    background: white;
    color: var(--primary);
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: all 0.3s;
}

    .deal-btn:hover {
        background: var(--accent);
        color: white;
    }

/* Features Section */
.features {
    background: white;
    border-radius: 10px;
    padding: 30px;
    margin: 40px 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
}

.feature {
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    transition: transform 0.3s;
}

    .feature:hover {
        transform: translateY(-5px);
    }

    .feature i {
        font-size: 2.5rem;
        color: var(--secondary);
        margin-bottom: 15px;
    }

    .feature h3 {
        margin-bottom: 10px;
        color: var(--primary);
    }

    .feature p {
        color: var(--gray);
    }

/* Newsletter Section */
.newsletter {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    padding: 50px 0;
    text-align: center;
    margin: 40px 0;
}

    .newsletter h2 {
        font-size: 2rem;
        margin-bottom: 15px;
    }

    .newsletter p {
        max-width: 600px;
        margin: 0 auto 25px;
        opacity: 0.9;
    }

.newsletter-form {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
}

    .newsletter-form input {
        flex: 1;
        padding: 15px 20px;
        border: none;
        border-radius: 30px 0 0 30px;
        font-size: 1rem;
    }

    .newsletter-form button {
        background: var(--accent);
        color: white;
        border: none;
        padding: 0 30px;
        border-radius: 0 30px 30px 0;
        cursor: pointer;
        font-weight: 600;
        transition: background 0.3s;
    }

        .newsletter-form button:hover {
            background: #f57c00;
        }

/* Footer */
footer {
    background: var(--dark);
    color: white;
    padding: 60px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-column h3 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: var(--accent);
    position: relative;
    padding-bottom: 10px;
}

    .footer-column h3::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 50px;
        height: 2px;
        background: var(--secondary);
    }

.footer-column p {
    margin-bottom: 20px;
    opacity: 0.8;
}

.footer-links {
    list-style: none;
}

    .footer-links li {
        margin-bottom: 12px;
    }

        .footer-links li a {
            color: white;
            text-decoration: none;
            opacity: 0.8;
            transition: opacity 0.3s;
            display: flex;
            align-items: center;
        }

            .footer-links li a:hover {
                opacity: 1;
                color: var(--accent);
            }

            .footer-links li a i {
                margin-right: 10px;
                color: var(--secondary);
            }

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

    .social-links a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        color: white;
        transition: all 0.3s;
    }

        .social-links a:hover {
            background: var(--accent);
            transform: translateY(-3px);
        }

.copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0.7;
}

/* Responsive Styles */
@media (max-width: 992px) {
    .main-content {
        grid-template-columns: 1fr;
    }

    .sidebar {
        display: none;
    }

    .mobile-menu {
        display: block;
    }

    /* Show mobile actions container */
    .mobile-actions {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .mobile-actions a {
        color: white;
        font-size: 1.3rem;
        cursor: pointer;
        transition: color 0.3s;
    }

    .mobile-actions a:hover {
        color: var(--accent);
    }

    /* Hide top menu on mobile */
    .header-actions {
        display: none;
    }

    /* Show mobile-only menu items */
    .mobile-only {
        display: block !important;
    }

    nav ul {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        background: var(--primary);
        flex-direction: column;
        padding: 20px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        z-index: 1999; /* keep menu above page content */
    }

        nav ul.show {
            display: flex;
            z-index: 1999;
        }

        nav ul li.mobile-only a {
            color: white;
            padding: 12px 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        nav ul li.mobile-only a i {
            width: 20px;
        }

        nav ul li {
            margin: 10px 0;
        }

        /* Keep category dropdown collapsed on mobile */
        nav ul li.dropdown .dropdown-menu {
            position: static;
            display: none;
            background: rgba(0, 0, 0, 0.1);
            box-shadow: none;
            margin-top: 5px;
            padding: 10px;
        }

        nav ul li.dropdown:hover .dropdown-menu,
        nav ul li.dropdown.show .dropdown-menu {
            display: block;
        }
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.2rem;
    }

    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .deals-grid {
        grid-template-columns: 1fr;
    }

    .newsletter-form {
        flex-direction: column;
    }

        .newsletter-form input {
            border-radius: 30px;
            margin-bottom: 10px;
        }

        .newsletter-form button {
            border-radius: 30px;
            padding: 15px;
        }

    .top-menu li {
        margin-left: 15px;
    }

        .top-menu li a {
            font-size: 1.1rem;
        }
}

@media (max-width: 576px) {
    .header-content {
        flex-wrap: wrap;
    }

    .logo {
        font-size: 1.5rem;
    }

    .top-menu {
        margin-top: 10px;
        width: 100%;
        justify-content: flex-end;
    }

        .top-menu li:first-child {
            margin-left: 0;
        }
}


/* ===== CATEGORY DROPDOWN STYLES ===== */
/* Add these styles to your existing CSS */

/* Main navigation dropdown */
#nav-menu .dropdown {
    position: relative;
}

#nav-menu .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 250px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    list-style: none;
    padding: 10px 0;
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    /* Ensure items display in column */
    display: block !important;
}

    /* Force category items to display in column */
    #nav-menu .dropdown-menu li {
        margin: 0;
        width: 100%;
        display: block !important;
        float: none !important;
    }

        #nav-menu .dropdown-menu li a {
            color: var(--dark);
            font-size: 0.9rem;
            padding: 10px 20px;
            display: block !important;
            width: 100%;
            transition: all 0.3s;
            text-decoration: none;
            border-left: 3px solid transparent;
            /* Ensure proper block display */
            float: none !important;
            clear: both !important;
        }

            #nav-menu .dropdown-menu li a:hover {
                background: var(--light);
                color: var(--primary);
                border-left-color: var(--accent);
                padding-left: 25px;
            }

#nav-menu .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Chevron icon for category dropdown */
#nav-menu .dropdown > a .fas.fa-chevron-down {
    font-size: 0.8rem;
    margin-left: 5px;
    transition: transform 0.3s;
}

#nav-menu .dropdown:hover > a .fas.fa-chevron-down {
    transform: rotate(180deg);
}

/* Mobile responsive for category dropdown */
@media (max-width: 992px) {
    #nav-menu .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: transparent;
        padding-left: 20px;
        max-height: none;
        overflow-y: visible;
    }

        #nav-menu .dropdown-menu li a {
            color: white;
            padding: 8px 0;
            border-left: none;
        }

            #nav-menu .dropdown-menu li a:hover {
                background: transparent;
                color: var(--accent);
                padding-left: 10px;
            }

    #nav-menu .dropdown > a .fas.fa-chevron-down {
        display: none;
    }
}

/* Scrollbar for dropdown */
#nav-menu .dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

#nav-menu .dropdown-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

#nav-menu .dropdown-menu::-webkit-scrollbar-thumb {
    background: var(--secondary);
    border-radius: 3px;
}

    #nav-menu .dropdown-menu::-webkit-scrollbar-thumb:hover {
        background: var(--primary);
    }

/* Reset any flex/grid that might be causing row layout */
#nav-menu .dropdown-menu,
#nav-menu .dropdown-menu * {
    display: block !important;
    flex: none !important;
    grid: none !important;
}


.customer-profile-page {
    background: #e8f5e9;
    min-height: 100vh;
    padding-bottom: 50px;
}

    /* Theme scoped only inside profile page */
    .customer-profile-page .profile-card {
        border-radius: 12px;
        background: #ffffff;
        border: none;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    }

    .customer-profile-page .profile-title {
        color: #2e7d32;
        font-weight: 700;
    }

    .customer-profile-page .form-label {
        font-weight: 600;
        color: #2e7d32;
    }

    .customer-profile-page .form-control {
        border-radius: 8px;
        border: 1px solid #c8e6c9;
        padding: 10px;
        transition: 0.3s;
    }

        .customer-profile-page .form-control:focus {
            border-color: #2e7d32;
            box-shadow: 0 0 6px rgba(46,125,50,0.4);
        }

    .customer-profile-page .update-btn {
        background: linear-gradient(135deg, #43a047, #2e7d32);
        border: none;
        border-radius: 28px;
        padding: 10px 40px;
        color: white;
        font-weight: 600;
        transition: 0.3s;
    }

        .customer-profile-page .update-btn:hover {
            transform: translateY(-2px);
            background: linear-gradient(135deg, #2e7d32, #1b5e20);
        }

/* ===== CONTACT PAGE STYLES ===== */
.contact-page {
    background: #f9f9f9;
    min-height: 100vh;
    padding: 40px 0;
}

.contact-header {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    padding: 40px 0;
    text-align: center;
    margin-bottom: 40px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

    .contact-header h1 {
        font-size: 2.5rem;
        margin-bottom: 15px;
    }

    .contact-header p {
        font-size: 1.1rem;
        max-width: 700px;
        margin: 0 auto;
        opacity: 0.9;
    }

.contact-main {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px;
}

.contact-info-section {
    flex: 1;
    min-width: 300px;
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

    .contact-info-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(to right, var(--secondary), var(--primary));
    }

    .contact-info-section h2 {
        color: var(--primary);
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 2px solid var(--light);
        font-size: 1.8rem;
    }

.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    transition: transform 0.3s ease;
}

    .contact-item:hover {
        transform: translateX(5px);
    }

.contact-icon {
    background: var(--light);
    color: var(--primary);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    font-size: 1.2rem;
}

.contact-details h3 {
    margin-bottom: 5px;
    color: var(--dark);
    font-size: 1.2rem;
}

.contact-details p {
    color: var(--gray);
}

.feedback-section {
    flex: 1;
    min-width: 300px;
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

    .feedback-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(to right, var(--primary), var(--secondary));
    }

    .feedback-section h2 {
        color: var(--primary);
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 2px solid var(--light);
        font-size: 1.8rem;
    }

.form-group {
    margin-bottom: 25px;
    position: relative;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--dark);
    font-size: 1rem;
}

.form-input, .form-textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: var(--light);
}

    .form-input:focus, .form-textarea:focus {
        border-color: var(--secondary);
        outline: none;
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
        background-color: white;
    }

.form-textarea {
    min-height: 150px;
    resize: vertical;
}

.submit-button {
    background: linear-gradient(to right, var(--primary), var(--secondary));
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

    .submit-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        background: linear-gradient(to right, var(--dark), var(--primary));
    }

    .submit-button i {
        margin-right: 10px;
    }

.map-section {
    margin-top: 40px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    height: 400px;
    background: var(--light);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.map-placeholder {
    text-align: center;
    color: var(--primary);
}

    .map-placeholder i {
        font-size: 3rem;
        margin-bottom: 15px;
    }

    .map-placeholder h3 {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

/* Animation for form submission */
@keyframes submitSuccess {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.submit-success {
    animation: submitSuccess 0.5s ease;
}

/* Responsive styles for contact page */
@media (max-width: 768px) {
    .contact-header h1 {
        font-size: 2rem;
    }

    .contact-main {
        flex-direction: column;
    }

    .contact-info-section, .feedback-section {
        padding: 30px;
    }
}


.map-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    flex-wrap: nowrap;
}

.map-placeholder, .map-frame {
    flex: 1;
}

.map-placeholder {
    text-align: center;
    padding: 30px;
    background: #f5faf5;
    border-radius: 10px;
    border: 1px solid #d8e9d8;
    min-height: 300px;
}

    .map-placeholder i {
        font-size: 45px;
        color: #2d7a2d;
        margin-bottom: 10px;
    }

/* Make responsive on small screens */
@media (max-width: 768px) {
    .map-row {
        flex-direction: column;
    }
}