<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Euro Goods Food Inc">
    <meta name="keywords" content="Euro Goods Food Inc">
    <meta name="author" content="Euro Goods Food Inc">
    <link rel="icon" href="https://cdn-vt-fvbqb6a7exc6b2g9.z03.azurefd.net/img/local/logos/29/07189bb3-24a7-4114-aa1e-8f32e8634b05.jpg" type="image/x-icon">
    
    
            
    <title>Euro Goods Food Inc</title>
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Euro Goods Food Inc" />
    <meta property="og:description" content="Euro Goods Food Inc" />
    <meta property="og:url" content="https://eurogoodsfood.com/" />
    <meta property="og:site_name" content="Euro Goods Food Inc" />
    <meta property="og:image" content="https://cdn-vt-fvbqb6a7exc6b2g9.z03.azurefd.net/img/local/logos/29/07189bb3-24a7-4114-aa1e-8f32e8634b05.jpg" />
    <meta property="og:image:alt" content="Euro Goods Food Inc logo" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Euro Goods Food Inc" />
    <meta name="twitter:description" content="Euro Goods Food Inc" />
    <meta name="twitter:image" content="https://cdn-vt-fvbqb6a7exc6b2g9.z03.azurefd.net/img/local/logos/29/07189bb3-24a7-4114-aa1e-8f32e8634b05.jpg" />
    <meta name="theme-color" content="#ffffff" />
    <link rel="icon" type="image/png" href="https://cdn-vt-fvbqb6a7exc6b2g9.z03.azurefd.net/img/local/logos/29/07189bb3-24a7-4114-aa1e-8f32e8634b05.jpg">
    <link rel="apple-touch-icon" href="https://cdn-vt-fvbqb6a7exc6b2g9.z03.azurefd.net/img/local/logos/29/07189bb3-24a7-4114-aa1e-8f32e8634b05.jpg">
    <link rel="manifest" href="https://eurogoodsfood.com/manifest.webmanifest">
    <link rel="shortcut icon" href="https://cdn-vt-fvbqb6a7exc6b2g9.z03.azurefd.net/img/local/logos/29/07189bb3-24a7-4114-aa1e-8f32e8634b05.jpg">
    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "Organization",
            "name": "Euro Goods Food Inc",
            "url": "https://eurogoodsfood.com/",
            "logo": "https://cdn-vt-fvbqb6a7exc6b2g9.z03.azurefd.net/img/local/logos/29/07189bb3-24a7-4114-aa1e-8f32e8634b05.jpg"
        }
    </script>

    <!-- Google font -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

    <!-- bootstrap css -->
    <link id="rtl-link" rel="stylesheet" type="text/css" href="https://eurogoodsfood.com/assets/css/vendors/bootstrap.css">

    <!-- Magnific popup -->
    <link href="https://eurogoodsfood.com/assets/js/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css">

    <!-- wow css -->
    <link rel="stylesheet" href="https://eurogoodsfood.com/assets/css/animate.min.css" />


    <!-- font-awesome css -->
    <link rel="stylesheet" type="text/css" href="https://eurogoodsfood.com/assets/css/vendors/font-awesome.css">

    <!-- feather icon css -->
    <link rel="stylesheet" type="text/css" href="https://eurogoodsfood.com/assets/css/vendors/feather-icon.css">

    <!-- slick css -->
    <link rel="stylesheet" type="text/css" href="https://eurogoodsfood.com/assets/css/vendors/slick/slick.css">
    <link rel="stylesheet" type="text/css" href="https://eurogoodsfood.com/assets/css/vendors/slick/slick-theme.css">

    <!-- Iconly css -->
    <link rel="stylesheet" type="text/css" href="https://eurogoodsfood.com/assets/css/bulk-style.css">

    <link href="https://eurogoodsfood.com/plugins/sweet-alert2/sweetalert2.css" rel="stylesheet" type="text/css">

    <!-- Template css -->
    <link id="color-link" rel="stylesheet" type="text/css" href="https://eurogoodsfood.com/assets/css/style.php">

    <!-- VT custom styles (shared: shop, orders, filters, etc.) -->
    <link rel="stylesheet" type="text/css" href="https://eurogoodsfood.com/assets/css/vt-style.css">

            <link rel="stylesheet" type="text/css" href="https://eurogoodsfood.com/assets/css/theme2/theme2.css">
        <link id="color-link" rel="stylesheet" type="text/css" href="https://eurogoodsfood.com/assets/css/theme2/products.php">
    
    <style>
        .uom-checkbox {
            position: sticky;
            z-index: 0;
        }

        .section-b-space {
            padding-top: calc(4px + (40 - 30) * ((100vw - 320px) / (1920 - 320))) !important;
        }

        .image-container {
            position: relative;
            display: inline-block;
        }

        .sale-tag {
            position: absolute;
            top: 0px;
            left: -30px;
            width: 35px !important;
            height: auto !important;
        }

        .fixed-min-width {
            min-width: 520px;
        }

        /* VT Department Bar Slider */

        @media (max-width: 768px) {
            .dept-slider {
                padding: 0 35px;
            }

            .dept-slider-arrow {
                width: 35px;
                height: 35px;
                font-size: 12px;
            }

            .fixed-min-width {
                min-width: 350px;
            }
        }
    </style>
</head>

<body class="theme__color">

    <!-- Loader Start -->
    <div class="fullpage-loader">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <!-- Loader End -->

    <script src="https://eurogoodsfood.com/assets/js/jquery-3.6.0.min.js"></script>

<script type="text/javascript">
    !(function (cfg) { function e() { cfg.onInit && cfg.onInit(n) } var x, w, D, t, E, n, C = window, O = document, b = C.location, q = "script", I = "ingestionendpoint", L = "disableExceptionTracking", j = "ai.device."; "instrumentationKey"[x = "toLowerCase"](), w = "crossOrigin", D = "POST", t = "appInsightsSDK", E = cfg.name || "appInsights", (cfg.name || C[t]) && (C[t] = E), n = C[E] || function (g) { var f = !1, m = !1, h = { initialize: !0, queue: [], sv: "8", version: 2, config: g }; function v(e, t) { var n = {}, i = "Browser"; function a(e) { e = "" + e; return 1 === e.length ? "0" + e : e } return n[j + "id"] = i[x](), n[j + "type"] = i, n["ai.operation.name"] = b && b.pathname || "_unknown_", n["ai.internal.sdkVersion"] = "javascript:snippet_" + (h.sv || h.version), { time: (i = new Date).getUTCFullYear() + "-" + a(1 + i.getUTCMonth()) + "-" + a(i.getUTCDate()) + "T" + a(i.getUTCHours()) + ":" + a(i.getUTCMinutes()) + ":" + a(i.getUTCSeconds()) + "." + (i.getUTCMilliseconds() / 1e3).toFixed(3).slice(2, 5) + "Z", iKey: e, name: "Microsoft.ApplicationInsights." + e.replace(/-/g, "") + "." + t, sampleRate: 100, tags: n, data: { baseData: { ver: 2 } }, ver: undefined, seq: "1", aiDataContract: undefined } } var n, i, t, a, y = -1, T = 0, S = ["js.monitor.azure.com", "js.cdn.applicationinsights.io", "js.cdn.monitor.azure.com", "js0.cdn.applicationinsights.io", "js0.cdn.monitor.azure.com", "js2.cdn.applicationinsights.io", "js2.cdn.monitor.azure.com", "az416426.vo.msecnd.net"], o = g.url || cfg.src, r = function () { return s(o, null) }; function s(d, t) { if ((n = navigator) && (~(n = (n.userAgent || "").toLowerCase()).indexOf("msie") || ~n.indexOf("trident/")) && ~d.indexOf("ai.3") && (d = d.replace(/(\/)(ai\.3\.)([^\d]*)$/, function (e, t, n) { return t + "ai.2" + n })), !1 !== cfg.cr) for (var e = 0; e < S.length; e++)if (0 < d.indexOf(S[e])) { y = e; break } var n, i = function (e) { var a, t, n, i, o, r, s, c, u, l; h.queue = [], m || (0 <= y && T + 1 < S.length ? (a = (y + T + 1) % S.length, p(d.replace(/^(.*\/\/)([\w\.]*)(\/.*)$/, function (e, t, n, i) { return t + S[a] + i })), T += 1) : (f = m = !0, s = d, !0 !== cfg.dle && (c = (t = function () { var e, t = {}, n = g.connectionString; if (n) for (var i = n.split(";"), a = 0; a < i.length; a++) { var o = i[a].split("="); 2 === o.length && (t[o[0][x]()] = o[1]) } return t[I] || (e = (n = t.endpointsuffix) ? t.location : null, t[I] = "https://" + (e ? e + "." : "") + "dc." + (n || "services.visualstudio.com")), t }()).instrumentationkey || g.instrumentationKey || "", t = (t = (t = t[I]) && "/" === t.slice(-1) ? t.slice(0, -1) : t) ? t + "/v2/track" : g.endpointUrl, t = g.userOverrideEndpointUrl || t, (n = []).push((i = "SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details)", o = s, u = t, (l = (r = v(c, "Exception")).data).baseType = "ExceptionData", l.baseData.exceptions = [{ typeName: "SDKLoadFailed", message: i.replace(/\./g, "-"), hasFullStack: !1, stack: i + "\nSnippet failed to load [" + o + "] -- Telemetry is disabled\nHelp Link: https://go.microsoft.com/fwlink/?linkid=2128109\nHost: " + (b && b.pathname || "_unknown_") + "\nEndpoint: " + u, parsedStack: [] }], r)), n.push((l = s, i = t, (u = (o = v(c, "Message")).data).baseType = "MessageData", (r = u.baseData).message = 'AI (Internal): 99 message:"' + ("SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details) (" + l + ")").replace(/\"/g, "") + '"', r.properties = { endpoint: i }, o)), s = n, c = t, JSON && ((u = C.fetch) && !cfg.useXhr ? u(c, { method: D, body: JSON.stringify(s), mode: "cors" }) : XMLHttpRequest && ((l = new XMLHttpRequest).open(D, c), l.setRequestHeader("Content-type", "application/json"), l.send(JSON.stringify(s))))))) }, a = function (e, t) { m || setTimeout(function () { !t && h.core || i() }, 500), f = !1 }, p = function (e) { var n = O.createElement(q), e = (n.src = e, t && (n.integrity = t), n.setAttribute("data-ai-name", E), cfg[w]); return !e && "" !== e || "undefined" == n[w] || (n[w] = e), n.onload = a, n.onerror = i, n.onreadystatechange = function (e, t) { "loaded" !== n.readyState && "complete" !== n.readyState || a(0, t) }, cfg.ld && cfg.ld < 0 ? O.getElementsByTagName("head")[0].appendChild(n) : setTimeout(function () { O.getElementsByTagName(q)[0].parentNode.appendChild(n) }, cfg.ld || 0), n }; p(d) } cfg.sri && (n = o.match(/^((http[s]?:\/\/.*\/)\w+(\.\d+){1,5})\.(([\w]+\.){0,2}js)$/)) && 6 === n.length ? (d = "".concat(n[1], ".integrity.json"), i = "@".concat(n[4]), l = window.fetch, t = function (e) { if (!e.ext || !e.ext[i] || !e.ext[i].file) throw Error("Error Loading JSON response"); var t = e.ext[i].integrity || null; s(o = n[2] + e.ext[i].file, t) }, l && !cfg.useXhr ? l(d, { method: "GET", mode: "cors" }).then(function (e) { return e.json()["catch"](function () { return {} }) }).then(t)["catch"](r) : XMLHttpRequest && ((a = new XMLHttpRequest).open("GET", d), a.onreadystatechange = function () { if (a.readyState === XMLHttpRequest.DONE) if (200 === a.status) try { t(JSON.parse(a.responseText)) } catch (e) { r() } else r() }, a.send())) : o && r(); try { h.cookie = O.cookie } catch (k) { } function e(e) { for (; e.length;)!function (t) { h[t] = function () { var e = arguments; f || h.queue.push(function () { h[t].apply(h, e) }) } }(e.pop()) } var c, u, l = "track", d = "TrackPage", p = "TrackEvent", l = (e([l + "Event", l + "PageView", l + "Exception", l + "Trace", l + "DependencyData", l + "Metric", l + "PageViewPerformance", "start" + d, "stop" + d, "start" + p, "stop" + p, "addTelemetryInitializer", "setAuthenticatedUserContext", "clearAuthenticatedUserContext", "flush"]), h.SeverityLevel = { Verbose: 0, Information: 1, Warning: 2, Error: 3, Critical: 4 }, (g.extensionConfig || {}).ApplicationInsightsAnalytics || {}); return !0 !== g[L] && !0 !== l[L] && (e(["_" + (c = "onerror")]), u = C[c], C[c] = function (e, t, n, i, a) { var o = u && u(e, t, n, i, a); return !0 !== o && h["_" + c]({ message: e, url: t, lineNumber: n, columnNumber: i, error: a, evt: C.event }), o }, g.autoExceptionInstrumented = !0), h }(cfg.cfg), (C[E] = n).queue && 0 === n.queue.length ? (n.queue.push(e), n.trackPageView({})) : e(); })({
        src: "https://js.monitor.azure.com/scripts/b/ai.3.gbl.min.js",
        crossOrigin: "anonymous",
        cfg: {
            connectionString: "InstrumentationKey=a7f45017-5b62-4d81-802f-620f72ac9a1d;IngestionEndpoint=https://eastus-8.in.applicationinsights.azure.com/;LiveEndpoint=https://eastus.livediagnostics.monitor.azure.com/;ApplicationId=31042f26-f1d8-4a81-a23e-0a3fd580bf2b"
        }
    });
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-BZ76CEQFV6"></script>
<script>
        window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-BZ76CEQFV6'
    );
</script>
<script>
    appInsights.addTelemetryInitializer((envelope) => {
        if (envelope.baseType === "ExceptionData") {
            const data = envelope.baseData;
            const userId = '-1';
            data.properties = {
                ...data.properties,
                userId: userId,
                platform: 'Customer-Website'
            };
        }
    });
</script>

<!-- Quick View Modal CSS -->
<link rel="stylesheet" type="text/css" href="https://eurogoodsfood.com/assets/css/quick-view-modal.css">

<!-- Auth Modals CSS -->
<link rel="stylesheet" type="text/css" href="https://eurogoodsfood.com/assets/css/auth-modals.css">
<link rel="stylesheet" type="text/css" href="https://eurogoodsfood.com/assets/css/header.css">

<!-- Override header.css sticky positioning for theme 2 fixed layout -->
<style>
    body:not(.shopBody) .t2-header.vt-header-wrap,
    body.shopBody .t2-header.vt-header-wrap {
        position: fixed;
        top: 0;
        background: rgba(255,255,255,.92);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--t2-gray-200);
        padding: 0;
        box-shadow: none;
    }
    body:not(.shopBody) .t2-dept-bar.vt-dept-nav,
    body.shopBody .t2-dept-bar.vt-dept-nav {
        position: fixed;
        top: 72px;
    }
    /* Hide theme-1 header styles that leak through (.vt-header applies padding/shadow) */
    .t2-header.vt-header-wrap .vt-header-inner { display: none; }
</style>

<!-- Theme 2 Header -->
<header class="t2-header vt-header-wrap" id="mainHeader">
    <div class="t2-header-inner">
        <!-- Logo -->
        <div class="t2-logo">
            <a href="https://eurogoodsfood.com/">
                <img src="https://cdn-vt-fvbqb6a7exc6b2g9.z03.azurefd.net/img/local/logos/29/07189bb3-24a7-4114-aa1e-8f32e8634b05.jpg" alt="Logo">
            </a>
        </div>

        <!-- Center Navigation -->
        <nav class="t2-nav">
            <a class="t2-nav-link home-menu" href="#home">Home</a>
            <a class="t2-nav-link shop-menu" href="#shop">Shop</a>
                        <a class="t2-nav-link contactUs-menu" href="https://eurogoodsfood.com/ContactUs">Contact</a>
        </nav>

        <!-- Right Actions -->
        <div class="t2-actions">
            <!-- Search Toggle -->
            <div class="t2-search-wrap vt-search collapsed" id="enhanced-search">
                <button class="t2-action-btn" id="search-trigger" aria-label="Search">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                </button>
                <div class="vt-search-container">
                    <div class="vt-search-wrapper">
                        <input type="search" class="vt-search-input" id="live-search-input" placeholder="Search products..." autocomplete="off">
                        <div class="vt-search-loading" id="search-loading"></div>
                        <button class="vt-search-close" id="search-close">
                            <i class="fa-solid fa-times"></i>
                        </button>
                        <div class="vt-search-results" id="search-results"></div>
                    </div>
                </div>
            </div>
            <div class="vt-search-overlay" id="search-overlay"></div>

            <!-- Account -->
            <div class="t2-account-wrap">
                <button class="t2-action-btn" aria-label="Account">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    <span class="t2-account-name"></span>
                </button>
                <div class="t2-dropdown">
                                            <a href="javascript:void(0)" class="loginBtnFromList" data-bs-toggle="modal" data-bs-target="#login-modal">Log In</a>
                                                <a href="javascript:void(0)" class="forgotPasswordFromList">Forgot Password</a>
                                    </div>
            </div>

            <!-- Cart (hidden) -->
            <button class="t2-action-btn header-wishlist" type="button" data-bs-toggle="offcanvas" data-bs-target="#sideCart" style="display: none;" aria-label="Cart">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
                <span class="t2-cart-badge sticky__items__count">0</span>
            </button>

            <!-- Mobile Menu Toggle -->
            <button class="t2-mobile-toggle navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#primaryMenu" aria-label="Menu">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
            </button>
        </div>
    </div>
</header>

<!-- Department Navigation -->
<nav class="t2-dept-bar vt-dept-nav" id="deptNavBar">
    <div class="t2-dept-inner vt-dept-nav-inner">
        <div class="vt-dept-slider-wrapper">
        <button class="t2-dept-arrow t2-dept-arrow-left vt-dept-arrow vt-dept-arrow-left" id="deptArrowLeft" type="button">
            <i class="fa-solid fa-chevron-left"></i>
        </button>

        <div class="t2-dept-track vt-dept-slider" id="deptSlider">
                        <div class="t2-dept-item vt-dept-item" data-dept-id="-1">
                <a href="javascript:void(0)"
                   class="t2-dept-link vt-dept-link shop-menu dept-nav-trigger"
                   data-deptname="All"
                   data-deptid="-1"
                   data-slug="all">
                    <span>All</span>
                                    </a>

                            </div>
                        <div class="t2-dept-item vt-dept-item" data-dept-id="1329">
                <a href="javascript:void(0)"
                   class="t2-dept-link vt-dept-link shop-menu dept-nav-trigger"
                   data-deptname="Natural Fruit"
                   data-deptid="1329"
                   data-slug="natural-fruit">
                    <span>Natural Fruit</span>
                                    </a>

                            </div>
                        <div class="t2-dept-item vt-dept-item" data-dept-id="1328">
                <a href="javascript:void(0)"
                   class="t2-dept-link vt-dept-link shop-menu dept-nav-trigger"
                   data-deptname="Sprinkles Chips"
                   data-deptid="1328"
                   data-slug="sprinkles-chips">
                    <span>Sprinkles Chips</span>
                                    </a>

                            </div>
                        <div class="t2-dept-item vt-dept-item" data-dept-id="972">
                <a href="javascript:void(0)"
                   class="t2-dept-link vt-dept-link shop-menu dept-nav-trigger"
                   data-deptname="Unused"
                   data-deptid="972"
                   data-slug="unused">
                    <span>Unused</span>
                                    </a>

                            </div>
                        <div class="t2-dept-item vt-dept-item has-sub" data-dept-id="381">
                <a href="javascript:void(0)"
                   class="t2-dept-link vt-dept-link shop-menu dept-nav-trigger"
                   data-deptname="Undefined"
                   data-deptid="381"
                   data-slug="undefined">
                    <span>Other</span>
                                        <i class="fa-solid fa-chevron-down t2-dept-chevron"></i>
                                    </a>

                                <div class="vt-subdept-panel">
                    <div class="vt-subdept-list">
                        <a href="javascript:void(0)"
                           class="vt-subdept-item subDepts shop-menu"
                           id="-1"
                           data-subdeptname="All"
                           data-deptname="Other"
                           data-department="381">
                            All Other                        </a>
                                                <a href="javascript:void(0)"
                           class="vt-subdept-item subDepts shop-menu"
                           id="22"
                           data-subdeptname="Undefined"
                           data-deptname="Other"
                           data-department="381">
                            Undefined                        </a>
                                            </div>
                </div>
                            </div>
                        <div class="t2-dept-item vt-dept-item" data-dept-id="53">
                <a href="javascript:void(0)"
                   class="t2-dept-link vt-dept-link shop-menu dept-nav-trigger"
                   data-deptname="No Label"
                   data-deptid="53"
                   data-slug="no-label">
                    <span>No Label</span>
                                    </a>

                            </div>
                        <div class="t2-dept-item vt-dept-item" data-dept-id="1330">
                <a href="javascript:void(0)"
                   class="t2-dept-link vt-dept-link shop-menu dept-nav-trigger"
                   data-deptname="Seeds Nuts"
                   data-deptid="1330"
                   data-slug="seeds-nuts">
                    <span>Seeds Nuts</span>
                                    </a>

                            </div>
                    </div>

        <button class="t2-dept-arrow t2-dept-arrow-right vt-dept-arrow vt-dept-arrow-right" id="deptArrowRight" type="button">
            <i class="fa-solid fa-chevron-right"></i>
        </button>
        </div><!-- end vt-dept-slider-wrapper -->
    </div>
</nav>
<div id="deptNavSpacer"></div>

<script>
    // Enhanced Search Functionality
    $(document).ready(function () {
        const $searchContainer = $('#enhanced-search');
        const $searchTrigger = $('#search-trigger');
        const $searchClose = $('#search-close');
        const $searchInput = $('#live-search-input');
        const $searchResults = $('#search-results');
        const $searchOverlay = $('#search-overlay');
        const $searchLoading = $('#search-loading');
        let searchTimeout;

        // Open search
        $searchTrigger.on('click', function (e) {
            e.stopPropagation();
            $searchContainer.removeClass('collapsed').addClass('expanded');
            $searchOverlay.addClass('show');
            setTimeout(() => {
                $searchInput.focus();
            }, 300);
        });

        // Close search
        function closeSearch() {
            $searchContainer.removeClass('expanded').addClass('collapsed');
            $searchOverlay.removeClass('show');
            $searchResults.removeClass('show').html('');
            $searchInput.val('');
            $searchLoading.removeClass('show');
        }

        $searchClose.on('click', closeSearch);
        $searchOverlay.on('click', closeSearch);

        // Close on escape key
        $(document).on('keydown', function (e) {
            if (e.key === 'Escape' && $searchContainer.hasClass('expanded')) {
                closeSearch();
            }
        });

        // Live search functionality
        $searchInput.on('input', function () {
            const searchTerm = $(this).val().trim();

            clearTimeout(searchTimeout);
            $searchLoading.removeClass('show');

            if (searchTerm.length < 2) {
                $searchResults.removeClass('show').html('');
                return;
            }

            // Show loading indicator
            $searchLoading.addClass('show');

            searchTimeout = setTimeout(() => {
                performLiveSearch(searchTerm);
            }, 400);
        });

        function performLiveSearch(searchTerm) {
            $.ajax({
                url: 'https://eurogoodsfood.com/Shop/liveSearch',
                type: 'POST',
                data: { searchStr: searchTerm },
                dataType: 'json',
                beforeSend: function () {
                    $searchLoading.addClass('show');
                },
                success: function (results) {
                    const eventName = results.length > 0 ? 'search' : 'search_no_results';
                    trackEvent(eventName, {
                        search_term: searchTerm
                    });
                    $searchLoading.removeClass('show');
                    displaySearchResults(results);
                },
                error: function () {
                    $searchLoading.removeClass('show');
                    $searchResults.html(`
                    <div class="vt-search-no-results">
                        <div class="vt-search-no-results-icon">⚠️</div>
                        <div class="vt-search-no-results-text">Error loading results</div>
                        <div class="vt-search-no-results-subtext">Please try again</div>
                    </div>
                `).addClass('show');
                }
            });
        }

        function displaySearchResults(results) {
            if (!results || results.length === 0) {
                $searchResults.html(`
                <div class="vt-search-no-results">
                    <div class="vt-search-no-results-icon">🔍</div>
                    <div class="vt-search-no-results-text">No products found</div>
                    <div class="vt-search-no-results-subtext">Try searching with different keywords</div>
                </div>
            `).addClass('show');
                return;
            }

            let html = '<div class="vt-search-results-header">Search Results</div>';
            html += '<div class="vt-search-results-grid">';

            const logo = localStorage.getItem('logo');
            const showPrices = localStorage.getItem('ShowPrices');
            const showStock = '0';

            results.slice(0, 4).forEach(item => {
                let stockBadge = '';
                if (showStock == 1) {
                    const isOutOfStock = Number(item.OnHand) <= 0;
                    stockBadge = `<div class="vt-search-stock-badge ${isOutOfStock ? 'out-of-stock' : 'in-stock'}">${getStockText(item)}</div>`;
                }

                // Use default image if no image provided
                const imageUrl = item.Image || logo;

                let priceHtml = '';
                if (showPrices == 1) {
                   priceHtml = `<span class="vt-search-result-price">$${item.Price}</span>
                                <span class="vt-search-result-unit">${item.Unit}</span>`
                }

                // Store item data as JSON for add to cart functionality
                const itemDataAttr = encodeURIComponent(JSON.stringify({
                    ItemID: item.ItemID,
                    Name: item.Name,
                    ItemCode: item.ItemCode,
                    CasePrice: item.CasePrice || item.Price,
                    PcPrice: item.PcPrice || item.Price,
                    CaseQty: item.CaseQty || 1,
                    Image: imageUrl,
                    PicturePath: imageUrl,
                    HasTax: item.HasTax || 0,
                    HasDeposit: item.HasDeposit || 0,
                    MinIncrementQty: item.MinIncrementQty || 1,
                    DepartmentID: item.DepartmentID || 0,
                    SubDeptID: item.SubDeptID || 0
                }));

                html += `
                <div class="vt-search-result-card" data-item-id="${item.ItemID}" data-item-info="${itemDataAttr}">
                    <div class="vt-search-result-image-wrapper">
                        <img src="${imageUrl}" alt="${item.Name}" class="vt-search-result-image" onerror="this.classList.add('placeholder'); this.src='https://eurogoodsfood.com/assets/images/default.png';">
                        ${stockBadge}
                    </div>
                    <div class="vt-search-result-content">
                        <h3 class="vt-search-result-name">${item.Name}</h3>
                        <p class="vt-search-result-code">${item.ItemCode}</p>
                        <div class="vt-search-result-footer">
                            <div>
                                ${priceHtml}
                            </div>
                            <button class="vt-search-add-cart" data-item-id="${item.ItemID}" title="Add to Cart">
                                <i class="fa-solid fa-cart-plus"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `;
            });

            html += '</div>';
            $searchResults.html(html).addClass('show');

            // Handle click on search result card (opens product detail)
            $('.vt-search-result-card').on('click', function (e) {
                // Don't open if clicking on add to cart button
                if ($(e.target).closest('.vt-search-add-cart').length) {
                    return;
                }
                e.preventDefault();
                const itemId = $(this).data('item-id');
                openProductInNewTab(itemId);
            });

            // Handle click on Add to Cart button
            $('.vt-search-add-cart').on('click', function (e) {
                e.preventDefault();
                e.stopPropagation();
                
                const $card = $(this).closest('.vt-search-result-card');
                const itemDataStr = decodeURIComponent($card.data('item-info'));
                const itemData = JSON.parse(itemDataStr);
                
                // Use the reusable function from common.js
                addItemToCartByData(itemData);
                
                // Visual feedback
                const $btn = $(this);
                $btn.addClass('added');
                $btn.html('<i class="fa-solid fa-check"></i>');
                
                setTimeout(() => {
                    $btn.removeClass('added');
                    $btn.html('<i class="fa-solid fa-cart-plus"></i>');
                }, 1500);
            });
        }

        function openProductInNewTab(itemId) {
            const productUrl = `https://eurogoodsfood.com/item?itemId=${itemId}`;
            window.open(productUrl, '_blank');
            closeSearch();
        }

        function openProductDetail(itemId) {
            const $product = $(`[data-id="${itemId}"]`).first();
            if ($product.length) {
                if ($product.find('.quick-view-popup-custom').length) {
                    $product.find('.quick-view-popup-custom').click();
                } else if ($product.find('.quick-view-popup').length) {
                    $product.find('.quick-view-popup').click();
                } else {
                    $product.click();
                }
            } else {
                alertify('info', 'Please navigate to shop to view this product');
            }
        }

        // Update department nav sticky position
        function updateDeptNavPosition() {
            const $header = $('.vt-header-wrap');
            const $deptNav = $('.vt-dept-nav');
            
            if ($header.length && $deptNav.length) {
                const headerHeight = $header.outerHeight();
                $deptNav.css('top', headerHeight + 'px');
            }
        }
        
        // ============================================
        // DEPARTMENT SLIDER - TRANSFORM-BASED SCROLLING
        // ============================================
        const $sliderWrapper = $('.vt-dept-slider-wrapper');
        const $slider = $('#deptSlider');
        const $arrowLeft = $('#deptArrowLeft');
        const $arrowRight = $('#deptArrowRight');
        const SCROLL_AMOUNT = 200;
        let currentOffset = 0;
        
        function getMaxOffset() {
            if (!$slider.length || !$sliderWrapper.length) return 0;
            const sliderWidth = $slider[0].scrollWidth;
            const wrapperWidth = $sliderWrapper.width();
            return Math.max(0, sliderWidth - wrapperWidth);
        }
        
        function updateArrows() {
            if (!$slider.length) return;
            
            const maxOffset = getMaxOffset();
            
            if (currentOffset > 5) {
                $arrowLeft.addClass('show');
            } else {
                $arrowLeft.removeClass('show');
            }
            
            if (currentOffset < maxOffset - 5) {
                $arrowRight.addClass('show');
            } else {
                $arrowRight.removeClass('show');
            }
        }
        
        function scrollTo(offset) {
            const maxOffset = getMaxOffset();
            currentOffset = Math.max(0, Math.min(offset, maxOffset));
            $slider.css('transform', 'translateX(' + (-currentOffset) + 'px)');
            updateArrows();
        }
        
        $arrowLeft.on('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            scrollTo(currentOffset - SCROLL_AMOUNT);
        });
        
        $arrowRight.on('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            scrollTo(currentOffset + SCROLL_AMOUNT);
        });
        
        $sliderWrapper.on('wheel', function(e) {
            if (Math.abs(e.originalEvent.deltaX) > Math.abs(e.originalEvent.deltaY)) {
                e.preventDefault();
                scrollTo(currentOffset + e.originalEvent.deltaX);
            }
        });
        
        setTimeout(updateArrows, 100);
        
        // ============================================
        // SUBDEPARTMENT DROPDOWN - HOVER HANDLING
        // ============================================
        let hoverTimeout = null;
        
        $(document).on('mouseenter', '.vt-dept-item.has-sub', function() {
            clearTimeout(hoverTimeout);
            const $item = $(this);
            $('.vt-dept-item').not($item).removeClass('is-open');
            $item.addClass('is-open');
        });
        
        $(document).on('mouseleave', '.vt-dept-item.has-sub', function() {
            const $item = $(this);
            hoverTimeout = setTimeout(function() {
                $item.removeClass('is-open');
            }, 150);
        });
        
        $(document).on('mouseenter', '.vt-subdept-panel', function() {
            clearTimeout(hoverTimeout);
        });
        
        $(document).on('mouseleave', '.vt-subdept-panel', function() {
            const $item = $(this).closest('.vt-dept-item');
            hoverTimeout = setTimeout(function() {
                $item.removeClass('is-open');
            }, 150);
        });

        $(window).on('resize', function() {
            updateDeptNavPosition();
            updateArrows();
        });

        $('.home-menu, .shop-menu, .orders-menu').on('click', function () {
            setTimeout(updateArrows, 200);
        });
        
        $(document).on('click', '.dept-nav-trigger', function(e) {
            $('.vt-dept-link').removeClass('active');
            $(this).addClass('active');
        });
        
        $(document).on('click', '.vt-subdept-item', function(e) {
            const $parentItem = $(this).closest('.vt-dept-item');
            $('.vt-dept-link').removeClass('active');
            $parentItem.find('.vt-dept-link').addClass('active');
            $parentItem.removeClass('is-open');
        });
    });
</script>
<div class="mobile-menu d-md-none d-block mobile-cart">
    <ul>
        <li class="mobile__menu__list__items" id="homeMenuBtn">
            <a href="#home" class="home-menu">
                <i class="iconly-Home icli"></i>
                <span>Home</span>
            </a>
        </li>
        <li class="mobile__menu__list__items" id="shopMenuBtn">
            <a href="#shop" class="shop-menu homeMobile">
                <i class="iconly-Bag-2 icli"></i>
                <span>Shop</span>
            </a>
        </li>
        <li class="mobile__menu__list__items mobile-category">
            <a href="javascript:void(0)">
                <i class="iconly-Category icli js-link"></i>
                <span>Categories</span>
            </a>
        </li>
                <li class="mobile__menu__list__items" id="cartOpen" data-bs-toggle="offcanvas" data-bs-target="#sideCart" aria-controls="offcanvasRight">
            <a href="javascript:void(0)" class="cartMobile close-button">
                <i class="iconly-Buy icli fly-cate"></i>
                <span>Cart</span>
            </a>
        </li>
    </ul>
</div>
    
<div class="homeBody">

    <!-- ===== HERO: Split-screen with parallax image + kinetic text ===== -->
        <section class="t2-hero">
        <div class="t2-hero-split">
            <div class="t2-hero-left">
                <div class="t2-hero-left-inner" data-t2-reveal>
                    <div class="t2-hero-eyebrow">
                        <span class="t2-eyebrow-line"></span>
                        <span class="t2-eyebrow-text">Euro Goods Food Inc</span>
                    </div>
                    <h1 class="t2-hero-title" data-t2-split>Euro Goods Food Inc</h1>
                                            <p class="t2-hero-desc">Experience the finest, hand-selected ingredients from around the globe. Shop with us for unparalleled quality and taste in every bite.</p>
                                        <div class="t2-hero-actions">
                        <button class="t2-btn t2-btn-primary shop-menu">
                            <span>Shop Collection</span>
                            <span class="t2-btn-arrow">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
                            </span>
                        </button>
                                            </div>
                    <div class="t2-hero-scroll-hint">
                        <div class="t2-scroll-mouse">
                            <div class="t2-scroll-wheel"></div>
                        </div>
                        <span>Scroll to explore</span>
                    </div>
                </div>
            </div>
            <div class="t2-hero-right">
                <div class="t2-hero-img-stack">
                                            <img src="https://storage.googleapis.com/vendtap.appspot.com/cust_web/5a7e6bc6-7fbb-41e6-8bcc-0d53fe6f32f5.jpg" class="t2-hero-img active" alt="">
                                        <div class="t2-hero-img-frame"></div>
                </div>
                <!-- Floating badge -->
                <div class="t2-hero-float-badge" data-t2-float>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                    <span>Trusted Store</span>
                </div>
            </div>
        </div>
    </section>
    
    <!-- ===== MARQUEE TICKER (replaces trust bar) ===== -->
    <section class="t2-marquee">
        <div class="t2-marquee-track">
            <div class="t2-marquee-content">
                <span class="t2-marquee-item"><i>&#x2605;</i> Free Shipping on Qualifying Orders</span>
                <span class="t2-marquee-item"><i>&#x2605;</i> Secure Checkout &mdash; 100% Protected</span>
                <span class="t2-marquee-item"><i>&#x2605;</i> Fast & Reliable Delivery</span>
                <span class="t2-marquee-item"><i>&#x2605;</i> Premium Curated Quality</span>
                <span class="t2-marquee-item"><i>&#x2605;</i> Free Shipping on Qualifying Orders</span>
                <span class="t2-marquee-item"><i>&#x2605;</i> Secure Checkout &mdash; 100% Protected</span>
                <span class="t2-marquee-item"><i>&#x2605;</i> Fast & Reliable Delivery</span>
                <span class="t2-marquee-item"><i>&#x2605;</i> Premium Curated Quality</span>
            </div>
        </div>
    </section>

    <!-- ===== COLLECTIONS: Bento asymmetric grid with tilt ===== -->
        <section class="t2-collections" data-t2-stagger>
        <div class="container">
            <div class="t2-section-header t2-section-header--left" data-t2-reveal>
                <span class="t2-section-number">01</span>
                <h2>Collections</h2>
                <p>Curated selections for every occasion</p>
            </div>
            <div class="t2-bento-grid">
                                <a href="javascript:void(0)" class="t2-bento-card t2-bento-card--1 shop-menu homeDepartments" data-deptname="Natural Fruit" id="dept_cat_1329" data-t2-tilt>
                    <div class="t2-bento-img">
                        <img src="https://cdn-vt-fvbqb6a7exc6b2g9.z03.azurefd.net/img/local/logos/29/07189bb3-24a7-4114-aa1e-8f32e8634b05.jpg"
                             onerror="this.src='https://eurogoodsfood.com/assets/images/default.png';"
                             alt="Natural Fruit">
                    </div>
                    <div class="t2-bento-overlay"></div>
                    <div class="t2-bento-content">
                        <span class="t2-bento-count">102 products</span>
                        <h3>Natural Fruit</h3>
                        <span class="t2-bento-cta">
                            Explore Collection
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
                        </span>
                    </div>
                </a>
                                <a href="javascript:void(0)" class="t2-bento-card t2-bento-card--2 shop-menu homeDepartments" data-deptname="Sprinkles Chips" id="dept_cat_1328" data-t2-tilt>
                    <div class="t2-bento-img">
                        <img src="https://cdn-vt-fvbqb6a7exc6b2g9.z03.azurefd.net/img/local/logos/29/07189bb3-24a7-4114-aa1e-8f32e8634b05.jpg"
                             onerror="this.src='https://eurogoodsfood.com/assets/images/default.png';"
                             alt="Sprinkles Chips">
                    </div>
                    <div class="t2-bento-overlay"></div>
                    <div class="t2-bento-content">
                        <span class="t2-bento-count">78 products</span>
                        <h3>Sprinkles Chips</h3>
                        <span class="t2-bento-cta">
                            Explore Collection
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
                        </span>
                    </div>
                </a>
                                <a href="javascript:void(0)" class="t2-bento-card t2-bento-card--3 shop-menu homeDepartments" data-deptname="Unused" id="dept_cat_972" data-t2-tilt>
                    <div class="t2-bento-img">
                        <img src="https://cdn-vt-fvbqb6a7exc6b2g9.z03.azurefd.net/img/local/logos/29/07189bb3-24a7-4114-aa1e-8f32e8634b05.jpg"
                             onerror="this.src='https://eurogoodsfood.com/assets/images/default.png';"
                             alt="Unused">
                    </div>
                    <div class="t2-bento-overlay"></div>
                    <div class="t2-bento-content">
                        <span class="t2-bento-count">1 products</span>
                        <h3>Unused</h3>
                        <span class="t2-bento-cta">
                            Explore Collection
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
                        </span>
                    </div>
                </a>
                            </div>
        </div>
    </section>
    
    <!-- ===== CATEGORIES: Horizontal scroll cards ===== -->
    
    <!-- ===== DESCRIPTION / ABOUT: Full-width cinematic panel ===== -->
    
    <!-- ===== GALLERY: Masonry with stagger reveal ===== -->
    
    <!-- ===== FEATURED PRODUCTS: Showcase carousel ===== -->
    
    <!-- Why Choose Us Section -->
    <section class="why-choose-section section-gradient-bg">
        <div class="container">
            <div class="section-title wow fadeInUp">
                <h2>Why Choose Us</h2>
                <p>Discover what makes us special</p>
            </div>
            <div class="why-choose-grid">
                <div class="why-choose-item wow fadeInUp" data-wow-delay="0.1s">
                    <i class="fa-solid fa-award"></i>
                    <h4>Premium Quality</h4>
                    <p>Carefully curated products that meet the highest standards</p>
                </div>
                <div class="why-choose-item wow fadeInUp" data-wow-delay="0.2s">
                    <i class="fa-solid fa-truck-fast"></i>
                    <h4>Fast Delivery</h4>
                    <p>Quick and reliable shipping to get your orders to you on time</p>
                </div>
                <div class="why-choose-item wow fadeInUp" data-wow-delay="0.3s">
                    <i class="fa-solid fa-headset"></i>
                    <h4>Expert Support</h4>
                    <p>Our team is here to help you find exactly what you need</p>
                </div>
                <div class="why-choose-item wow fadeInUp" data-wow-delay="0.4s">
                    <i class="fa-solid fa-lock"></i>
                    <h4>Secure Shopping</h4>
                    <p>Shop with confidence knowing your data is protected</p>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== TESTIMONIALS: Large single-quote spotlight ===== -->
    
    <!-- ===== CTA: Animated gradient banner ===== -->
    <section class="t2-cta">
        <div class="container">
            <div class="t2-cta-inner">
                <div class="t2-cta-bg-orbs">
                    <div class="t2-orb t2-orb--1"></div>
                    <div class="t2-orb t2-orb--2"></div>
                    <div class="t2-orb t2-orb--3"></div>
                </div>
                <div class="t2-cta-content">
                    <h2>Ready to explore?</h2>
                    <p>Browse our full catalog of quality products</p>
                    <button class="t2-btn t2-btn-white shop-menu">
                        <span>Start Shopping</span>
                        <span class="t2-btn-arrow">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </section>
</div>

<!-- Theme 2 scroll-reveal & interactions -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Intersection Observer for reveal animations
    const revealEls = document.querySelectorAll('[data-t2-reveal]');
    const staggerEls = document.querySelectorAll('[data-t2-stagger]');

    const revealObs = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                entry.target.classList.add('t2-visible');
                revealObs.unobserve(entry.target);
            }
        });
    }, { threshold: 0.15, rootMargin: '0px 0px -60px 0px' });

    revealEls.forEach(function(el) { revealObs.observe(el); });
    staggerEls.forEach(function(el) { revealObs.observe(el); });

    // Subtle tilt on bento cards (mouse only, no mobile)
    if (window.matchMedia('(pointer: fine)').matches) {
        document.querySelectorAll('[data-t2-tilt]').forEach(function(card) {
            card.addEventListener('mousemove', function(e) {
                var rect = card.getBoundingClientRect();
                var x = (e.clientX - rect.left) / rect.width - 0.5;
                var y = (e.clientY - rect.top) / rect.height - 0.5;
                card.style.transform = 'perspective(800px) rotateY(' + (x * 6) + 'deg) rotateX(' + (y * -6) + 'deg) scale(1.02)';
            });
            card.addEventListener('mouseleave', function() {
                card.style.transform = '';
            });
        });
    }

    // Hero image slideshow
    var heroImgs = document.querySelectorAll('.t2-hero-img');
    if (heroImgs.length > 1) {
        var currentImg = 0;
        setInterval(function() {
            heroImgs[currentImg].classList.remove('active');
            currentImg = (currentImg + 1) % heroImgs.length;
            heroImgs[currentImg].classList.add('active');
        }, 5000);
    }

    // Horizontal scroll drag for categories
    var hscroll = document.querySelector('.t2-hscroll-track');
    if (hscroll) {
        var isDown = false, startX, scrollLeft;
        hscroll.addEventListener('mousedown', function(e) {
            isDown = true; hscroll.classList.add('t2-grabbing');
            startX = e.pageX - hscroll.offsetLeft;
            scrollLeft = hscroll.scrollLeft;
        });
        hscroll.addEventListener('mouseleave', function() { isDown = false; hscroll.classList.remove('t2-grabbing'); });
        hscroll.addEventListener('mouseup', function() { isDown = false; hscroll.classList.remove('t2-grabbing'); });
        hscroll.addEventListener('mousemove', function(e) {
            if (!isDown) return;
            e.preventDefault();
            var x = e.pageX - hscroll.offsetLeft;
            hscroll.scrollLeft = scrollLeft - (x - startX) * 1.5;
        });
    }
});
</script>

    <div class="shopBody d-none">
        
        <!-- Shop Filter Sidebar -->
        <div class="shop-filter-sidebar" id="shopFilterSidebar">
            <div class="filter-sidebar-header">
                <h3><i class="fa-solid fa-sliders"></i> Filters</h3>
                <button class="filter-close-btn" id="closeFilterSidebar">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>

            <div class="filter-sidebar-content">
                <!-- Active Filters Summary -->
                <div class="active-filters-summary d-none" id="shopActiveFiltersSummary">
                    <div class="active-filters-header">
                        <span><i class="fa-solid fa-check-circle"></i> Active Filters</span>
                        <button class="btn-clear-all-filters" id="clearAllShopFilters">Clear All</button>
                    </div>
                    <div class="active-filters-list" id="shopActiveFiltersList"></div>
                </div>

                <!-- Departments with Nested Sub-Departments Filter -->
                <div class="filter-section">
                    <div class="filter-section-header" data-toggle="departments">
                        <h4><i class="fa-solid fa-layer-group"></i> Departments</h4>
                        <i class="fa-solid fa-chevron-down toggle-icon"></i>
                    </div>
                    <div class="filter-section-body" id="filterDepartments">
                        <div class="filter-search-mini">
                            <i class="fa-solid fa-search"></i>
                            <input type="text" placeholder="Search departments..." id="searchDepartments">
                        </div>
                        <div class="filter-options-list" id="departmentsList">
                                                                                                <div class="filter-dept-group" data-name="natural fruit">
                                        <div class="filter-dept-header">
                                            <label class="filter-checkbox-item">
                                                <input type="checkbox" class="dept-filter-checkbox" value="1329" data-name="Natural Fruit">
                                                <span class="checkmark"></span>
                                                <span class="filter-label">Natural Fruit</span>
                                                <span class="filter-count">102</span>
                                            </label>
                                                                                    </div>
                                                                            </div>
                                                                    <div class="filter-dept-group" data-name="sprinkles chips">
                                        <div class="filter-dept-header">
                                            <label class="filter-checkbox-item">
                                                <input type="checkbox" class="dept-filter-checkbox" value="1328" data-name="Sprinkles Chips">
                                                <span class="checkmark"></span>
                                                <span class="filter-label">Sprinkles Chips</span>
                                                <span class="filter-count">78</span>
                                            </label>
                                                                                    </div>
                                                                            </div>
                                                                    <div class="filter-dept-group" data-name="unused">
                                        <div class="filter-dept-header">
                                            <label class="filter-checkbox-item">
                                                <input type="checkbox" class="dept-filter-checkbox" value="972" data-name="Unused">
                                                <span class="checkmark"></span>
                                                <span class="filter-label">Unused</span>
                                                <span class="filter-count">1</span>
                                            </label>
                                                                                    </div>
                                                                            </div>
                                                                    <div class="filter-dept-group" data-name="undefined">
                                        <div class="filter-dept-header">
                                            <label class="filter-checkbox-item">
                                                <input type="checkbox" class="dept-filter-checkbox" value="381" data-name="Undefined">
                                                <span class="checkmark"></span>
                                                <span class="filter-label">Other</span>
                                                <span class="filter-count">89</span>
                                            </label>
                                                                                            <button class="dept-expand-btn" type="button" data-dept-id="381">
                                                    <i class="fa-solid fa-chevron-down"></i>
                                                </button>
                                                                                    </div>
                                                                                    <div class="filter-subdept-list collapsed" data-dept-id="381">
                                                                                                    <label class="filter-checkbox-item filter-subdept-item" data-name="undefined">
                                                        <input type="checkbox" class="subdept-filter-checkbox" value="22" data-dept="381" data-name="Undefined">
                                                        <span class="checkmark"></span>
                                                        <span class="filter-label">Undefined</span>
                                                    </label>
                                                                                            </div>
                                                                            </div>
                                                                    <div class="filter-dept-group" data-name="no label">
                                        <div class="filter-dept-header">
                                            <label class="filter-checkbox-item">
                                                <input type="checkbox" class="dept-filter-checkbox" value="53" data-name="No Label">
                                                <span class="checkmark"></span>
                                                <span class="filter-label">No Label</span>
                                                <span class="filter-count">7</span>
                                            </label>
                                                                                    </div>
                                                                            </div>
                                                                    <div class="filter-dept-group" data-name="seeds nuts">
                                        <div class="filter-dept-header">
                                            <label class="filter-checkbox-item">
                                                <input type="checkbox" class="dept-filter-checkbox" value="1330" data-name="Seeds Nuts">
                                                <span class="checkmark"></span>
                                                <span class="filter-label">Seeds Nuts</span>
                                                <span class="filter-count">26</span>
                                            </label>
                                                                                    </div>
                                                                            </div>
                                                                                    </div>
                    </div>
                </div>

                
                <!-- Purchase History Filter -->
                
                <!-- Stock Status Filter -->
                <div class="filter-section">
                    <div class="filter-section-header" data-toggle="stock">
                        <h4><i class="fa-solid fa-boxes-stacked"></i> Stock Status</h4>
                        <i class="fa-solid fa-chevron-down toggle-icon"></i>
                    </div>
                    <div class="filter-section-body" id="filterStock">
                        <div class="filter-options-list">
                            <label class="filter-checkbox-item">
                                <input type="checkbox" class="stock-filter-checkbox" value="in-stock">
                                <span class="checkmark"></span>
                                <span class="filter-label">In Stock</span>
                                <span class="stock-indicator in-stock"></span>
                            </label>
                            <label class="filter-checkbox-item">
                                <input type="checkbox" class="stock-filter-checkbox" value="out-of-stock">
                                <span class="checkmark"></span>
                                <span class="filter-label">Out of Stock</span>
                                <span class="stock-indicator out-of-stock"></span>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- Special Offers Filter -->
                <!-- <div class="filter-section">
                    <div class="filter-section-header" data-toggle="offers">
                        <h4><i class="fa-solid fa-tags"></i> Special Offers</h4>
                        <i class="fa-solid fa-chevron-down toggle-icon"></i>
                    </div>
                    <div class="filter-section-body" id="filterOffers">
                        <div class="filter-options-list">
                            <label class="filter-checkbox-item special-offer">
                                <input type="checkbox" class="offer-filter-checkbox" value="on-sale">
                                <span class="checkmark"></span>
                                <span class="filter-label"><i class="fa-solid fa-fire text-danger"></i> On Sale</span>
                            </label>
                            <label class="filter-checkbox-item special-offer">
                                <input type="checkbox" class="offer-filter-checkbox" value="new-arrival">
                                <span class="checkmark"></span>
                                <span class="filter-label"><i class="fa-solid fa-sparkles text-warning"></i> New Arrivals</span>
                            </label>
                            <label class="filter-checkbox-item special-offer">
                                <input type="checkbox" class="offer-filter-checkbox" value="bestseller">
                                <span class="checkmark"></span>
                                <span class="filter-label"><i class="fa-solid fa-trophy text-success"></i> Bestsellers</span>
                            </label>
                            <label class="filter-checkbox-item special-offer">
                                <input type="checkbox" class="offer-filter-checkbox" value="clearance">
                                <span class="checkmark"></span>
                                <span class="filter-label"><i class="fa-solid fa-percent text-info"></i> Clearance</span>
                            </label>
                        </div>
                    </div>
                </div> -->

                
                <!-- Sort By -->
                <div class="filter-section">
                    <div class="filter-section-header" data-toggle="sort">
                        <h4><i class="fa-solid fa-arrow-up-wide-short"></i> Sort By</h4>
                        <i class="fa-solid fa-chevron-down toggle-icon"></i>
                    </div>
                    <div class="filter-section-body" id="filterSort">
                        <div class="sort-options">
                            <label class="sort-radio-item">
                                <input type="radio" name="sortOption" value="default" checked>
                                <span class="radio-mark"></span>
                                <span class="sort-label">Default</span>
                            </label>
                            <label class="sort-radio-item">
                                <input type="radio" name="sortOption" value="name-asc">
                                <span class="radio-mark"></span>
                                <span class="sort-label">Name: A to Z</span>
                            </label>
                            <label class="sort-radio-item">
                                <input type="radio" name="sortOption" value="name-desc">
                                <span class="radio-mark"></span>
                                <span class="sort-label">Name: Z to A</span>
                            </label>
                                                    </div>
                    </div>
                </div>
            </div>

            <div class="filter-sidebar-footer">
                <button class="btn-reset-filters" id="resetShopFilters">
                    <i class="fa-solid fa-rotate-left"></i> Reset
                </button>
                <button class="btn-apply-shop-filters" id="applyShopFilters">
                    <i class="fa-solid fa-check"></i> Apply Filters
                </button>
            </div>
        </div>

        <!-- Filter Overlay -->
        <div class="shop-filter-overlay" id="shopFilterOverlay"></div>

        <div class="container">
            <div class="row w-75-100">
                <div class="col-md-12">
                                    </div>
            </div>
        </div>

        <!-- Shop Section Start -->
        <section class="section-b-space shop-section">
            <div class="container">
                <!-- Shop Toolbar -->
                <div class="shop-toolbar">
                    <div class="shop-toolbar-left">
                        <button class="btn-open-filters" id="openFilterSidebar">
                            <i class="fa-solid fa-sliders"></i>
                            <span>Filters</span>
                            <span class="filter-badge d-none" id="shopFilterBadge">0</span>
                        </button>
                        <div class="items-count">
                            <span id="shopItemsCount">0</span> products
                        </div>
                    </div>
                    <div class="shop-toolbar-center">
                        <div class="shop-search-wrapper">
                            <i class="fa-solid fa-search"></i>
                            <input type="search" class="shop-search-input product__search" placeholder="Search products...">
                            <button class="shop-search-clear" id="clearProductSearch" style="display: none;">
                                <i class="fa-solid fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <div class="shop-toolbar-right">
                        <div class="dropdown">
                            <button class="btn-sort-dropdown" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fa-solid fa-sort"></i>
                                <span>Sort</span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end" id="sortList" aria-labelledby="dropdownMenuButton1">
                                <li>
                                    <a class="dropdown-item" id="categoriesOption" data-sortby="-1" data-sortorder="-1" href="javascript:void(0)">Categories</a>
                                </li>
                                                                <li>
                                    <a class="dropdown-item" data-sortby="Name" data-sortorder="Asc" href="javascript:void(0)">A - Z Description</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" data-sortby="Name" data-sortorder="Desc" href="javascript:void(0)">Z - A Description</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" data-sortby="Department" data-sortorder="Asc" href="javascript:void(0)">Department</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" data-sortby="ItemCode" data-sortorder="Asc" href="javascript:void(0)">A - Z Item Code</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" data-sortby="ItemCode" data-sortorder="Desc" href="javascript:void(0)">Z - A Item Code</a>
                                </li>
                            </ul>
                        </div>
                        <div class="vt-dept-controls">
                            <button id="printCatalog" class="btn-catalog" type="button">
                                <i class="fa-solid fa-file-pdf"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="row w-75-100">
                    <div class="col-xxl-12 col-lg-12 wow fadeInUp shop-content-area" id="shopContentArea">
                        <div class="special-slider-container" id="specialSliderContainer" style="display:none;">
                            <div class="special-section-card">
                                <div class="special-slider-header d-flex justify-content-between align-items-center mb-3">
                                    <h2 class="mb-0 special-title fw-bold">🔥 Today's Special Deals</h2>
                                    <div class="special-slider-actions">
                                        <button type="button" id="specialPrev" class="special-nav-btn">
                                            <i class="fa-solid fa-chevron-left"></i>
                                        </button>
                                        <button type="button" id="specialNext" class="special-nav-btn">
                                            <i class="fa-solid fa-chevron-right"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="special-slider-wrapper">
                                    <div class="special-slider" id="specialSlider"></div>
                                </div>
                            </div>

                        </div>

                        <div class="text-navigation flex-shrink-0 pb-2"></div>

                        <!-- Normal Items -->
                        <div class="row g-sm-4 g-3 row-cols-xxl-4 row-cols-xl-4 row-cols-lg-4 row-cols-md-3 row-cols-2 product-list-section" id="items__row">
                        </div>
                    </div>
                    <div class="text-center pt-4 mt-4">
                        <span class="loader d-none"></span>
                    </div>
                </div>

            </div>
        </section>

        <!-- shop page includes -->
        <div class="modal fade theme-modal modern-quick-view-modal" id="view" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
    <!-- Navigation Arrow Left -->
    <button class="quick-view-nav-arrow quick-view-nav-prev" id="quickViewPrev" type="button" title="Previous Item">
        <i class="fa-solid fa-chevron-left"></i>
    </button>
    
    <div class="modal-dialog modal-dialog-centered modal-xl modal-fullscreen-sm-down">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="row g-4">
                    <div class="col-lg-6">
                        <div class="quick-view-image-section">
                            <img src="https://cdn-vt-fvbqb6a7exc6b2g9.z03.azurefd.net/img/local/logos/29/07189bb3-24a7-4114-aa1e-8f32e8634b05.jpg" class="blur-up lazyload detail__img" alt="">
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="quick-view-info">
                            <h2 class="quick-view-title detail__name"></h2>
                            
                            <div class="quick-view-price-container">
                                <div class="quick-view-price detail__price"></div>
                                                            </div>

                            <div class="quick-view-details-section">
                                <h3 class="quick-view-details-title">Product Details</h3>
                                
                                                                    <div class="quick-view-detail-item">
                                        <span class="quick-view-detail-label">Item Code</span>
                                        <span class="quick-view-detail-value detail__itemcode"></span>
                                    </div>
                                                                
                                                                    <div class="quick-view-detail-item">
                                        <span class="quick-view-detail-label">Pieces in a Case</span>
                                        <span class="quick-view-detail-value detail__caseqty"></span>
                                    </div>
                                                                
                                                                    <div class="quick-view-detail-item">
                                        <span class="quick-view-detail-label">Manufacturer Code</span>
                                        <span class="quick-view-detail-value detail__manufacturercode"></span>
                                    </div>
                                                                
                                                                    <div class="quick-view-detail-item">
                                        <span class="quick-view-detail-label">UPC</span>
                                        <span class="quick-view-detail-value detail__upc"></span>
                                    </div>
                                                                
                                                                    <div class="quick-view-detail-item">
                                        <span class="quick-view-detail-label">Brand</span>
                                        <span class="quick-view-detail-value detail__brand"></span>
                                    </div>
                                                                
                                                                    <div class="quick-view-detail-item">
                                        <span class="quick-view-detail-label">Department</span>
                                        <span class="quick-view-detail-value detail__department"></span>
                                    </div>
                                                                
                                                                    <div class="quick-view-detail-item">
                                        <span class="quick-view-detail-label">Sub Department</span>
                                        <span class="quick-view-detail-value detail__subdepartment"></span>
                                    </div>
                                    <input class="uomTypeModal" type="hidden"/>
                                                                
                                                            </div>

                            <div class="quick-view-actions">
                                <button class="modern-quick-add-btn addCartQuickViewBtn">
                                    <i class="fa-solid fa-cart-shopping"></i>
                                    <span>Add To Cart</span>
                                </button>
                                <button class="modern-quick-view-btn view-more-btn">
                                    <i class="fa-solid fa-eye"></i>
                                    <span>View Details</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Navigation Arrow Right -->
    <button class="quick-view-nav-arrow quick-view-nav-next" id="quickViewNext" type="button" title="Next Item">
        <i class="fa-solid fa-chevron-right"></i>
    </button>
    
    <!-- Item counter indicator -->
    <div class="quick-view-counter" id="quickViewCounter">
        <span id="quickViewCurrentIndex">1</span> / <span id="quickViewTotalItems">1</span>
    </div>
</div>

<script>
    // Quick View Navigation State
    let quickViewItems = [];
    let currentQuickViewIndex = 0;
    
    // Function to collect all visible items from the shop page
    function collectVisibleItems() {
        quickViewItems = [];
        $('#items__row .product-box-3').each(function() {
            quickViewItems.push($(this));
        });
        return quickViewItems;
    }
    
    // Function to update counter display
    function updateQuickViewCounter() {
        $('#quickViewCurrentIndex').text(currentQuickViewIndex + 1);
        $('#quickViewTotalItems').text(quickViewItems.length);
        
        // Show/hide arrows based on position
        if (quickViewItems.length <= 1) {
            $('#quickViewPrev, #quickViewNext').addClass('disabled');
        } else {
            // Enable/disable prev arrow
            if (currentQuickViewIndex === 0) {
                $('#quickViewPrev').addClass('disabled');
            } else {
                $('#quickViewPrev').removeClass('disabled');
            }
            
            // Enable/disable next arrow
            if (currentQuickViewIndex === quickViewItems.length - 1) {
                $('#quickViewNext').addClass('disabled');
            } else {
                $('#quickViewNext').removeClass('disabled');
            }
        }
    }
    
    // Function to display item in quick view
    function displayQuickViewItem(element) {
        const baseURL = localStorage.getItem('baseURL');
        const showStock = '0';
        const showPrices = localStorage.getItem('ShowPrices');
        const uomType = allowUOM === 'any' ? element.find(".cs-pc-checkbox").val() : allowUOM;
        viewDetailsUrl = `${baseURL}item?itemId=${element.data('itemid')}`;
        elementGlobal = element;
        
        var item = {
            ItemId: element.data('itemid'),
            Name: element.data('name'),
            UOM: element.data('uom'),
            ItemCode: element.data('itemcode'),
            CaseQty: element.data('caseqty'),
            UPC: element.data('upc'),
            CasePrice: element.data('caseprice'),
            PcPrice: element.data('pcprice'),
            OnHand: element.data('onhand'),
            ManufacturerCode: element.data('manufacturercode'),
            NetWt: element.data('netwt'),
            Brand: element.data('brand'),
            Department: element.data('dept'),
            SubDepartment: element.data('subdept'),
            PicturePath: element.data('img'),
            HasTax: element.data('hastax'),
            HasDeposit: element.data('hasdeposit'),
            MinIncrementQty: element.data('minincrementqty'),
            DepartmentID: element.data('departmentid'),
            SubDeptID: element.data('subdeptid'),
        };

        trackEvent('view_item', {
            items: [item],
            value: item.UOM == 1 ? item.CasePrice : item.PcPrice,
        });
        
        if (showStock == 1) {
            const isOutOfStock = Number(item.OnHand) <= 0;
            const stockText = `<div class="quick-view-stock ${isOutOfStock ? 'out-of-stock' : 'in-stock'}">
                    <i class="fa-solid fa-${isOutOfStock ? 'circle-xmark' : 'circle-check'}"></i>
                    <span>${getStockText(item)}</span>
                </div>`;
            $(".detail__onhand").html(stockText);
        }
        
        const price = showPrices == 0 ? '' : '$'+item.CasePrice.toFixed(2);
        const logo = 'https://cdn-vt-fvbqb6a7exc6b2g9.z03.azurefd.net/img/local/logos/29/07189bb3-24a7-4114-aa1e-8f32e8634b05.jpg';
        $(".detail__img").attr('src', (item.PicturePath == "" || item.PicturePath == null) ? logo : item.PicturePath);
        $(".detail__name").html(item.Name);
        $(".detail__price").html(`${price}<span class="uom-badge">${item.UOM == 1 ? 'cs' : 'pc'}</span>`);
        $('.addCartQuickViewBtn').attr('id', item.MinIncrementQty);
        $(".detail__itemcode").html(item.ItemCode);
        $(".detail__caseqty").html(item.CaseQty);
        $(".detail__manufacturercode").html(item.ManufacturerCode);
        $(".detail__upc").html(item.UPC);
        $(".detail__brand").html(item.Brand);
        $(".detail__department").html(item.Department);
        $(".detail__subdepartment").html(item.SubDepartment);
        $(".detail__netWt").html(item.NetWt);
        $(".uomTypeModal").val(uomType);
        
        // Add slide animation
        $('.modal-body').addClass('slide-transition');
        setTimeout(() => {
            $('.modal-body').removeClass('slide-transition');
        }, 300);
        
        updateQuickViewCounter();
    }
    
    // Navigate to previous item
    function navigateToPrevItem() {
        if (quickViewItems.length <= 1 || currentQuickViewIndex === 0) return;
        currentQuickViewIndex--;
        displayQuickViewItem(quickViewItems[currentQuickViewIndex]);
    }
    
    // Navigate to next item
    function navigateToNextItem() {
        if (quickViewItems.length <= 1 || currentQuickViewIndex === quickViewItems.length - 1) return;
        currentQuickViewIndex++;
        displayQuickViewItem(quickViewItems[currentQuickViewIndex]);
    }
    
    // Event handler for clicking view item
    $(document).on('click','.view__item', function() {
        // Collect all visible items
        collectVisibleItems();
        
        // Find the index of clicked item
        const clickedElement = $(this).closest('.product-box-3');
        const clickedItemId = clickedElement.data('itemid');
        
        currentQuickViewIndex = quickViewItems.findIndex(el => el.data('itemid') === clickedItemId);
        if (currentQuickViewIndex === -1) currentQuickViewIndex = 0;
        
        // Display the item
        displayQuickViewItem(clickedElement);
    });
    
    // Navigation arrow click handlers
    $('#quickViewPrev').on('click', function(e) {
        e.stopPropagation();
        navigateToPrevItem();
    });
    
    $('#quickViewNext').on('click', function(e) {
        e.stopPropagation();
        navigateToNextItem();
    });
    
    // Keyboard navigation
    $(document).on('keydown', function(e) {
        if (!$('#view').hasClass('show')) return;
        
        if (e.key === 'ArrowLeft') {
            e.preventDefault();
            navigateToPrevItem();
        } else if (e.key === 'ArrowRight') {
            e.preventDefault();
            navigateToNextItem();
        }
    });

    function getStockText(item) {
        const stockDisplayUOM = '-1';

        if (item.OnHand <= 0) {
            return 'Out of Stock';
        }

        if (stockDisplayUOM == 1) {
            return `Stock: ${Number(item.OnHand).toFixed(0)} Cases`;
        } else if (stockDisplayUOM == 0) {
            return `Stock: ${(item.OnHand * item.CaseQty).toFixed(0)} Pieces`;
        } else {
            return 'In Stock';
        }
    }
</script>

        <div class="cart-fab d-none d-md-flex">
    <button class="btn cart-toggle-btn shadow-lg" type="button" data-bs-toggle="offcanvas" data-bs-target="#desktopCartDrawer" aria-controls="desktopCartDrawer">
        <span class="cart-toggle-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" color="#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
        </span>
        <span class="fw-semibold text-white">View Cart</span>
        <span class="badge rounded-pill bg-danger text-white sticky__items__count">0</span>
    </button>
</div>

<div class="offcanvas offcanvas-end cart-drawer" tabindex="-1" id="desktopCartDrawer" aria-labelledby="desktopCartDrawerLabel">
    <div class="cart-header">
        <div class="d-flex justify-content-between align-items-center">
            <h5 class="visually-hidden" id="desktopCartDrawerLabel">Shopping Cart</h5>
            <div class="d-flex align-items-center gap-3">
                <span class="cart-header-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" color="#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
                </span>
                <div>
                    <p class="mb-0 text-white-50 small">Your cart</p>
                    <h4 class="cart__header__cases text-white mb-0">0.00 cases</h4>
                </div>
            </div>
            <div class="d-flex align-items-center gap-3">
                <i class="fa fa-trash fa-lg empty-cart text-white" title="Empty Cart" style="cursor: pointer;"></i>
                <button type="button" class="btn btn-sm btn-light text-dark cart-close-btn" data-bs-dismiss="offcanvas" aria-label="Close">
                    <i class="fa fa-times"></i>
                </button>
            </div>
        </div>
    </div>
    <div class="offcanvas-body cart-body shp__cart__wrap"></div>
    <div class="cart-footer">
        <div class="card m-0 border-0">
            <div class="card-body">
                <div class="totalWithTaxSection">
                    <div class="row">
                        <div class="col text-left">Sub Total:</div>
                        <div class="col text-end cart__subtotal">$0.00</div>
                    </div>
                    <div class="row">
                        <div class="col text-left">Discount:</div>
                        <div class="col text-end cart__discount">$0.00</div>
                    </div>
                    <div class="row">
                        <div class="col text-left">Deposit:</div>
                        <div class="col text-end cart__deposit">$0.00</div>
                    </div>
                    <div class="row">
                        <div class="col text-left">Tax:</div>
                        <div class="col text-end cart__tax">$0.00</div>
                    </div>
                    <hr>
                    <div class="row total_section_cart pb-3">
                        <div class="col text-left"><h3>Total:</h3></div>
                        <div class="col text-end"><h3 class="totalWithTax">$0.00</h3></div>
                    </div>
                </div>
                <a href="javascript:void(0)" data-path="Checkout" class="btn btn-sm cart-button bg-success text-white checkoutBtn bottom-button w-100">Proceed to Checkout  <i class="fa-solid fa-arrow-right ms-2"></i></a>
            </div>
        </div>
    </div>
</div>

    </div>

    
    
    
<footer class="t2-footer">
    <div class="container">
        <div class="t2-footer-grid">
            <!-- Brand -->
            <div class="t2-footer-brand">
                <a href="https://eurogoodsfood.com/" class="t2-footer-logo">
                    <img src="https://cdn-vt-fvbqb6a7exc6b2g9.z03.azurefd.net/img/local/logos/29/07189bb3-24a7-4114-aa1e-8f32e8634b05.jpg"
                        alt="Euro Goods Food Inc">
                </a>
                <p class="t2-footer-desc">
                    Bringing the World's Flavors to Your Table<br>Experience the finest, hand-selected ingredients from around the globe. Shop with us for unparalleled quality and taste in every bite.                </p>
                <div class="t2-footer-social">
                    <a href="https://www.facebook.com" target="_blank" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                    <a href="https://www.instagram.com" target="_blank" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                    <a href="https://www.twitter.com" target="_blank" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                                    </div>
            </div>

            <!-- Links -->
            <div class="t2-footer-col">
                <h4>Quick Links</h4>
                <ul>
                    <li><a href="https://eurogoodsfood.com/">Home</a></li>
                    <li><a href="https://eurogoodsfood.com/Shop">Shop</a></li>
                                        <li><a href="https://eurogoodsfood.com/ContactUs">Contact Us</a></li>
                                    </ul>
            </div>

            <!-- Contact -->
            <div class="t2-footer-col">
                <h4>Contact</h4>
                <ul class="t2-footer-contact">
                                                                <li>
                            <i class="fa-solid fa-location-dot"></i>
                                                            <span>698 S 21st Street, Irvington, NJ 07111</span>
                                                    </li>
                                                                <li>
                            <i class="fa-solid fa-phone"></i>
                            <a href="tel:718-500-3876">718-500-3876</a>
                        </li>
                                                                <li>
                            <i class="fa-solid fa-envelope"></i>
                            <a href="mailto:eurogoodsinc@gmail.com                            ">eurogoodsinc@gmail.com                            </a>
                        </li>
                                    </ul>
            </div>

            <!-- Newsletter -->
            <div class="t2-footer-col">
                <h4>Stay Updated</h4>
                <p class="t2-footer-newsletter-text">Get notified about new arrivals and special offers.</p>
                <form class="t2-footer-newsletter" onsubmit="return false;">
                    <input type="email" placeholder="your@email.com" required>
                    <button type="submit">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <line x1="22" y1="2" x2="11" y2="13" />
                            <polygon points="22 2 15 22 11 13 2 9 22 2" />
                        </svg>
                    </button>
                </form>
            </div>
        </div>

        <div class="t2-footer-bottom">
            <span>&copy; 2026 Euro Goods Food Inc. All rights reserved.</span>
            <span>Powered by <a href="https://vendtap.net" target="_blank">Vendtap</a></span>
        </div>
    </div>
</footer>
    <div class="theme-option">
    <div class="back-to-top">
        <a id="back-to-top" href="#">
            <i class="fas fa-chevron-up"></i>
        </a>
    </div>
</div>
    <!-- Login Modal Start -->
<div class="modal fade theme-modal deal-modal" id="login-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" style="z-index: 1000;">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content w-100">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title w-100 titleModal" id="deal_today">Login</h5>
                    <p class="mt-1 text-content contentText">Login to your account</p>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <div class="modal-body LoginModalBody">
            </div>
        </div>
    </div>
</div>
<!-- Login Modal End -->
    <!-- Login Modal Start -->
<div class="modal fade theme-modal deal-modal" id="signup-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title w-100" id="deal_today">Sign Up</h5>
                    <p class="mt-1 text-content">Signup to create your account</p>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="log-in-section background-image-2 section-b-space">
                    <div class="row">
                        <div class="col-12">
                            <div class="log-in-box">
                                <div class="input-box">
                                    <form class="row g-4">
                                        <div class="col-12">
                                            <div class="form-floating theme-form-floating">
                                                <input type="text" class="form-control" id="reguser__fullname" placeholder="Full Name or Business Name">
                                                <label for="fullname">Full Name or Business Name</label>
                                                <span class="text-danger fulname__err d-none">Name is required</span>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-floating theme-form-floating">
                                                <input type="email" class="form-control" id="reguser__email" placeholder="Email Address">
                                                <label for="email">Email Address</label>
                                                <span class="text-danger email__err d-none">Email is required</span>
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <div class="form-floating theme-form-floating">
                                                <input type="password" class="form-control" id="reguser__password" placeholder="Password">
                                                <span class="password-toggle-icon" onclick="togglePasswordVisibility('signUp')"><i class="far fa-eye"></i></span>
                                                <label for="password">Password</label>
                                                <span class="text-danger password__err d-none">Password is required</span>
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <button id="Home" class="btn btn-animation w-100 justify-content-center btn__signup" type="button">Signup <img id="register_btn_loader" class="img-fluid loaderMargin d-none" src="https://eurogoodsfood.com/assets/images/loader-white.gif" height="20" width="20"></button>
                                        </div>
                                    </form>
                                </div>
                                <div class="other-log-in">
                                    <h6></h6>
                                </div>

                                <div class="sign-up-box">
                                    <h4>Already have an account?</h4>
                                    <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#login-modal">Log In</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Login Modal End -->

    <div class="modal fade theme-modal deal-modal" id="announcement_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" style="z-index: 2000;">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content fixed-min-width">
            <div class="modal-header">
                <h5 class="modal-title" id="titleAnnouncement">Announcement</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <div class="modal-body">
                <div>
                    <p class="mt-1 text-content" id="messageAnnouncement"></p>
                </div>
            </div>
        </div>
    </div>
</div>
    <script src="https://eurogoodsfood.com/assets/js/jquery-3.6.0.min.js"></script>

    <!-- jquery ui-->
    <script src="https://eurogoodsfood.com/assets/js/jquery-ui.min.js"></script>

    <!-- Bootstrap js-->
    <script src="https://eurogoodsfood.com/assets/js/bootstrap/bootstrap.bundle.min.js"></script>
    <script src="https://eurogoodsfood.com/assets/js/bootstrap/popper.min.js"></script>

    <!-- feather icon js-->
    <script src="https://eurogoodsfood.com/assets/js/feather/feather.min.js"></script>
    <script src="https://eurogoodsfood.com/assets/js/feather/feather-icon.js"></script>

    <!-- Lazyload Js -->
    <script src="https://eurogoodsfood.com/assets/js/lazysizes.min.js"></script>

    <!-- Slick js-->
    <script src="https://eurogoodsfood.com/assets/js/slick/slick.js"></script>
    <script src="https://eurogoodsfood.com/assets/js/bootstrap/bootstrap-notify.min.js"></script>
    <script src="https://eurogoodsfood.com/assets/js/slick/custom_slick.js"></script>

    <!-- Auto Height Js -->
    <script src="https://eurogoodsfood.com/assets/js/auto-height.js"></script>

    <script src="https://eurogoodsfood.com/plugins/sweet-alert2/sweetalert2.min.js"></script>

    <!-- WOW js -->
    <script src="https://eurogoodsfood.com/assets/js/wow.min.js"></script>
    <script src="https://eurogoodsfood.com/assets/js/custom-wow.js"></script>

    <!-- Magnific popup -->
    <script src="https://eurogoodsfood.com/assets/js/magnific-popup/jquery.magnific-popup.min.js"></script>
    <script src="https://eurogoodsfood.com/assets/js/magnific-popup/lightbox.js"></script>

    <!-- script js -->
    <script src="https://eurogoodsfood.com/assets/js/script.js"></script>
    <script src="https://eurogoodsfood.com/assets/js/common.js?version=1783649863?v=1783649863"></script>

    <script>
        const customerId = "";
        let ordersTable, orderDetailTable;
        let customCategoryFilters = [];
        const $deptNav = $('.vt-dept-nav');
        function showShopView() {
            trackPageView('Shop Page');
            $deptNav.removeClass('is-home-view is-orders-view').addClass('is-shop-view');
        }
        function showHomeView() {
            trackPageView('Home Page');
            $deptNav.removeClass('is-shop-view is-orders-view').addClass('is-home-view');
        }
        function showOrdersView() {
            trackPageView('Orders Page');
            $deptNav.removeClass('is-home-view is-shop-view').addClass('is-orders-view');
        }
        $('.home-menu').on('click', showHomeView);
        $('.shop-menu').on('click', showShopView);
        $('.orders-menu').on('click', showOrdersView);
        $(document).ready(function () {
            announceModal();
            let shopMenuClicked = false;
            $('#homeMenuBtn').addClass('active');
            $(".search-box").addClass('d-none');
            var presentLoginOnHome = ``;
            var isLoggedIn = true;
            if (presentLoginOnHome == 1 && isLoggedIn) {
                $(".LoginModalBody").html(loginUserHTML());
                $("#login-modal").modal('show');
            };
            updateSpecialPrices();
            showStoreInfo();
            const path = window.location.pathname;
            let type = path.split('/').filter(Boolean).pop();
            if (type == 'Shop' && !shopMenuClicked) {
                showShopView()
                shopMenuLogic();
                shopMenuClicked = true;
            }
            else if (type == 'Order') {
                $('.orders-menu').click();
                showOrdersView()
            } else {
                showHomeView();
            }
                        filterWebsiteAllowedItems();
        });
        function filterWebsiteAllowedItems() {
            const cartItems = getCartData();

            const departments = [{"DepartmentID":1329,"Department1":"Natural Fruit","CompanyID":24,"Status":1,"OrderIndex":null,"Slug":"natural-fruit","IncludeInWebsite":1,"ImageURL":null,"DateCreated":null,"DateModified":null,"ItemsCount":102},{"DepartmentID":1328,"Department1":"Sprinkles Chips","CompanyID":24,"Status":1,"OrderIndex":null,"Slug":"sprinkles-chips","IncludeInWebsite":1,"ImageURL":null,"DateCreated":null,"DateModified":null,"ItemsCount":78},{"DepartmentID":972,"Department1":"Unused","CompanyID":24,"Status":1,"OrderIndex":null,"Slug":"unused","IncludeInWebsite":1,"ImageURL":null,"DateCreated":null,"DateModified":null,"ItemsCount":1},{"DepartmentID":381,"Department1":"Undefined","CompanyID":24,"Status":1,"OrderIndex":null,"Slug":"undefined","IncludeInWebsite":1,"ImageURL":null,"DateCreated":null,"DateModified":null,"ItemsCount":89},{"DepartmentID":53,"Department1":"No Label","CompanyID":24,"Status":1,"OrderIndex":null,"Slug":"no-label","IncludeInWebsite":1,"ImageURL":null,"DateCreated":null,"DateModified":null,"ItemsCount":7},{"DepartmentID":1330,"Department1":"Seeds Nuts","CompanyID":24,"Status":1,"OrderIndex":null,"Slug":"seeds-nuts","IncludeInWebsite":1,"ImageURL":null,"DateCreated":null,"DateModified":null,"ItemsCount":26}];
            const subDepts = [{"ID":22,"Name":"Undefined","CompanyID":24,"Status":1,"DepartmentID":381,"IncludeInWebsite":1,"DateCreated":null,"DateModified":null,"ItemsCount":303}];

            const allowedDeptIds = departments.map(d => Number(d.DepartmentID));
            const allowedSubDeptIds = subDepts.map(sd => Number(sd.ID));

            const filteredItems = cartItems.filter(item => {
                const deptAllowed = allowedDeptIds.includes(Number(item.DepartmentID));
                const subDeptAllowed = allowedSubDeptIds.includes(Number(item.SubDeptID));
                return deptAllowed && subDeptAllowed;
            });

            setLocalStorageItem('cart', JSON.stringify(filteredItems));
            updateCartWidgetData();
        }
        function announceModal() {
            const showAnnouncement = 0;
            const title = ``;
            const message = ``;
            if (showAnnouncement && (title || message)) {
                $("#titleAnnouncement").html(title);
                $("#messageAnnouncement").html(message);
                $('#announcement_modal').modal('show');
            }
        }

        $('.home-menu').click(function () {
            $('#shopMenuBtn').removeClass('active');
            $('#ordersMenuBtn').removeClass('active');
            $('#homeMenuBtn').addClass('active');
            $(".search-box").addClass('d-none');
            $('.homeBody').show();
            $('.shopBody').hide();
            $('.ordersBody').hide();
        })
        // Flag to skip loadMoreItems when navigating via department click
        let skipLoadMoreItems = false;

        $('.shop-menu').click(function (e) {
            // Check if this is a department/subdepartment trigger - set flag to skip loadMoreItems
            if ($(this).hasClass('dept-nav-trigger') || $(this).hasClass('subDepts') ||
                $(this).hasClass('homeDepartments') || $(this).hasClass('subnavbtn')) {
                skipLoadMoreItems = true;
            }
            shopMenuLogic();
        })
        function shopMenuLogic() {
            $('#shopMenuBtn').addClass('active');
            $('#homeMenuBtn').removeClass('active');
            $('#ordersMenuBtn').removeClass('active');
            $(".search-box").removeClass('d-none');
            $(".search_input_box").removeClass('d-none');
            $('.shopBody').show().removeClass('d-none');
            $('.homeBody').hide();
            $('.ordersBody').hide();

            $('#dropdownMenuButton1').text($("#categoriesOption").text());

            if (smartSaverThreshold > 0) {
                updateSpecialPrices('smartSaver');
            }
            // Only load items if not navigating via department click
            if (!skipLoadMoreItems) {
                loadMoreItems(limit, offset, deptId, subDeptId, sortOrder, sortBy);
                offset += limit;
            }
            skipLoadMoreItems = false; // Reset the flag
            if (customerId > 0) getCustomerCart();
            updateCartWidgetData();
            triggerQty();
        }
        $('.orders-menu').click(function () {
            $('#shopMenuBtn').removeClass('active');
            $('#ordersMenuBtn').removeClass('active');
            $('#ordersMenuBtn').addClass('active');
            $(".search-box").addClass('d-none');
            $('.ordersBody').removeClass('d-none');
            $('.ordersBody').show();
            $('.shopBody').hide();
            $('.homeBody').hide();
        })
        // shop page script
        const showPrices = 0;
        const allowUOM = 'any';
        const minimumOrder = 1.00;
        const minimumOrderUnit = 'amount';
        const smartSaverThreshold = 30.00;
        const logo = 'https://cdn-vt-fvbqb6a7exc6b2g9.z03.azurefd.net/img/local/logos/29/07189bb3-24a7-4114-aa1e-8f32e8634b05.jpg';

        setLocalStorageItem('baseURL', 'https://eurogoodsfood.com/');
        setLocalStorageItem('taxRate', Number());
        setLocalStorageItem('hasDeposit', Number());
        setLocalStorageItem('discount', Number());
        setLocalStorageItem('ShowPrices', showPrices);
        setLocalStorageItem('SmartSaverThreshold', smartSaverThreshold);
        setLocalStorageItem('SettingsStatus', 1);
        setLocalStorageItem('AllowUOM', allowUOM);
        setLocalStorageItem('customerId', customerId);
        setLocalStorageItem('logo', logo);

        var smartSaverPrices = getSmartSaverPrices();
        let limit = 32;
        let offset = 0;
        let deptId = -1;
        if (deptId > 0) {
            const path = window.location.pathname;
            let departmentName = path.split('/').filter(Boolean).pop();
            departmentName = departmentName.split('-').map(word => word[0].toUpperCase() + word.slice(1)).join(' ');
            setNavigationHtml(departmentName, 'All')
        }
        let subDeptId = -1;
        let sortOrder = -1;
        let sortBy = -1;
        let isLoading = false;
        let scrollTicking = false;
        const loadThreshold = 240;
        const scrollEventListener = () => {
            if (scrollTicking) return;
            scrollTicking = true;
            window.requestAnimationFrame(() => {
                var scrollTop = $(window).scrollTop();
                var windowHeight = $(window).height();
                var documentHeight = $(document).height();
                var footerHeight = $(".modern-footer").outerHeight() || $(".footer-section-2").outerHeight() || 0;

                if (scrollTop + windowHeight + loadThreshold >= documentHeight - footerHeight && !isLoading) {
                    isLoading = true;
                    loadMoreItems(limit, offset, deptId, subDeptId, sortOrder, sortBy);
                    offset += limit;
                }
                scrollTicking = false;
            });
        }
        window.addEventListener('scroll', scrollEventListener);
        function loadMoreItems(limit, offset, departmentId, subDepartmentId, sortOrder, sortBy, type = "scroll") {
            const searchString = $('.product__search')?.val()?.trim();
            const customFilters = getCustomFilters();
            showItemLoader();
            var requestData = {
                limit: limit,
                offset: offset,
                deptId: departmentId,
                subDeptId: subDepartmentId,
                sortBy: sortBy,
                sortOrder: sortOrder,
                smartSaverPrices: smartSaverPrices,
                searchString,
                customCategoryFilters: customCategoryFilters,
                customFilters
            };
            $.ajax({
                url: "https://eurogoodsfood.com/Shop/getMoreItems",
                type: "POST",
                data: JSON.stringify(requestData),
                success: function (result) {
                    result = $.parseJSON(result);
                    const itemsHtml = result.itemsHtml;
                    const specialItemsHtml = result.specialItemsHtml;
                    hideItemLoader();
                    if (itemsHtml == 0) {
                        window.removeEventListener("scroll", scrollEventListener);
                    }
                    else {
                        const appendMode = type == "scroll" ? 'append' : 'html';
                        populateSpecialItemsHtml(specialItemsHtml);
                        populateItemsHtml(itemsHtml, appendMode);
                        triggerQty();
                    }
                    isLoading = false;
                }
            })
        }

        function populateSpecialItemsHtml(specialHtml) {
            if (!specialHtml || specialHtml.trim() === '') {
                return;
            }

            const specialSlider = document.getElementById('specialSlider');
            const specialSliderContainer = document.getElementById('specialSliderContainer');


            specialSlider.innerHTML = specialHtml;
            specialSliderContainer.style.display = 'block';

            bindSpecialSliderButtons();
        }

        function bindSpecialSliderButtons() {
            const slider = document.getElementById('specialSlider');
            const nextBtn = document.getElementById('specialNext');
            const prevBtn = document.getElementById('specialPrev');

            if (!slider || !nextBtn || !prevBtn) return;

            nextBtn.onclick = () => slider.scrollBy({ left: 260, behavior: 'smooth' });
            prevBtn.onclick = () => slider.scrollBy({ left: -260, behavior: 'smooth' });
        }

        $(document).on('click', '.cs-pc-checkbox', function () {
            var id = $(this).data("id");
            var qty = $('#qty_' + id).val();
            var val = $(this).val();
            var pcPrice = $(this).closest('.product-box-3').data('pcprice').toFixed(2);
            var csPrice = $(this).closest('.product-box-3').data('caseprice').toFixed(2);
            const smartSaverPrice = smartSaverPrices.find(item => item.ItemID === id);
            if (smartSaverThreshold > 0 && smartSaverPrice) {
                var smartPcPrice = (smartSaverPrice.PcPrice).toFixed(2);
                smartPcPrice = smartPcPrice.toString().split('.');
                var smartCsPrice = (smartSaverPrice.CasePrice).toFixed(2);
                smartCsPrice = smartCsPrice.toString().split('.');
            }
            if (val == 'cs') {
                $(this).val('pc');
                $(this).closest('.product-box-3').find(".priceCountIndicator").html(`$${csPrice}/Case`);
                pcPrice = pcPrice.toString().split('.');
                $(this).closest('.product-box-3').find(".price-cart").html(`<span class="uomStyle">$</span>${pcPrice[0]}.<span class="uomStyle">${pcPrice[1]}</span><span class="text-dark uomStyle">/pc</span>`);
                if (smartSaverThreshold > 0 && smartSaverPrice) {
                    $(this).closest('.product-box-3').find(".smartSaver").html(`SmartSaver<br><span class="smartSaverPrice">${smartPcPrice[0]}.${smartPcPrice[1]}</span>/pc`);
                }
                createItemCart($(this).closest('.product-box-3'), qty, 'pc');
            }
            else {
                $(this).val('cs');
                $(this).closest('.product-box-3').find(".priceCountIndicator").html(`$${pcPrice}/Count`);
                csPrice = csPrice.toString().split('.');
                $(this).closest('.product-box-3').find(".price-cart").html(`<span class="uomStyle">$</span>${csPrice[0]}.<span class="uomStyle">${csPrice[1]}</span><span class="text-dark uomStyle">/cs</span>`);
                if (smartSaverThreshold > 0) {
                    $(this).closest('.product-box-3').find(".smartSaver").html(`SmartSaver<br><span class="smartSaverPrice">${smartCsPrice[0]}.${smartCsPrice[1]}</span>/cs`);
                }
                createItemCart($(this).closest('.product-box-3'), qty, 'cs');
            }
        })
        $('#sortList a').on('click', function (e) {
            $('#dropdownMenuButton1').text($(this).text());
            window.addEventListener('scroll', scrollEventListener);
            sortOrder = $(this).data('sortorder');
            sortBy = $(this).data('sortby');
            loadMoreItems(limit, 0, deptId, subDeptId, sortOrder, sortBy, 'category');
        });

        function populateItemsHtml(data, type = 'html') {
            if (type === 'append') {
                $('#items__row').append(data);
            } else {
                $('#items__row').html(data);
            }
            $('#items__row').find('.wow').removeClass('wow');
            $('#items__content').html('');

            // Update product count
            updateProductCount();
        }

        function updateProductCount() {
            const normalCount = $('#items__row').children().length;
            const specialCount = $('#specialSlider').children().length;
            const totalCount = normalCount + specialCount;

            $('#shopItemsCount').text(totalCount);
        }

        function populateNoItemsHtml() {
            $('#items__row').html('');
            $('#items__content').html(`<div class='mt-4 pt-4 mb-4 pt-4'><h2 class='text-center mt-2'>No Items found against your search.</h2></div>`);
            $('#shopItemsCount').text('0');
        }
        function setNavigationHtml(deptName, subDeptName) {
            let textNavigationHtml = '';
            if (deptName != 'All') {
                textNavigationHtml = `<div class="d-flex align-items-center">
                    <h3 class="deptName">${deptName}</h3>
                    <i class="fas fa-chevron-right mx-3"></i>
                    <h3 class="subDeptName">${subDeptName}</h3>
                </div>`;
            }
            $('.text-navigation').html(textNavigationHtml);
        }
        $(".subDepts").click(function () {
            skipLoadMoreItems = true; // Skip loadMoreItems since getItemsForSelectedFilters will be called
            const subDeptName = $(this).data('subdeptname');
            const deptName = $(this).data('deptname');
            const type = $(this).data('type');
            setNavigationHtml(deptName, subDeptName);
            subDeptId = $(this).attr('id');
            deptId = $(this).data('department');
            changeDeptAndSubDeptStyling(deptId)
            if (type != 'mobile-view') {
                $(`#btn_${deptId}`).removeClass('text-dark');
                $(`#btn_${deptId}`).addClass('text-white');
            }
            getItemsForSelectedFilters(deptId, subDeptId)
        })
        function changeDeptAndSubDeptStyling(deptId) {
            $('.vt-dept-link').removeClass('active');
            $('.vt-dept-link[data-deptid="' + deptId + '"]').addClass('active');
        }
        $(".subnavbtn").click(function () {
            skipLoadMoreItems = true; // Skip loadMoreItems since getItemsForSelectedFilters will be called
            const fullId = $(this).attr('id');
            const deptName = $(this).data('deptname');
            deptId = fullId.replace('btn_', '');
            changeDeptAndSubDeptStyling(deptId)
            $(`#${fullId}`).removeClass('text-dark');
            $(`#${fullId}`).addClass('text-white');
            setNavigationHtml(deptName, 'All');
            getItemsForSelectedFilters(deptId);
        })
        $(".homeDepartments").click(function () {
            skipLoadMoreItems = true; // Skip loadMoreItems since getItemsForSelectedFilters will be called
            const fullId = $(this).attr('id');
            const deptName = $(this).data('deptname');
            deptId = fullId.replace('dept_cat_', '');
            changeDeptAndSubDeptStyling(deptId)
            setNavigationHtml(deptName, 'All');
            getItemsForSelectedFilters(deptId);
        })
        // Department nav bar click handler (from sticky header)
        $(document).on('click', '.dept-nav-trigger', function () {
            skipLoadMoreItems = true; // Skip loadMoreItems since getItemsForSelectedFilters will be called
            const clickedDeptId = $(this).data('deptid');
            const deptName = $(this).data('deptname');
            deptId = clickedDeptId;
            subDeptId = -1;
            changeDeptAndSubDeptStyling(deptId);
            setNavigationHtml(deptName == 'Undefined' ? 'Other' : deptName, 'All');
            getItemsForSelectedFilters(deptId);
        })
        function getCustomFilters() {
            return {
                minPrice: shopFilters.minPrice ?? null,
                maxPrice: shopFilters.maxPrice ?? null,
                stock: shopFilters.stock ?? null,
                purchased: shopFilters.purchased ?? -1
            };
        }
        function getItemsForSelectedFilters(deptId, subDeptId = -1) {
            const customFilters = getCustomFilters();
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
            window.addEventListener('scroll', scrollEventListener);
            showLoader();
            const searchString = $('.product__search')?.val()?.trim();
            offset = 0;
            $.ajax({
                url: "https://eurogoodsfood.com/Shop/getItemsForSelectedFilters",
                type: "POST",
                data: {
                    limit,
                    offset,
                    deptId,
                    subDeptId,
                    sortOrder,
                    sortBy,
                    searchString,
                    customFilters: JSON.stringify(customFilters),
                    smartSaverPrices: JSON.stringify(smartSaverPrices),
                    customCategoryFilters: JSON.stringify(customCategoryFilters),
                },
                success: function (result) {
                    hideLoader();
                    result = $.parseJSON(result);
                    const itemsHtml = result.itemsHtml;
                    const specialItemsHtml = result.specialItemsHtml;

                    if (itemsHtml == 0) {
                        window.removeEventListener("scroll", scrollEventListener);
                        populateNoItemsHtml();
                    } else {
                        offset += limit;
                        populateSpecialItemsHtml(specialItemsHtml);
                        populateItemsHtml(itemsHtml);
                        triggerQty();
                    }
                    isLoading = false;
                }
            })
        }
        function triggerQty() {
            var cartItems = (localStorage.getItem('cart') != 'null' && localStorage.getItem('cart') != null) ? JSON.parse(localStorage.getItem('cart')) : [];
            cartItems.forEach(el => {
                $('#add_' + el.ItemID).addClass("open");
                $('#qty_' + el.ItemID).val(el.Qty);
            });
        }
        function debounce(func, delay) {
            let timeoutId;
            return function (...args) {
                clearTimeout(timeoutId);
                timeoutId = setTimeout(() => {
                    func.apply(this, args);
                }, delay);
            };
        }
        const searchInputHandler = function (value) {
            if (value == '') {
                $('#items__row').html('');
                loadMoreItems(limit, 0, deptId, subDeptId, sortOrder, sortBy);
                return;
            }
            const customFilters = getCustomFilters();
            showLoader();
            $.ajax({
                url: "https://eurogoodsfood.com/Shop/searchItems",
                type: "POST",
                data: {
                    searchStr: value,
                    smartSaverPrices: JSON.stringify(smartSaverPrices),
                    deptId,
                    subDeptId,
                    sortOrder,
                    sortBy,
                    customCategoryFilters: JSON.stringify(customCategoryFilters),
                    customFilters: JSON.stringify(customFilters),
                },
                success: function (data) {
                    hideLoader();
                    if (data == 0) {
                        trackEvent('search_no_results', {
                            search_term: value
                        });
                        populateNoItemsHtml();
                    } else {
                        trackEvent('search', {
                            search_term: value
                        });
                        populateItemsHtml(data);
                        triggerQty();
                    }
                }
            })
        }
        // Product search with clear button
        $('.product__search').on('input', debounce(function () {
            let searchString = $(this).val().trim();

            // Show/hide clear button
            if (searchString.length > 0) {
                $('#clearProductSearch').show();
            } else {
                $('#clearProductSearch').hide();
            }

            searchInputHandler(searchString);
        }, 700));

        // Clear product search
        $('#clearProductSearch').on('click', function () {
            $('.product__search').val('');
            $(this).hide();
            searchInputHandler('');
        });
        $(".checkoutBtn").click(function () {
            if (Number(customerId) < 1) {
                $(".LoginModalBody").html(loginUserHTML());
                $(".titleModal").html('Login');
                $(".contentText").html('Login to your account');
                $("#login-modal").modal('show');
                $('.btn__login').attr('id', 'Checkout');
                $('.btn__signup').attr('id', 'Checkout');
            }
            else {
                var orderAmount = 0, cases = 0;
                var cartItems = (localStorage.getItem('cart') != 'null' && localStorage.getItem('cart') != null) ? JSON.parse(localStorage.getItem('cart')) : [];
                cartItems.forEach(el => {
                    orderAmount += el.Price * el.Qty;
                    cases += el.UomType.toUpperCase() == 'CS' ? el.Qty : el.Qty / el.CaseQty;
                })
                if (minimumOrderUnit == 'amount' && orderAmount < minimumOrder) {
                    alertify('danger', `We only allow a minimum order of $${minimumOrder}.`);
                    return;
                }
                if (minimumOrderUnit == 'cases' && cases < minimumOrder) {
                    alertify('danger', `We only allow a minimum order of ${minimumOrder} cases.`);
                    return;
                }

                showLoader();
                window.location.href = 'https://eurogoodsfood.com/Checkout';
            }
        })
        $(document).on('click', '.add-to-cart-box', function () {
            var $qty = $(this).siblings(".qty-input");
            var currentVal = parseInt($qty.val());
            if (!isNaN(currentVal)) {
                $qty.val(currentVal + 1);
            }
        });

        // Order JS
        let currentOrderData = null;

        function getTransDetails(transId, transNo) {
            showLoader();
            const baseUrl = "https://eurogoodsfood.com/";

            // Fetch order details
            $.ajax({
                url: `${baseUrl}Order/getOrderDetail/${transId}`,
                type: 'post',
                data: {},
                success: function (result) {
                    hideLoader();
                    const orderItems = JSON.parse(result);
                    currentOrderData = orderItems;

                    // Find order summary data
                    const orders = [];
                    const orderSummary = orders.find(o => o.TransID == transId);

                    // Update modal title and meta
                    $("#modal-order-number").text(`Order #${transNo}`);

                    // Update status badge
                    const paymentBadgeClass = getPaymentBadgeClass(orderSummary.Status);
                    $("#modal-order-meta").html(`
                        <span class="order-date"><i class="fa-regular fa-calendar"></i> ${formatOrderDate(orderSummary.TransDate)}</span>
                        <span class="order-status-badge ${paymentBadgeClass}">${orderSummary.Status}</span>
                    `);

                    // Update summary cards
                    updateOrderSummary(orderItems, orderSummary);

                    // Render order items
                    renderOrderItems(orderItems);

                    // Show modal
                    $("#trans_detail_modal").modal('show');
                }
            });
        }

        function updateOrderSummary(items, orderSummary) {
            // Items count
            $("#detail-items-count").text(items.length);

            // Total amount
            const total = items.reduce((sum, item) => sum + parseFloat(item.Total || 0), 0);
            $("#detail-total").text(`$${total.toFixed(2)}`);

            // Payment status
            $("#detail-payment-status").text(orderSummary.Status);

            // Delivery option
            $("#detail-delivery").text(orderSummary.DeliveryOption ?? 'Pickup');
        }

        function renderOrderItems(items) {
            const container = document.getElementById('orderItemsContainer');
            if (!items || items.length === 0) {
                container.innerHTML = '<p class="text-center text-muted">No items found</p>';
                return;
            }

            const logo = 'https://cdn-vt-fvbqb6a7exc6b2g9.z03.azurefd.net/img/local/logos/29/07189bb3-24a7-4114-aa1e-8f32e8634b05.jpg';

            const itemsHtml = items.map(item => {
                const imageSrc = (!item.PicturePath || item.PicturePath === null)
                    ? logo
                    : item.PicturePath;
                const unit = item.UOM == 1 ? 'Case' : 'Piece';

                return `
                    <div class="order-item-card" data-item-name="${item.Name.toLowerCase()}" data-item-code="${item.ItemCode.toLowerCase()}" onclick="openOrderItemInNewTab(${item.ItemID})" style="cursor: pointer;">
                        <img src="${imageSrc}" alt="${item.Name}" class="order-item-image">
                        <div class="order-item-details">
                            <div class="order-item-name">${item.Name}</div>
                            <div class="order-item-code">${item.ItemCode}</div>
                        </div>
                        <div class="order-item-price">
                            <div class="order-item-qty">${item.Qty} ${unit} × $${parseFloat(item.Price).toFixed(2)}</div>
                            <div class="order-item-total">$${parseFloat(item.Total).toFixed(2)}</div>
                        </div>
                    </div>
                `;
            }).join('');

            container.innerHTML = itemsHtml;
        }

        function openOrderItemInNewTab(itemId) {
            const baseUrl = "https://eurogoodsfood.com/";
            window.open(`${baseUrl}item?itemId=${itemId}`, '_blank');
        }

        $("#global-datatable-search-orderDetail").keyup(function () {
            const searchTerm = $(this).val().toLowerCase();
            $('.order-item-card').each(function () {
                const itemName = $(this).data('item-name');
                const itemCode = $(this).data('item-code');
                if (itemName.includes(searchTerm) || itemCode.includes(searchTerm)) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        })

        function setOrdersGrid(data) {
            // Sort orders by date descending (newest first)
            const ordersData = data.sort((a, b) => {
                return new Date(b.TransDate) - new Date(a.TransDate);
            });
            renderOrderCards(ordersData);
        }

        function renderOrderCards(orders) {
            const container = document.getElementById('ordersCardsContainer');
            if (!orders || orders.length === 0) {
                container.innerHTML = `
                    <div class="col-12">
                        <div class="empty-orders-state">
                            <div class="empty-icon">📦</div>
                            <h3>No Orders Yet</h3>
                            <p>Looks like you haven't placed any orders yet. Start shopping to see your orders here!</p>
                            <a href="#shop" class="btn btn-animation shop-menu">Start Shopping</a>
                        </div>
                    </div>
                `;
                return;
            }

            // Calculate statistics
            updateOrderStatistics(orders);

            const cardsHtml = orders.map(order => {
                const paymentBadgeClass = getPaymentBadgeClass(order.Status);
                const deliveryBadgeClass = getDeliveryBadgeClass(order.DeliveryStatus, order.IsShipped);
                const orderDate = new Date(order.TransDate);
                const daysAgo = Math.floor((new Date() - orderDate) / (1000 * 60 * 60 * 24));
                const timeAgoText = daysAgo === 0 ? 'Today' : daysAgo === 1 ? 'Yesterday' : `${daysAgo} days ago`;
                const shortDate = formatOrderDateShort(order.TransDate);

                return `
                    <div class="col-lg-4 col-md-6 mb-4">
                        <div class="order-card-modern" data-order-id="${order.TransID}" data-order-no="${order.TransNo}">
                            <div class="order-card-header-modern">
                                <div class="order-number-section">
                                    <span class="order-hash">#${order.TransNo}</span>
                                    <span class="order-time-ago">${timeAgoText} • ${shortDate}</span>
                                </div>
                                <div class="order-status-badges-modern">
                                    <span class="status-badge-modern ${paymentBadgeClass}">${order.Status}</span>
                                </div>
                            </div>
                            
                            <div class="order-card-body-modern">
                                <div class="order-detail-row">
                                    <i class="fa-solid fa-calendar"></i>
                                    <span>${formatOrderDateShort(order.TransDate)}</span>
                                </div>
                                <div class="order-detail-row">
                                    <i class="fa-solid fa-shopping-bag"></i>
                                    <span>${order.ItemsCount} ${order.ItemsCount === 1 ? 'Item' : 'Items'}</span>
                                </div>
                                <div class="order-detail-row">
                                    <i class="fa-solid fa-truck"></i>
                                    <span class="delivery-badge ${deliveryBadgeClass}">
                                        ${order.DeliveryStatus ?? (order.IsShipped == 1 ? 'Delivered' : 'Processing')}
                                    </span>
                                </div>
                                <div class="order-detail-row">
                                    <i class="fa-solid fa-location-dot"></i>
                                    <span>${order.DeliveryOption ?? 'Pickup'}</span>
                                </div>
                            </div>
                            
                            <div class="order-card-footer-modern">
                                <div class="order-total-modern">
                                    <span class="total-label">Total</span>
                                    <span class="total-amount">$${parseFloat(order.Debit).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>
                                </div>
                                <button class="btn-view-details-modern" onclick="getTransDetails(${order.TransID}, '${order.TransNo}')">
                                    <i class="fa-solid fa-eye"></i>
                                    View Details
                                </button>
                            </div>
                        </div>
                    </div>
                `;
            }).join('');

            container.innerHTML = cardsHtml;
        }

        function updateOrderStatistics(orders) {
            const totalOrders = orders.length;
            const totalSpent = orders.reduce((sum, order) => sum + parseFloat(order.Debit || 0), 0);
            const pendingOrders = orders.filter(order => {
                const status = (order.Status || '').toLowerCase();
                return status.includes('pending') || status.includes('not paid') || status.includes('overdue');
            }).length;
            const completedOrders = orders.filter(order => {
                const status = (order.Status || '').toLowerCase();
                return (status.includes('paid') || status.includes('approved')) && !status.includes('not paid');
            }).length;
            $('#totalOrdersCount').text(totalOrders.toLocaleString('en-US'));
            $('#totalSpent').text(`$${totalSpent.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`);
            $('#pendingOrdersCount').text(pendingOrders.toLocaleString('en-US'));
            $('#completedOrdersCount').text(completedOrders).toLocaleString('en-US');
            $('#completedOrdersCount').text(completedOrders).toLocaleString('en-US');
        }

        function formatOrderDateShort(dateString) {
            const date = new Date(dateString);
            const options = { month: 'short', day: 'numeric', year: 'numeric' };
            return date.toLocaleDateString('en-US', options);
        }

        function getPaymentBadgeClass(status) {
            const statusLower = (status || '').toLowerCase().trim();
            // Check for overdue first (before paid)
            if (statusLower.includes('overdue')) return 'badge-overdue';
            // Check for not paid variations
            if (statusLower === 'not paid' || statusLower === 'unpaid' || statusLower.includes('not paid')) return 'badge-notpaid';
            // Check for paid status (but not "not paid")
            if ((statusLower.includes('paid') || statusLower.includes('approved')) && !statusLower.includes('not paid')) return 'badge-paid';
            if (statusLower.includes('pending')) return 'badge-pending';
            if (statusLower.includes('failed') || statusLower.includes('declined')) return 'badge-failed';
            return 'badge-pending';
        }

        function getDeliveryBadgeClass(status, isShipped) {
            const statusLower = status ? String(status).toLowerCase()
                : (isShipped == 1 ? 'delivered' : 'processing');
            if (statusLower.includes('delivered')) return 'badge-delivered';
            if (statusLower.includes('processing') || statusLower.includes('shipped')) return 'badge-processing';
            if (statusLower.includes('pickup')) return 'badge-pickup';
            return 'badge-processing';
        }

        function formatOrderDate(dateString) {
            const date = new Date(dateString);
            const options = { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: true };
            return date.toLocaleString('en-US', options);
        }

        $("#global-datatable-search").keyup(function () {
            const searchTerm = $(this).val().toLowerCase();
            $('.order-card').each(function () {
                const orderNo = $(this).data('order-no').toString().toLowerCase();
                const cardText = $(this).text().toLowerCase();
                if (orderNo.includes(searchTerm) || cardText.includes(searchTerm)) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        })

        $('#printCatalog').click(function () {
            const pdfWindow = window.open('', '_blank');
            pdfWindow.document.write("    <html>\n        <head>\n            <title>Loading PDF...<\/title>\n            <style>\n                body {\n                    background: #f4f6f8;\n                    display: flex;\n                    justify-content: center;\n                    align-items: center;\n                    height: 100vh;\n                    margin: 0;\n                    font-family: Arial, sans-serif;\n                }\n                .loader-card {\n                    background: white;\n                    padding: 30px 40px;\n                    border-radius: 12px;\n                    box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n                    text-align: center;\n                }\n                .spinner {\n                    width: 50px;\n                    height: 50px;\n                    border: 5px solid #e0e0e0;\n                    border-top: 5px solid #3498db;\n                    border-radius: 50%;\n                    animation: spin 1s linear infinite;\n                    margin: 0 auto 15px auto;\n                }\n                @keyframes spin {\n                    0% { transform: rotate(0deg); }\n                    100% { transform: rotate(360deg); }\n                }\n                h3 {\n                    margin: 0;\n                    font-size: 18px;\n                    color: #333;\n                }\n            <\/style>\n        <\/head>\n        <body>\n            <div class=\"loader-card\">\n                <div class=\"spinner\"><\/div>\n                <h3>Loading PDF, please wait...<\/h3>\n            <\/div>\n        <\/body>\n    <\/html>");
            const pdfUrl = `https://eurogoodsfood.com/Home/itemsCatalog`;
            pdfWindow.location.href = pdfUrl;
        });

        $('#otherFilters').click(function () {
            $('#customCategoryFilterModal').modal('show');
        })

        $('#clearCustomCategoryFilters').click(function () {
            $('.customCategoryFilterSelect').val('');
            customCategoryFilters = [];
            $('#otherFiltersIndicator').addClass('d-none');
            document.getElementById("applyCustomCategoryFilters").click();
        });

        $('#applyCustomCategoryFilters').click(function () {
            customCategoryFilters = [];
            $('.customCategoryFilterSelect').each(function () {
                const categoryId = $(this).data('category-id');
                const dataId = $(this).val();
                if (dataId) {
                    customCategoryFilters.push({
                        CustomCategoryID: categoryId,
                        CustomCategoryDataID: dataId
                    });
                }
            });
            if (customCategoryFilters.length > 0) {
                $('#otherFiltersIndicator').removeClass('d-none').text(customCategoryFilters.length);
            } else {
                $('#otherFiltersIndicator').addClass('d-none');
            }
            $('#customCategoryFilterModal').modal('hide');
            getItemsForSelectedFilters(deptId, subDeptId);
        });

        // ============================================
        // Shop Filter Sidebar Functionality
        // ============================================

        let shopFilters = {
            departments: [],
            subDepartments: [],
            minPrice: null,
            maxPrice: null,
            stock: [],
            offers: [],
            customCategories: [],
            sort: 'default',
            purchased: -1,
        };

        // Open/Close Filter Sidebar
        $('#openFilterSidebar').on('click', function () {
            $('#shopFilterSidebar').addClass('open');
            $('#shopFilterOverlay').addClass('active');
            $('.shopBody').addClass('filter-open');
            $('body').css('overflow', 'hidden');
        });

        function closeFilterSidebar() {
            $('#shopFilterSidebar').removeClass('open');
            $('#shopFilterOverlay').removeClass('active');
            $('.shopBody').removeClass('filter-open');
            $('body').css('overflow', '');
        }

        $('#closeFilterSidebar, #shopFilterOverlay').on('click', closeFilterSidebar);

        // Close on escape key
        $(document).on('keydown', function (e) {
            if (e.key === 'Escape' && $('#shopFilterSidebar').hasClass('open')) {
                closeFilterSidebar();
            }
        });

        // Toggle filter sections
        $('.filter-section-header').on('click', function () {
            const $header = $(this);
            const $body = $header.next('.filter-section-body');

            $header.toggleClass('collapsed');
            $body.toggleClass('collapsed');
        });

        // Search within department list (including nested sub-departments)
        $('#searchDepartments').on('input', function () {
            const searchTerm = $(this).val().toLowerCase();

            if (searchTerm === '') {
                // Show all departments and collapse sub-departments
                $('.filter-dept-group').show();
                $('.filter-subdept-list').addClass('collapsed');
                $('.dept-expand-btn i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
            } else {
                // Search through departments and sub-departments
                $('.filter-dept-group').each(function () {
                    const $group = $(this);
                    const deptName = $group.data('name');
                    const deptMatches = deptName.includes(searchTerm);

                    // Check if any sub-department matches
                    let subDeptMatches = false;
                    $group.find('.filter-subdept-item').each(function () {
                        const subDeptName = $(this).data('name');
                        const matches = subDeptName.includes(searchTerm);
                        $(this).toggle(matches);
                        if (matches) subDeptMatches = true;
                    });

                    // Show department if it or any of its sub-departments match
                    if (deptMatches || subDeptMatches) {
                        $group.show();
                        // If sub-departments match, expand them
                        if (subDeptMatches && !deptMatches) {
                            $group.find('.filter-subdept-list').removeClass('collapsed');
                            $group.find('.dept-expand-btn i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
                        }
                    } else {
                        $group.hide();
                    }
                });
            }
        });

        // Price Range Slider
        const priceSliderMin = document.getElementById('priceSliderMin');
        const priceSliderMax = document.getElementById('priceSliderMax');
        const minPriceInput = document.getElementById('minPriceInput');
        const maxPriceInput = document.getElementById('maxPriceInput');
        const priceSliderRange = document.getElementById('priceSliderRange');

        function updatePriceSliderRange() {
            if (!priceSliderMin || !priceSliderMax || !priceSliderRange) return;

            const min = parseInt(priceSliderMin.value);
            const max = parseInt(priceSliderMax.value);
            const sliderMax = parseInt(priceSliderMax.max);

            const minPercent = (min / sliderMax) * 100;
            const maxPercent = (max / sliderMax) * 100;

            priceSliderRange.style.left = minPercent + '%';
            priceSliderRange.style.width = (maxPercent - minPercent) + '%';
        }

        if (priceSliderMin && priceSliderMax) {
            priceSliderMin.addEventListener('input', function () {
                const minVal = parseInt(this.value);
                const maxVal = parseInt(priceSliderMax.value);

                if (minVal > maxVal - 10) {
                    this.value = maxVal - 10;
                }

                if (minPriceInput) minPriceInput.value = this.value;
                updatePriceSliderRange();
            });

            priceSliderMax.addEventListener('input', function () {
                const maxVal = parseInt(this.value);
                const minVal = parseInt(priceSliderMin.value);

                if (maxVal < minVal + 10) {
                    this.value = minVal + 10;
                }

                if (maxPriceInput) maxPriceInput.value = this.value;
                updatePriceSliderRange();
            });

            updatePriceSliderRange();
        }

        // Price input fields
        if (minPriceInput) {
            minPriceInput.addEventListener('change', function () {
                const val = parseFloat(this.value) || 0;
                if (priceSliderMin) priceSliderMin.value = Math.min(val, 1000);
                updatePriceSliderRange();
            });
        }

        if (maxPriceInput) {
            maxPriceInput.addEventListener('change', function () {
                const val = parseFloat(this.value) || 1000;
                if (priceSliderMax) priceSliderMax.value = Math.min(val, 1000);
                updatePriceSliderRange();
            });
        }

        // Price presets
        $('.price-preset-btn').on('click', function () {
            const $btn = $(this);
            const min = $btn.data('min');
            const max = $btn.data('max');

            $('.price-preset-btn').removeClass('active');
            $btn.addClass('active');

            if (minPriceInput) minPriceInput.value = min;
            if (maxPriceInput) maxPriceInput.value = max || '';

            if (priceSliderMin) priceSliderMin.value = min;
            if (priceSliderMax) priceSliderMax.value = max || 1000;

            updatePriceSliderRange();
        });

        // Department expand/collapse toggle
        $(document).on('click', '.dept-expand-btn', function (e) {
            e.stopPropagation();
            const deptId = $(this).data('dept-id');
            const $subdeptList = $(`.filter-subdept-list[data-dept-id="${deptId}"]`);
            const $icon = $(this).find('i');

            $subdeptList.toggleClass('collapsed');
            $icon.toggleClass('fa-chevron-down fa-chevron-up');
        });

        // When department is checked, show its sub-departments
        $(document).on('change', '.dept-filter-checkbox', function () {
            const deptId = $(this).val();
            const $subdeptList = $(`.filter-subdept-list[data-dept-id="${deptId}"]`);

            if ($(this).is(':checked') && $subdeptList.hasClass('collapsed')) {
                $subdeptList.removeClass('collapsed');
                $(`.dept-expand-btn[data-dept-id="${deptId}"] i`).removeClass('fa-chevron-down').addClass('fa-chevron-up');
            }
        });

        // Collect filter values
        function collectShopFilters() {
            shopFilters.departments = [];
            shopFilters.subDepartments = [];
            shopFilters.stock = [];
            shopFilters.offers = [];
            shopFilters.customCategories = [];

            // Collect purchased filters
            shopFilters.purchased = $('input[name="purchaseFilter"]:checked').val() || -1;

            // Collect department filters
            $('.dept-filter-checkbox:checked').each(function () {
                shopFilters.departments.push({
                    id: $(this).val(),
                    name: $(this).data('name')
                });
            });

            // Collect sub-department filters
            $('.subdept-filter-checkbox:checked').each(function () {
                shopFilters.subDepartments.push({
                    id: $(this).val(),
                    name: $(this).data('name')
                });
            });

            // Collect price range
            shopFilters.minPrice = minPriceInput && minPriceInput.value ? parseFloat(minPriceInput.value) : null;
            shopFilters.maxPrice = maxPriceInput && maxPriceInput.value ? parseFloat(maxPriceInput.value) : null;

            // Collect stock filters
            $('.stock-filter-checkbox:checked').each(function () {
                shopFilters.stock.push($(this).val());
            });

            // Collect offer filters
            $('.offer-filter-checkbox:checked').each(function () {
                shopFilters.offers.push($(this).val());
            });

            // Collect custom category filters
            $('.customCategoryFilterSelectSidebar').each(function () {
                const categoryId = $(this).data('category-id');
                const dataId = $(this).val();
                if (dataId) {
                    shopFilters.customCategories.push({
                        CustomCategoryID: categoryId,
                        CustomCategoryDataID: dataId
                    });
                }
            });

            // Collect sort option
            shopFilters.sort = $('input[name="sortOption"]:checked').val() || 'default';

            console.log('shopFilters', shopFilters)

            return shopFilters;
        }

        // Update active filters display
        function updateActiveFiltersDisplay() {
            collectShopFilters();

            const $summary = $('#shopActiveFiltersSummary');
            const $list = $('#shopActiveFiltersList');
            const $badge = $('#shopFilterBadge');

            let tags = [];
            let filterCount = 0;

            // Department tags
            shopFilters.departments.forEach(dept => {
                filterCount++;
                tags.push(`<span class="active-filter-tag">
                    <span>${dept.name}</span>
                    <span class="remove-filter" data-type="dept" data-id="${dept.id}"><i class="fa-solid fa-times"></i></span>
                </span>`);
            });

            // Sub-department tags
            shopFilters.subDepartments.forEach(subDept => {
                filterCount++;
                tags.push(`<span class="active-filter-tag">
                    <span>${subDept.name}</span>
                    <span class="remove-filter" data-type="subdept" data-id="${subDept.id}"><i class="fa-solid fa-times"></i></span>
                </span>`);
            });

            // Price range tag
            if (shopFilters.minPrice !== null || shopFilters.maxPrice !== null) {
                filterCount++;
                const priceText = shopFilters.minPrice && shopFilters.maxPrice
                    ? `$${shopFilters.minPrice} - $${shopFilters.maxPrice}`
                    : shopFilters.minPrice
                        ? `From $${shopFilters.minPrice}`
                        : `Up to $${shopFilters.maxPrice}`;
                tags.push(`<span class="active-filter-tag">
                    <span>${priceText}</span>
                    <span class="remove-filter" data-type="price"><i class="fa-solid fa-times"></i></span>
                </span>`);
            }

            // Stock tags
            shopFilters.stock.forEach(stock => {
                filterCount++;
                const stockLabels = { 'in-stock': 'In Stock', 'low-stock': 'Low Stock', 'out-of-stock': 'Out of Stock' };
                tags.push(`<span class="active-filter-tag">
                    <span>${stockLabels[stock]}</span>
                    <span class="remove-filter" data-type="stock" data-id="${stock}"><i class="fa-solid fa-times"></i></span>
                </span>`);
            });

            // Offer tags
            shopFilters.offers.forEach(offer => {
                filterCount++;
                const offerLabels = { 'on-sale': 'On Sale', 'new-arrival': 'New Arrivals', 'bestseller': 'Bestsellers', 'clearance': 'Clearance' };
                tags.push(`<span class="active-filter-tag">
                    <span>${offerLabels[offer]}</span>
                    <span class="remove-filter" data-type="offer" data-id="${offer}"><i class="fa-solid fa-times"></i></span>
                </span>`);
            });

            if (shopFilters.purchased && shopFilters.purchased != -1) {
                filterCount++;
                tags.push(`<span class="active-filter-tag">
                    <span>Previously Purchased</span>
                    <span class="remove-filter" data-type="purchased"><i class="fa-solid fa-times"></i></span>
                </span>`);
            }

            // Update UI
            if (filterCount > 0) {
                $summary.removeClass('d-none');
                $list.html(tags.join(''));
                $badge.removeClass('d-none').text(filterCount);
            } else {
                $summary.addClass('d-none');
                $list.empty();
                $badge.addClass('d-none');
            }
        }

        // Remove individual filter
        $(document).on('click', '.remove-filter', function () {
            const type = $(this).data('type');
            const id = $(this).data('id');

            switch (type) {
                case 'dept':
                    $(`.dept-filter-checkbox[value="${id}"]`).prop('checked', false);
                    break;
                case 'subdept':
                    $(`.subdept-filter-checkbox[value="${id}"]`).prop('checked', false);
                    break;
                case 'price':
                    if (minPriceInput) minPriceInput.value = '';
                    if (maxPriceInput) maxPriceInput.value = '';
                    if (priceSliderMin) priceSliderMin.value = 0;
                    if (priceSliderMax) priceSliderMax.value = 1000;
                    $('.price-preset-btn').removeClass('active');
                    updatePriceSliderRange();
                    break;
                case 'stock':
                    $(`.stock-filter-checkbox[value="${id}"]`).prop('checked', false);
                    break;
                case 'offer':
                    $(`.offer-filter-checkbox[value="${id}"]`).prop('checked', false);
                    break;
                case 'purchased':
                    $('input[name="purchaseFilter"][value="-1"]').prop('checked', true);
                    break;
            }

            updateActiveFiltersDisplay();
        });

        // Clear all filters
        $('#clearAllShopFilters, #resetShopFilters').on('click', function () {
            // Reset all checkboxes
            $('.dept-filter-checkbox, .subdept-filter-checkbox, .stock-filter-checkbox, .offer-filter-checkbox').prop('checked', false);

            // Reset price inputs
            if (minPriceInput) minPriceInput.value = '';
            if (maxPriceInput) maxPriceInput.value = '';
            if (priceSliderMin) priceSliderMin.value = 0;
            if (priceSliderMax) priceSliderMax.value = 1000;
            $('.price-preset-btn').removeClass('active');
            updatePriceSliderRange();

            // Reset custom categories
            $('.customCategoryFilterSelectSidebar').val('');

            // Reset sort
            $('input[name="sortOption"][value="default"]').prop('checked', true);
            $('#quickSortSelect').val('');
            // Reset purchased filter
            $('input[name="purchaseFilter"][value="-1"]').prop('checked', true);

            updateActiveFiltersDisplay();
        });

        // Apply filters
        $('#applyShopFilters').on('click', function () {
            applyShopFiltersAndFetch();
            closeFilterSidebar();
        });

        function applyShopFiltersAndFetch() {
            collectShopFilters();
            updateActiveFiltersDisplay();

            // Update global filter variables used by existing code
            if (shopFilters.departments.length > 0) {
                deptId = shopFilters.departments.map(d => d.id).join(',');
            } else {
                deptId = -1;
            }

            if (shopFilters.subDepartments.length > 0) {
                subDeptId = shopFilters.subDepartments.map(d => d.id).join(',');
            } else {
                subDeptId = -1;
            }

            // Update custom category filters
            customCategoryFilters = shopFilters.customCategories;

            // Determine sort order
            switch (shopFilters.sort) {
                case 'name-asc':
                    sortBy = 'Name';
                    sortOrder = 'Asc';
                    break;
                case 'name-desc':
                    sortBy = 'Name';
                    sortOrder = 'Desc';
                    break;
                case 'price-asc':
                    sortBy = 'CasePrice';
                    sortOrder = 'Asc';
                    break;
                case 'price-desc':
                    sortBy = 'CasePrice';
                    sortOrder = 'Desc';
                    break;
                default:
                    sortBy = -1;
                    sortOrder = -1;
            }

            $("#sortList a").removeClass("active");

            let $selected;
            if (sortBy === -1 || sortOrder === -1) {
                $selected = $("#sortList a[data-sortby='-1']");
            } else {
                $selected = $("#sortList a").filter(`[data-sortby='${sortBy}'][data-sortorder='${sortOrder}']`);
            }
            $selected.addClass("active");

            $("#dropdownMenuButton1").text($selected.text());

            // Reset offset and fetch items
            offset = 0;
            window.addEventListener('scroll', scrollEventListener);
            getItemsForSelectedFilters(deptId, subDeptId);
        }

        // Update filter count on checkbox change
        $(document).on('change', '.dept-filter-checkbox, .subdept-filter-checkbox, .stock-filter-checkbox, .offer-filter-checkbox, .purchase-filter-radio', function () {
            updateActiveFiltersDisplay();
        });

        $(document).on('change', '.customCategoryFilterSelectSidebar', function () {
            updateActiveFiltersDisplay();
        });

        // VT style enhancements

        // Initialize rotating text animation
        function initRotatingText() {
            const words = $('.rotating-word');
            let currentIndex = 0;

            function rotateText() {
                words.removeClass('active');
                words.eq(currentIndex).addClass('active');
                currentIndex = (currentIndex + 1) % words.length;
            }

            // Initial rotation
            if (words.length > 0) {
                setInterval(rotateText, 2000);
            }
        }

        // Smooth scroll for internal links
        $('a[href^="#"]').on('click', function (e) {
            e.preventDefault();
            const target = $(this.getAttribute('href'));
            if (target.length) {
                $('html, body').stop().animate({
                    scrollTop: target.offset().top - 80
                }, 800);
            }
        });

        // Enhanced parallax effect
        let ticking = false;
        $(window).on('scroll', function () {
            if (!ticking) {
                window.requestAnimationFrame(function () {
                    const scrolled = $(window).scrollTop();
                    $('.vt-hero img').css({
                        'transform': 'translateY(' + (scrolled * 0.3) + 'px) scale(1.1)',
                        'filter': 'brightness(' + (1 - scrolled * 0.0005) + ')'
                    });
                    ticking = false;
                });
                ticking = true;
            }
        });

        // Animate elements on scroll with Intersection Observer
        const observerOptions = {
            threshold: 0.15,
            rootMargin: '0px 0px -100px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-on-scroll');
                    // Add stagger effect for grid items
                    if (entry.target.classList.contains('category-item')) {
                        const items = document.querySelectorAll('.category-item');
                        items.forEach((item, index) => {
                            setTimeout(() => {
                                item.style.opacity = '1';
                                item.style.transform = 'translateY(0)';
                            }, index * 100);
                        });
                    }
                }
            });
        }, observerOptions);

        // Observe all animated elements
        document.querySelectorAll('.collection-card, .category-item, .why-choose-item, .testimonial-card').forEach(el => {
            el.style.opacity = '0';
            el.style.transform = 'translateY(30px)';
            el.style.transition = 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
            observer.observe(el);
        });

        // Add hover sound effect (optional - can be removed)
        $('.vt-btn').on('mouseenter', function () {
            $(this).css('transform', 'translateY(-3px) scale(1.05)');
        }).on('mouseleave', function () {
            $(this).css('transform', 'translateY(0) scale(1)');
        });

        // Initialize on page load
        initRotatingText();

        // ============================================
        // Orders Filter Functionality
        // ============================================

        let allOrders = []; // Store all orders for filtering
        let orderFilters = {
            search: '',
            sort: 'date-desc',
            payment: [],
            delivery: [],
            date: []
        };

        // Store original orders when page loads
        
        // Toggle order filter panel
        $('#toggleOrderFilters').on('click', function () {
            $('#orderFilterPanel').toggleClass('d-none');
            $(this).toggleClass('active');
        });

        // Toggle order sort menu
        $('#ordersSortToggle').on('click', function (e) {
            e.stopPropagation();
            $('#ordersSortMenu').toggleClass('show');
        });

        // Close order sort menu when clicking outside
        $(document).on('click', function (e) {
            if (!$(e.target).closest('#ordersSortToggle, #ordersSortMenu').length) {
                $('#ordersSortMenu').removeClass('show');
            }
        });

        // Handle order sort selection
        $('.sort-option[data-sort^="date-"], .sort-option[data-sort^="amount-"]').on('click', function () {
            const sortValue = $(this).data('sort');
            $('.sort-option[data-sort^="date-"], .sort-option[data-sort^="amount-"]').removeClass('active');
            $(this).addClass('active');

            // Update sort label
            $('#ordersSortToggle .sort-label').text($(this).text());

            // Close menu
            $('#ordersSortMenu').removeClass('show');

            // Apply sort
            orderFilters.sort = sortValue;
            applyOrderFilters();
        });

        // Order search input (debounced)
        let orderSearchTimeout;
        $('#orders-search-input').on('input', function () {
            clearTimeout(orderSearchTimeout);
            const searchValue = $(this).val().trim();
            orderSearchTimeout = setTimeout(() => {
                orderFilters.search = searchValue;
                applyOrderFilters();
            }, 500);
        });

        // Order filter checkboxes
        $('.order-filter-checkbox').on('change', function () {
            const filterType = $(this).data('filter');
            const value = $(this).val();

            if ($(this).is(':checked')) {
                if (!orderFilters[filterType].includes(value)) {
                    orderFilters[filterType].push(value);
                }
            } else {
                orderFilters[filterType] = orderFilters[filterType].filter(v => v !== value);
            }
        });

        // Apply order filters button
        $('#applyOrderFilters').on('click', function () {
            applyOrderFilters();
            updateOrderFilterDisplay();
            $('#orderFilterPanel').addClass('d-none');
        });

        // Clear all order filters
        $('#clearOrderFilters').on('click', function () {
            // Reset all filter values
            $('#orders-search-input').val('');
            $('.order-filter-checkbox').prop('checked', false);

            // Reset filters object
            orderFilters = {
                search: '',
                sort: 'date-desc',
                payment: [],
                delivery: [],
                date: []
            };

            // Reset sort to default
            $('.sort-option[data-sort^="date-"], .sort-option[data-sort^="amount-"]').removeClass('active');
            $('.sort-option[data-sort="date-desc"]').addClass('active');
            $('#ordersSortToggle .sort-label').text('Sort By');

            // Clear active filter display
            $('#activeOrderFilters').addClass('d-none');
            $('#activeOrderFiltersTags').empty();
            $('#activeOrderFilterCount').addClass('d-none').text('0');

            // Reload all orders
            applyOrderFilters();
        });

        // Function to apply all order filters
        function applyOrderFilters() {
            let filteredOrders = [...allOrders];

            // Apply search filter
            if (orderFilters.search) {
                const searchLower = orderFilters.search.toLowerCase();
                filteredOrders = filteredOrders.filter(order => {
                    return order.TransNo.toString().toLowerCase().includes(searchLower) ||
                        order.Debit.toString().includes(searchLower) ||
                        order.TransDate.toLowerCase().includes(searchLower);
                });
            }

            // Apply payment status filter
            if (orderFilters.payment.length > 0) {
                filteredOrders = filteredOrders.filter(order => {
                    const status = (order.Status || '').toLowerCase();
                    return orderFilters.payment.some(filter => {
                        if (filter === 'paid') return status.includes('paid') && !status.includes('not paid');
                        if (filter === 'pending') return status.includes('pending');
                        if (filter === 'not paid') return status.includes('not paid') || status === 'unpaid';
                        return false;
                    });
                });
            }

            // Apply delivery status filter
            if (orderFilters.delivery.length > 0) {
                filteredOrders = filteredOrders.filter(order => {
                    const deliveryStatus = (order.DeliveryStatus || '').toLowerCase();
                    const isShipped = order.IsShipped == 1;
                    return orderFilters.delivery.some(filter => {
                        if (filter === 'delivered') return deliveryStatus.includes('delivered') || isShipped;
                        if (filter === 'processing') return deliveryStatus.includes('processing') || (!deliveryStatus && !isShipped);
                        if (filter === 'pickup') return deliveryStatus.includes('pickup');
                        return false;
                    });
                });
            }

            // Apply date range filter
            if (orderFilters.date.length > 0) {
                const now = new Date();
                filteredOrders = filteredOrders.filter(order => {
                    const orderDate = new Date(order.TransDate);
                    return orderFilters.date.some(filter => {
                        if (filter === 'today') {
                            return orderDate.toDateString() === now.toDateString();
                        }
                        if (filter === 'week') {
                            const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
                            return orderDate >= weekAgo;
                        }
                        if (filter === 'month') {
                            const monthAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
                            return orderDate >= monthAgo;
                        }
                        if (filter === 'year') {
                            return orderDate.getFullYear() === now.getFullYear();
                        }
                        return false;
                    });
                });
            }

            // Apply sorting
            filteredOrders = sortOrders(filteredOrders, orderFilters.sort);

            // Render filtered orders
            renderOrderCards(filteredOrders);
        }

        // Function to sort orders
        function sortOrders(orders, sortType) {
            const sorted = [...orders];

            switch (sortType) {
                case 'date-desc':
                    sorted.sort((a, b) => new Date(b.TransDate) - new Date(a.TransDate));
                    break;
                case 'date-asc':
                    sorted.sort((a, b) => new Date(a.TransDate) - new Date(b.TransDate));
                    break;
                case 'amount-high':
                    sorted.sort((a, b) => parseFloat(b.Debit) - parseFloat(a.Debit));
                    break;
                case 'amount-low':
                    sorted.sort((a, b) => parseFloat(a.Debit) - parseFloat(b.Debit));
                    break;
            }

            return sorted;
        }

        // Function to update active order filter display
        function updateOrderFilterDisplay() {
            const tags = [];
            let filterCount = 0;

            if (orderFilters.search) {
                filterCount++;
                tags.push(`
                    <span class="filter-tag">
                        Search: ${orderFilters.search}
                        <i class="fa-solid fa-times" onclick="removeOrderFilter('search')"></i>
                    </span>
                `);
            }

            orderFilters.payment.forEach(status => {
                filterCount++;
                tags.push(`
                    <span class="filter-tag">
                        Payment: ${status.charAt(0).toUpperCase() + status.slice(1)}
                        <i class="fa-solid fa-times" onclick="removeOrderFilter('payment', '${status}')"></i>
                    </span>
                `);
            });

            orderFilters.delivery.forEach(status => {
                filterCount++;
                tags.push(`
                    <span class="filter-tag">
                        Delivery: ${status.charAt(0).toUpperCase() + status.slice(1)}
                        <i class="fa-solid fa-times" onclick="removeOrderFilter('delivery', '${status}')"></i>
                    </span>
                `);
            });

            orderFilters.date.forEach(range => {
                filterCount++;
                const labels = { today: 'Today', week: 'Last 7 Days', month: 'Last 30 Days', year: 'This Year' };
                tags.push(`
                    <span class="filter-tag">
                        ${labels[range]}
                        <i class="fa-solid fa-times" onclick="removeOrderFilter('date', '${range}')"></i>
                    </span>
                `);
            });

            // Update UI
            if (filterCount > 0) {
                $('#activeOrderFilters').removeClass('d-none');
                $('#activeOrderFiltersTags').html(tags.join(''));
                $('#activeOrderFilterCount').removeClass('d-none').text(filterCount);
            } else {
                $('#activeOrderFilters').addClass('d-none');
                $('#activeOrderFilterCount').addClass('d-none').text('0');
            }
        }

        // Function to remove individual order filter
        window.removeOrderFilter = function (filterType, value) {
            if (filterType === 'search') {
                $('#orders-search-input').val('');
                orderFilters.search = '';
            } else {
                orderFilters[filterType] = orderFilters[filterType].filter(v => v !== value);
                $(`.order-filter-checkbox[data-filter="${filterType}"][value="${value}"]`).prop('checked', false);
            }

            applyOrderFilters();
            updateOrderFilterDisplay();
        };

        // ============================================
        // End Orders Filter Functionality
        // ============================================

        let currentSlide = 0;
        const slides = document.querySelectorAll('.vt-hero-slider img, .t2-hero-bg img');

        if (slides.length > 1) {
            setInterval(() => {
                slides[currentSlide].classList.remove('active');
                currentSlide = (currentSlide + 1) % slides.length;
                slides[currentSlide].classList.add('active');
            }, 4000);
        }

        function scrollToCategories() {
            document.getElementById('categorySection').scrollIntoView({
                behavior: 'smooth',
                block: 'nearest'
            });
        }
    </script>
    <script>
    $(document).on('click','.btn__login',function() {
        $(".login_err").addClass("d-none");
        var email = $("#user__email").val();
        var password = $("#user__password").val();
        if(email == "") {
            $(".email__err").html("Email is required");
            $(".email__err").removeClass("d-none");
            return;
        }
        if(!validateEmail(email)) {
            $(".email__err").html("Please enter a valid email address");
            $(".email__err").removeClass("d-none");
            return;
        }
        else $(".email__err").addClass("d-none");
        if(password == "") {
            $(".password__err").removeClass("d-none");
            return;
        } else $(".password__err").addClass("d-none");
        $('#login_btn_loader').removeClass("d-none");
        showLoader();
        $.ajax({
            url: 'https://eurogoodsfood.com/Home/findWebCustomer',
            type: 'post',
            data: {
                email: email,
                password: password
            },
            success: function (httpcode) {
                $('#login_btn_loader').addClass("d-none");
                hideLoader();
                if(httpcode == 200){
                    trackPageView('Logged In');
                    $.ajax({
                        url: 'https://eurogoodsfood.com/Shop/getCartData',
                        type: 'post',
                        data: {
                        },
                        success: function (response) {
                            var result = JSON.parse(response);
                            var cartData = getCartData();
                            if(result.length > 0) {
                                setCustomerCart(result);
                            }
                            else if(cartData.length > 0) {
                                $.ajax({
                                    url: 'https://eurogoodsfood.com/Shop/updateCartData',
                                    type: 'post',
                                    data: {
                                        cartData: cartData
                                    },
                                    success: function (data) {
                                        console.log("data", data);
                                    }
                                });
                            }
                        }
                    });
                    updateSpecialPrices();
                    window.location.href = `https://eurogoodsfood.com/Home`;
                } else if(httpcode == 404) {
					let canSignUp =  0;
                    $(".login_err").html("Account not found. Please " + (canSignUp == 1 ? "Sign Up." : "contact the store."))
                    $(".login_err").removeClass("d-none");
                } else if(httpcode == 406) {
                    $(".login_err").html("Incorrect password. Please try again.")
                    $(".login_err").removeClass("d-none");
                } else if(httpcode == 403) {
                    $(".login_err").html("Your account is disabled. Please contact the store for more information.");
                    $(".login_err").removeClass("d-none");
                } else {
                    $(".login_err").html("Sorry, something went wrong!")
                    $(".login_err").removeClass("d-none");
                }
            }
        });
    });

    $(document).on('click','.btn__signup',function() {
        var name = $("#reguser__fullname").val();
        var email = $("#reguser__email").val();
        var password = $("#reguser__password").val();
        if(name == "") {
            $(".fullname__err").removeClass("d-none");
            return;
        } else $(".fullname__err").addClass("d-none");
        if(email == "") {
            $(".email__err").html("Email is required");
            $(".email__err").removeClass("d-none");
            return;
        }
        if(!validateEmail(email)) {
            $(".email__err").html("Please enter a valid email address");
            $(".email__err").removeClass("d-none");
            return;
        }
        else $(".email__err").addClass("d-none");
        if(password == "" || password.length < 8 || password.length > 20) {
            let err = password === "" ? "Password is required." : "Password must between 8 to 20 characters.";
            $(".password__err").html(err);
            $(".password__err").removeClass("d-none");
            return;
        } else $(".password__err").addClass("d-none");
        $("#register_btn_loader").removeClass("d-none");
        showLoader();
        $.ajax({
            url: 'https://eurogoodsfood.com/Home/registerCustomer',
            type: 'post',
            data: {
                name: name,
                email: email,
                password: password,
            },
            success: function (httpcode) {
                hideLoader();
                $("#register_btn_loader").addClass("d-none");
                if(httpcode == 201){
                    trackPageView('Signed Up');
                    window.location.href = `https://eurogoodsfood.com//Home`;
                } else if(httpcode == 409) {
                    alertify('danger', 'User with the provided email already exists.');
                } else {
                    alertify('danger', 'Something went wrong...!');
                }
            }
        });
    });
    $(document).on("click",".forgotPasswordFromList",function() {
        $(".titleModal").html('Forgot Password');
        $(".contentText").html('Enter your email');
        $(".LoginModalBody").html(forgetPasswordHTML());
        $("#login-modal").modal('show');
    });
    $(document).on("click",".loginBtnFromList",function() {
        $(".LoginModalBody").html(loginUserHTML());
        $(".titleModal").html('Login');
        $(".contentText").html('Login to your account');
        $("#login-modal").modal('show');
    });
    function showBtnLoader() {
        $(".label_loader").css('display', 'initial');
    }
    function hideBtnLoader() {
        $(".label_loader").css('display', 'none');
    }
    $(document).on("click",".forget_password",function() {
        $(".titleModal").html('Forgot Password');
        $(".contentText").html('Enter your email');
        $(".LoginModalBody").html(forgetPasswordHTML());
    });
    var email = "";
    $(document).on("click","#forget_password_btn",function() {
        email = $("#email").val();
        if(email == "") {
            $(".email_err").html("Email is required.");
            $(".email_err").removeClass("d-none");
            return;
        }
        else{
            var isValid = validateEmail(email);
            if(!isValid){
                $(".email_err").html("Please enter a valid email.");
                $(".email_err").removeClass("d-none");
                return;
            }
            $(".email_err").addClass("d-none");
        }
        showBtnLoader();
        $.ajax({
            url: 'https://eurogoodsfood.com/Home/forgetPassword',
            type: 'post',	
            data: {
                email: email,
            },
            success: function (result) {
                hideBtnLoader();
                if(result == 204){
                    $(".titleModal").html('Verify');
                    $(".contentText").html("Enter the OTP we've just sent to your email");
                    $(".LoginModalBody").html(verifyPasswordHTML());
                }
                else if (result == 404) {
                    $(".email_err").html("Account not found. Please contact the store.");
                    $(".email_err").removeClass("d-none");
                }
                else if(result == 403) {
                    $(".email_err").html("Your account is disabled. Please contact the store for more information.");
                    $(".email_err").removeClass("d-none");
                }
                else {
                    $(".email_err").html("Something went wrong!");
                    $(".email_err").removeClass("d-none");
                }
            }
        });
    });
    $(document).on("click","#verify_otp_btn",function() {
        var code = $("#forgetOtpCode").val();
        if(code == "") {
            $(".otp_err").html("OTP is required...!");
            $(".otp_err").removeClass("d-none");
            return;
        }
        else{
            $(".otp_err").addClass("d-none");
        }
        if (code.length != 6) {
            $(".otp_err").html("Only 6 characters are allowed...!");
            $(".otp_err").removeClass("d-none");
            return;
        }
        else{
            $(".otp_err").addClass("d-none");
        }
        showBtnLoader();
        $.ajax({
            url: 'https://eurogoodsfood.com/Home/verifyOTP',
            type: 'post',	
            data: {
                code: code,
                email: email
            },
            success: function (result) {
                hideBtnLoader();
                if(result == 404){
                    $(".otp_err").html("Account not found. Please contact the store.");
                    $(".otp_err").removeClass("d-none");
                }
                else if(result == 403){
                    $(".otp_err").html("Incorrect OTP. Please try again!");
                    $(".otp_err").removeClass("d-none");
                }
                else if(result == 200){
                    $(".titleModal").html('Reset Password');
                    $(".contentText").html('Enter your new password');
                    $(".LoginModalBody").html(resetPasswordHTML());
                }
                else{
                    $(".otp_err").html("Something went wrong!");
                    $(".otp_err").removeClass("d-none");
                }
            }
        });
    });
    $(document).on("click","#reset_password_btn",function() {
        var password = $("#passwordForget").val();
        var confirmPassword = $("#confirmPasswordForget").val();
        if(password.length > 20 || password.length < 4){
            $(".password_err").html("Password must be greater than 3 and less than 20 characters!");
            $(".password_err").removeClass("d-none");
            return;
        }
        if(password == "") {
            $(".password_err").html("Password is required!");
            $(".password_err").removeClass("d-none");
            return;
        }
        if(confirmPassword == "" || password != confirmPassword) {
            $(".password_err").html("Passwords don't match!");
            $(".password_err").removeClass("d-none");
            return;
        }
        if(password != confirmPassword) {
            $(".unMaatchPassword_err").removeClass("d-none");
            return;
        }
        showBtnLoader();
        $.ajax({
            url: 'https://eurogoodsfood.com/Home/updatePassword',
            type: 'post',	
            data: {
                password: password,
                email: email,
            },
            success: function (result) {
                hideBtnLoader();
                if(result == 201){
                    $(".LoginModalBody").html(loginUserHTML());
                    $(".titleModal").html('Login');
                    $(".contentText").html('Login to your account');
                    alertify('success', 'Password has been successfully updated.');

                }
                else{
                    alertify('danger', 'Something went wrong.');

                }
            }
        });
    });
    function forgetPasswordHTML(){
        var html = `<div class="input-box">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-floating theme-form-floating log-in-form">
                                    <input type="email" class="form-control" id="email" placeholder="Your Email">
                                    <label for="email">Your Email</label>
                                    <span class="text-danger email_err d-none">Email is required</span>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 pt-4">
                            <button id="forget_password_btn" class="btn btn-animation w-100 justify-content-center" type="button">Forgot Password <img class="img-fluid ml-2 label_loader" src="https://eurogoodsfood.com/assets/images/loader-white.gif" height="18" width="18" style="display: none;"></button>
                        </div>
                    </div>`;
        return html;
    }
    function verifyPasswordHTML(){
        var html = `<div class="input-box">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-floating theme-form-floating log-in-form">
                                    <input type="number" class="form-control" id="forgetOtpCode" placeholder="OTP" data-toggle="input-mask" data-mask-format="000000">
                                    <label for="password">OTP</label>
                                    <span class="text-danger otp_err d-none">OTP is required</span>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 pt-4">
                            <button id="verify_otp_btn" class="btn btn-animation w-100 justify-content-center" type="button">Verify<img class="img-fluid ml-2 label_loader" src="https://eurogoodsfood.com/assets/images/loader-white.gif" height="18" width="18" style="display: none;"></button>
                        </div>
                    </div>`;
        return html;
    }
    function resetPasswordHTML(){
        var html = `<div class="input-box">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-floating theme-form-floating log-in-form">
                                    <input type="password" class="form-control" id="passwordForget" placeholder="Password">
                                    <span class="password-toggle-icon" id="toggleForgetPassword" onclick="togglePasswordVisibility('forgetPass')"><i class="far fa-eye"></i></span>
                                    <label for="password">Password.</label>
                                </div>
                            </div>
                            <div class="col-12 mt-3">
                                <div class="form-floating theme-form-floating log-in-form">
                                    <input type="password" class="form-control pt-2" id="confirmPasswordForget" placeholder="Confirm Password">
                                    <span class="password-toggle-icon" id="toggleForgetPasswordConfirm" onclick="togglePasswordVisibility('forgetPassConfirm')"><i class="far fa-eye"></i></span>
                                    <label for="password">Confirm Password.</label>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 mt-4">
                            <span class="text-danger password_err d-none p-2">Password is required</span>
                            <button id="reset_password_btn" class="btn btn-animation w-100 justify-content-center" type="button">Reset Password<img class="img-fluid ml-2 label_loader" src="https://eurogoodsfood.com/assets/images/loader-white.gif" height="18" width="18" style="display: none;"></button>
                        </div>
                    </div>`;
        return html;
    }
    function loginUserHTML(){
        var html = `<div class="log-in-section background-image-2 section-b-space">
                    <div class="row">
                        <div class="col-12">
                            <div class="log-in-box"><div class="input-box">
                        <div class="row g-4">
                            <div class="col-12">
                                <div class="form-floating theme-form-floating log-in-form">
                                    <input type="email" class="form-control" id="user__email" placeholder="Email Address">
                                    <label for="email">Email Address</label>
                                    <span class="text-danger email__err d-none">Email is required</span>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="form-floating theme-form-floating log-in-form">
                                    <input type="password" class="form-control" id="user__password" placeholder="Password">
                                    <span class="password-toggle-icon" onclick="togglePasswordVisibility('signIn')"><i class="far fa-eye"></i></span>
                                    <label for="password">Password</label>
                                    <span class="text-danger password__err d-none">Password is required</span>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="forgot-box">
                                    <a href="javascript:void(0)" class="forget_password forgot-password float-right">Forgot Password?</a>
                                </div>
                            </div>

                            <div class="col-12">
                                <span class="text-danger login_err d-none p-2">Wrong credentials</span>
                                <button id="Home" class="btn btn-animation w-100 justify-content-center btn__login" type="button">Log In <img id="login_btn_loader" class="img-fluid loaderMargin d-none" src="https://eurogoodsfood.com/assets/images/loader-white.gif" height="20" width="20"></button>
                            </div>
                        </div>
                    </div>
                    <div class="other-log-in">
                        <h6></h6>
                    </div>`
                                        html += `</div></div></div></div>`;
        return html;
    }

    function validateEmail(email) {
        var pattern = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
        return pattern.test(email);
    }

    function handleLogout() {
        trackPageView('Logged out');
        localStorage.removeItem('cart');
        updateCartWidgetData();
        window.location.href = "https://eurogoodsfood.com/Home/destroySession";
    }
</script>
    <script>
        window.addEventListener('load', () => {
            const nav = document.getElementById('deptNavBar');
            const header = document.getElementById('mainHeader');
            const spacer = document.getElementById('deptNavSpacer');

            const sync = () => {
                const h = header.offsetHeight;
                const n = nav.offsetHeight;
                nav.style.top = h + 'px';
                spacer.style.height = n + 'px';
            };

            sync();
            requestAnimationFrame(sync);
            setTimeout(sync, 100);
            window.addEventListener('resize', sync);

            let last = window.scrollY;
            window.addEventListener('scroll', () => {
                const now = window.scrollY;
                nav.classList.toggle('is-hidden', now > last && now > 80);
                last = now;
            }, { passive: true });
        });
    </script>
</body>

</html>
:root {
  --theme-color: #0b4c0e;
  --theme-color-rgb: 13, 164, 135;

  --theme-color1: #00ff0d;
  --theme-color1-rgb: 14, 148, 122;

  --header-color: #fff;
  --header-text-color: #333;

  --theme-color2: linear-gradient(
      90.56deg,
      var(--theme-color1) 8.46%,
      var(--theme-color) 62.97%
  );
}

.theme-color {
    color: var(--theme-color) !important;
}

.modern-theme-card,
.modern-theme-card * {
    box-sizing: border-box !important;
}

/* =========================================
   COLUMN
========================================= */

.modern-theme-card.itemsColumns {
    margin-top: 0px !important;
    padding: 12px !important;
}

/* =========================================
   MAIN CARD
========================================= */

.modern-theme-card .product-box-3 {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    height: 100% !important;

    background: #ffffff !important;

    border-radius: 20px !important;

    overflow: hidden !important;

    border: none !important;

    box-shadow:
        0 4px 10px rgba(0,0,0,0.04),
        0 20px 40px rgba(0,0,0,0.06) !important;

    transition: all 0.35s ease !important;
}

/* =========================================
   HOVER
========================================= */

.modern-theme-card .product-box-3:hover {
    transform: translateY(-6px) !important;

    box-shadow:
        0 15px 35px rgba(37,99,235,0.12),
        0 25px 50px rgba(0,0,0,0.10) !important;
}

/* =========================================
   HEADER
========================================= */

.modern-theme-card .product-header {
    position: relative !important;

    padding: 12px !important;

    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #f3f7ff 100%
        ) !important;
}

/* =========================================
   IMAGE AREA
========================================= */

.modern-theme-card .collection-card-image {
    position: relative !important;

    width: 100% !important;
    height: 210px !important;

    border-radius: 18px !important;

    overflow: hidden !important;

    background:
        radial-gradient(circle at top, #ffffff 0%, #f8fafc 100%) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid rgba(255,255,255,0.7) !important;

    transition: all 0.35s ease !important;
}

/* GLOSS EFFECT */

.modern-theme-card .collection-card-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(255,255,255,0.18),
            transparent
        );

    pointer-events: none;
}

/* =========================================
   IMAGE
========================================= */

.modern-theme-card .collection-card-image img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    padding: 16px !important;

    transition: transform 0.4s ease !important;
}

.modern-theme-card .product-box-3:hover .collection-card-image img {
    transform: scale(1.08) !important;
}

/* =========================================
   STOCK BADGE
========================================= */

.modern-theme-card .vt-search-stock-badge {
    position: absolute !important;

    top: 10px !important;
    left: 10px !important;

    z-index: 5 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: fit-content !important;
    max-width: 120px !important;

    padding: 5px 10px !important;

    border-radius: 30px !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    line-height: 1 !important;
    white-space: nowrap !important;

    backdrop-filter: blur(10px) !important;

    border: 1px solid rgba(255,255,255,0.7) !important;

    box-shadow:
        0 4px 10px rgba(0,0,0,0.08) !important;
}

.modern-theme-card .vt-search-stock-badge::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    margin-right: 6px;

    background: currentColor;
}

.modern-theme-card .in-stock {
    background: rgba(220,252,231,0.92) !important;
    color: #15803d !important;
}

.modern-theme-card .out-of-stock {
    background: rgba(254,226,226,0.92) !important;
    color: #b91c1c !important;
}

/* =========================================
   SALE TAG
========================================= */

.modern-theme-card .sale-tag {
    position: absolute !important;

    top: 12px !important;
    left: 12px !important;

    width: 58px !important;

    z-index: 5 !important;
}

/* =========================================
   VIEW BUTTON
========================================= */

.modern-theme-card .product-option {
    position: absolute !important;

    bottom: 14px !important;
    right: 14px !important;

    z-index: 10 !important;

    list-style: none !important;
}

.modern-theme-card .product-option li a {
    width: 42px !important;
    height: 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background: rgba(255,255,255,0.95) !important;

    color: #111827 !important;

    text-decoration: none !important;

    box-shadow: 0 6px 16px rgba(0,0,0,0.10) !important;

    transition: all 0.25s ease !important;
}

.modern-theme-card .product-option li a:hover {
    background: var(--theme-color) !important;
    color: #ffffff !important;

    transform: scale(1.08) !important;
}

.modern-theme-card .product-option li a:hover i {
    color: #ffffff !important;
}

.modern-theme-card .view__item {
    margin-bottom: 2px !important;
}

/* =========================================
   BODY
========================================= */

.modern-theme-card .product-footer {
    display: flex !important;
    flex-direction: column !important;

    flex-grow: 1 !important;

    padding: 10px 10px 12px 10px !important;
}

/* =========================================
   ROW
========================================= */

.modern-theme-card .itemCodeAndCaseQtyContainer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 12px !important;

    margin-bottom: 10px !important;
}

/* =========================================
   SMALL TEXT
========================================= */

.modern-theme-card .item-code,
.modern-theme-card .dynamic-font-detail,
.modern-theme-card .price-per-uom-and-stock {
    font-size: 11px !important;
    font-weight: 700 !important;

    color: #64748b !important;

    line-height: 1.4 !important;
}

/* =========================================
   PRODUCT NAME
========================================= */

.modern-theme-card .name {
    font-size: 17px !important;
    font-weight: 800 !important;

    color: #0f172a !important;

    line-height: 1.45 !important;

    margin: 6px 0 4px !important;

    min-height: 50px !important;

    overflow: hidden !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

/* =========================================
   PRICE
========================================= */

.modern-theme-card .price-cart {
    font-size: 30px !important;
    font-weight: 900 !important;

    color: var(--theme-color) !important;

    line-height: 1 !important;
}

.modern-theme-card .uomStyle {
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* =========================================
   SMART SAVER
========================================= */

.modern-theme-card .smartSaver {
    text-align: right !important;

    color: #059669 !important;

    font-size: 11px !important;
    font-weight: 800 !important;
}

.modern-theme-card .smartSaverPrice {
    font-size: 18px !important;
    font-weight: 900 !important;
}

/* =========================================
   ADD TO CART
========================================= */

.modern-theme-card .add-to-cart-box {
    margin-top: auto !important;
    padding-top: 16px !important;
}

/* BUTTON */

.modern-theme-card .btn-add-cart {
    width: 100% !important;
    height: 48px !important;

    border: none !important;

    border-radius: 14px !important;

    background:
        linear-gradient(
            135deg,
            var(--theme-color),
            var(--theme-color1)
        ) !important;

    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 800 !important;

    transition: all 0.25s ease !important;
}

.modern-theme-card .btn-add-cart:hover {
    transform: translateY(-2px) !important;

    box-shadow: 0 12px 24px rgba(37,99,235,0.30) !important;
}

/* =========================================
   QTY AREA
========================================= */

.modern-theme-card .input-group {
    display: flex !important;
    align-items: center !important;

    gap: 10px !important;
}

/* PLUS MINUS */

.modern-theme-card .qty-btn {
    width: 40px !important;
    height: 40px !important;

    border: none !important;

    border-radius: 12px !important;

    background: #eff6ff !important;

    color: var(--theme-color) !important;

    transition: all 0.25s ease !important;
}

.modern-theme-card .qty-btn:hover {
    background: var(--theme-color) !important;
}

.modern-theme-card .qty-btn:hover i {
    color: #ffffff !important;
}

/* INPUT */

.modern-theme-card .qty-input {
    height: 40px !important;

    border-radius: 12px !important;

    border: 1px solid #dbeafe !important;

    text-align: center !important;

    font-weight: 700 !important;

    box-shadow: none !important;
}

/* =========================================
   LAST SOLD
========================================= */

.modern-theme-card .last-sold-line {
    margin-top: 16px !important;

    padding-top: 14px !important;

    border-top: 1px dashed #cbd5e1 !important;

    font-size: 12px !important;

    color: #64748b !important;

    line-height: 1.6 !important;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1200px) {

    .modern-theme-card .collection-card-image {
        height: 200px !important;
    }

    .modern-theme-card .price-cart {
        font-size: 28px !important;
    }
}

@media (max-width: 768px) {

    .modern-theme-card {
        padding: 8px !important;
    }

    .modern-theme-card .collection-card-image {
        height: 185px !important;
    }

    .modern-theme-card .product-footer {
        padding: 10px !important;
    }

    .modern-theme-card .name {
        font-size: 15px !important;
    }

    .modern-theme-card .price-cart {
        font-size: 24px !important;
    }

    .modern-theme-card .btn-add-cart {
        height: 45px !important;
    }
}

@media (max-width: 576px) {

    .modern-theme-card .collection-card-image {
        height: 165px !important;
    }

    .modern-theme-card .btn-add-cart {
        height: 44px !important;
    }

    .modern-theme-card .product-option li a {
        width: 38px !important;
        height: 38px !important;
    }
}




<!-- toolbar styling -->
 /* =========================================================
   MODERN SHOP TOOLBAR - FULLY ISOLATED
   NOTHING OLD WILL AFFECT THIS
========================================================= */

.shop-toolbar,
.shop-toolbar * {
    box-sizing: border-box !important;
}

/* MAIN TOOLBAR */

.shop-toolbar {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 18px !important;

    width: 100% !important;

    padding: 16px 20px !important;

    margin-bottom: 24px !important;

    border-radius: 22px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.98),
            rgba(248,250,252,0.98)
        ) !important;

    border: 1px solid rgba(226,232,240,0.8) !important;

    box-shadow:
        0 4px 12px rgba(15,23,42,0.04),
        0 18px 40px rgba(15,23,42,0.06) !important;

    backdrop-filter: blur(12px) !important;

    z-index: 2 !important;
}

/* =========================================================
   LEFT / CENTER / RIGHT
========================================================= */

.shop-toolbar .shop-toolbar-left,
.shop-toolbar .shop-toolbar-center,
.shop-toolbar .shop-toolbar-right {
    display: flex !important;
    align-items: center !important;

    gap: 14px !important;
}

.shop-toolbar .shop-toolbar-center {
    flex: 1 !important;
    justify-content: center !important;
}

/* =========================================================
   FILTER BUTTON
========================================================= */

.shop-toolbar .btn-open-filters {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;

    height: 48px !important;

    padding: 0 18px !important;

    border: none !important;

    border-radius: 14px !important;

    background:
        linear-gradient(
            135deg,
            var(--theme-color),
            var(--theme-color1)
        ) !important;

    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    cursor: pointer !important;

    transition: all 0.25s ease !important;

    box-shadow:
        0 10px 24px rgba(37,99,235,0.18) !important;
}

.shop-toolbar .btn-open-filters:hover {
    transform: translateY(-2px) !important;

    box-shadow:
        0 14px 30px rgba(37,99,235,0.28) !important;
}

/* FILTER BADGE */

.shop-toolbar .filter-badge {
    position: absolute !important;

    top: -5px !important;
    right: -5px !important;

    min-width: 20px !important;
    height: 20px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 6px !important;

    border-radius: 999px !important;

    background: #ef4444 !important;

    color: #ffffff !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    box-shadow:
        0 4px 10px rgba(239,68,68,0.35) !important;
}

/* =========================================================
   ITEMS COUNT
========================================================= */

.shop-toolbar .items-count {
    display: flex !important;
    align-items: center !important;

    height: 46px !important;

    padding: 0 16px !important;

    border-radius: 14px !important;

    background: #f8fafc !important;

    border: 1px solid #e2e8f0 !important;

    color: #475569 !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    white-space: nowrap !important;
}

.shop-toolbar #shopItemsCount {
    margin-right: 5px !important;

    color: var(--theme-color) !important;

    font-size: 15px !important;
    font-weight: 800 !important;
}

/* =========================================================
   SEARCH
========================================================= */

.shop-toolbar .shop-search-wrapper {
    position: relative !important;

    width: 100% !important;
    max-width: 560px !important;
}

.shop-toolbar .shop-search-wrapper i.fa-search {
    position: absolute !important;

    top: 50% !important;
    left: 18px !important;

    transform: translateY(-50%) !important;

    color: #94a3b8 !important;

    font-size: 14px !important;

    pointer-events: none !important;
}

.shop-toolbar .shop-search-input {
    width: 100% !important;
    height: 52px !important;

    padding: 0 52px 0 48px !important;

    border-radius: 16px !important;

    border: 1px solid #e2e8f0 !important;

    background: #ffffff !important;

    color: #0f172a !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    outline: none !important;

    transition: all 0.25s ease !important;

    box-shadow:
        0 3px 10px rgba(15,23,42,0.04) !important;
}

.shop-toolbar .shop-search-input:focus {
    border-color: var(--theme-color) !important;

    box-shadow:
        0 0 0 4px rgba(37,99,235,0.10) !important;
}

.shop-toolbar .shop-search-input::placeholder {
    color: #94a3b8 !important;
}

/* CLEAR BUTTON */

.shop-toolbar .shop-search-clear {
    position: absolute !important;

    top: 50% !important;
    right: 14px !important;

    transform: translateY(-50%) !important;

    width: 28px !important;
    height: 28px !important;

    border: none !important;

    border-radius: 50% !important;

    background: #f1f5f9 !important;

    color: #64748b !important;

    cursor: pointer !important;

    transition: all 0.2s ease !important;
}

.shop-toolbar .shop-search-clear:hover {
    background: #e2e8f0 !important;

    color: #0f172a !important;
}

/* =========================================================
   SORT BUTTON
========================================================= */

.shop-toolbar .btn-sort-dropdown,
.shop-toolbar .btn-catalog {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    height: 48px !important;

    padding: 0 18px !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 14px !important;

    background: #ffffff !important;

    color: #334155 !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    transition: all 0.25s ease !important;

    box-shadow:
        0 3px 10px rgba(15,23,42,0.04) !important;
}

.shop-toolbar .btn-sort-dropdown:hover,
.shop-toolbar .btn-catalog:hover {
    background: var(--theme-color) !important;

    border-color: var(--theme-color) !important;

    color: #ffffff !important;

    transform: translateY(-2px) !important;
}

.shop-toolbar .btn-sort-dropdown:hover i,
.shop-toolbar .btn-catalog:hover i {
    color: #ffffff !important;
}

/* =========================================================
   DROPDOWN MENU
========================================================= */

.shop-toolbar .dropdown-menu {
    border: none !important;

    border-radius: 16px !important;

    padding: 10px !important;

    background: #ffffff !important;

    box-shadow:
        0 20px 45px rgba(15,23,42,0.12) !important;
}

.shop-toolbar .dropdown-item {
    border-radius: 12px !important;

    padding: 11px 14px !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    color: #334155 !important;

    transition: all 0.2s ease !important;
}

.shop-toolbar .dropdown-item:hover {
    background: rgba(37,99,235,0.08) !important;

    color: var(--theme-color) !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 992px) {

    .shop-toolbar {
        flex-wrap: wrap !important;
    }

    .shop-toolbar .shop-toolbar-center {
        order: 3 !important;

        width: 100% !important;
    }

    .shop-toolbar .shop-search-wrapper {
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {

    .shop-toolbar {
        padding: 14px !important;

        gap: 12px !important;

        border-radius: 18px !important;
    }

    .shop-toolbar .shop-toolbar-left,
    .shop-toolbar .shop-toolbar-right {
        width: 100% !important;

        justify-content: space-between !important;
    }

    .shop-toolbar .btn-open-filters,
    .shop-toolbar .btn-sort-dropdown,
    .shop-toolbar .btn-catalog {
        height: 44px !important;

        border-radius: 12px !important;

        font-size: 13px !important;
    }

    .shop-toolbar .shop-search-input {
        height: 48px !important;

        border-radius: 14px !important;
    }
}

@media (max-width: 576px) {

    .shop-toolbar .items-count {
        display: none !important;
    }

    .shop-toolbar .btn-sort-dropdown span,
    .shop-toolbar .btn-open-filters span:not(.filter-badge) {
        display: none !important;
    }

    .shop-toolbar .btn-open-filters,
    .shop-toolbar .btn-sort-dropdown,
    .shop-toolbar .btn-catalog {
        width: 44px !important;

        padding: 0 !important;
    }
}