<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
		<head>
			<title>Invalid SSO provider - Queensboro</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
										<meta http-equiv="Content-type" content="text/html; charset=utf-8"  />
							<meta name="Identifier-URL" content="//dev.queensboro.com"  />
							<meta name="Revisit-after" content="1 day"  />
							<meta http-equiv="imagetoolbar" content="no"  />
							<meta http-equiv="Content-Style-Type" content="text/css"  />
							<meta http-equiv="Content-Script-Type" content="text/javascript"  />
							<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"  />
							<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"  />
							<meta property="og:url" content="https://dev.queensboro.com/api_login/sso_redirect"  />
			                        <meta name="robots" content="noindex,nofollow,noarchive,nosnippet,noodp,noydir">
            			<meta name="theme-color" content="#ffffff" />
			<meta property="fb:admins" content="1440078095" />
			<meta property="fb:app_id" content="127842523854" />
							<meta property="og:image" content="https://cdn.queensboro.com/content-pages/site-art/the-queen-blue.webp" />
				<meta property="og:type" content="website" />
										<meta name="twitter:card" content="summary_large_image" />
							<meta name="twitter:site" content="@queensborousa" />
							<meta name="twitter:image" content="https://cdn.queensboro.com/content-pages/site-art/the-queen-blue.webp" />
			            <link rel="icon" href="https://cdn.queensboro.com/favicon.ico" sizes="32x32" />
            <link rel="icon" href="https://cdn.queensboro.com/qb-head-blue.svg" type="image/svg+xml" />
            <link rel="apple-touch-icon" href="/apple-touch-icon.png">
            <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
            <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
            <link rel="manifest" href="/manifest.json?v=28d49e54ea6910c71be7" />
            <link rel="dns-prefetch" href="https://cdn.queensboro.com/" />
            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
			<link href='//fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap' rel='stylesheet' type='text/css' />
                        <link rel="canonical" href="https://dev.queensboro.com/api_login/sso_redirect"  />
                        <link type="text/css" rel="stylesheet" href="//dev.queensboro.com/css/load.1793202599/ssid/1.css?v=28d49e54ea6910c71be7" media="all"  />
                        <link type="text/css" rel="stylesheet" href="//dev.queensboro.com/css/default.3966949169/ssid/1.css?v=28d49e54ea6910c71be7" media="all"  />
                        <link rel="index" title="$7.95 Queensboro New Customer Sampler!" href="https://dev.queensboro.com"  />
            
            <script>
                //setting up some necessary vars
                var loggedIn = false;
                var subsite_id = 1;
                var promotion_name = 'UN26A28';
                var is_employee = false;
                var csrf_token_ajax = 'cc07e06866f79598c4883fb0ba13d61ed3350c93295896b2cdd192b7b61468f1';
                var captcha_site_key = '';

                window.onerror = function (message, source, lineNum, colNum, error) {
                    const errorDetails = {
                        message: message,
                        source: source,
                        lineNum: lineNum,
                        colNum: colNum,
                        error: error ? error.stack : '',
                        customerId: '',
                        promoCode: 'UN26A28',
                        csrf_key: 'ajax',
                        csrf_token: csrf_token_ajax
                    };

                    fetch('https://dev.queensboro.com/api_errors/log_console_error', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(errorDetails)
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.csrf_token) {
                            csrf_token_ajax = data.csrf_token;
                        }
                    });
                };
            </script>

                        <script type="text/javascript" language="javascript" src="//dev.queensboro.com/js/load.1793202599/ssid/1.js?v=28d49e54ea6910c71be7" ></script>
                        <script type="text/javascript" language="javascript" src="//dev.queensboro.com/js/default.3966949169/ssid/1.js?v=28d49e54ea6910c71be7" ></script>
            
            		</head>
		<body>
                        <div id="main-container">
				<div id="header-wrapper">
					
					<div id="header">
                        <div class="black-l-20-bg">
                            <div id="top-nav">
                                <span class="banner-title">Custom Shirts, Polos, Hats & Promotional Products - Embroidery & Printing Since 1982.</span>
                                                                    <span class="banner-shipping">Now shipping from Wilmington NC, Dallas TX &amp; Reno NV</span>
                                                                <ul class="list-inline vert-flex-center">
                                    <!-- Support -->
                                                                        <li>
                                        <span class="account-link dropdown">
                                            <a class="dropdown-toggle go-to-here" data-toggle="dropdown" href="javascript:void(0);">Support</a>

                                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                                                                                        <li>
                                                          <a href="https://dev.queensboro.com/our-promise">
                                                              No Returns Necessary Guarantee                                                          </a>
                                                      </li>
                                                                                                                  <li><a href="https://dev.queensboro.com/a/referral">Refer a Friend - Earn $25</a></li>
                                                                                                                                                                        <li>
                                                          <a href="https://dev.queensboro.com/queensboroplus">
                                                              QueensboroPlus                                                          </a>
                                                      </li>
                                                                                                                                                                      <li>
                                                          <a href="https://dev.queensboro.com/about-embroidery-apparel">
                                                              About Embroidery                                                          </a>
                                                      </li>
                                                                                                                                                                      <li>
                                                          <a href="https://dev.queensboro.com/about-printed-apparel">
                                                              About Printing                                                          </a>
                                                      </li>
                                                                                                                                                                      <li>
                                                          <a href="https://dev.queensboro.com/shipping-info">
                                                              Shipping Information                                                          </a>
                                                      </li>
                                                                                                                                                                      <li>
                                                          <a href="https://dev.queensboro.com/privacy-policy">
                                                              Our Privacy Policy                                                          </a>
                                                      </li>
                                                                                                                                                                      <li>
                                                          <a href="https://dev.queensboro.com/product_search">
                                                              Product Lookup                                                          </a>
                                                      </li>
                                                                                                                                                          </ul>
                                        </span>
                                    </li>

                                    <!-- Logo Studio -->
                                    <li>
                                        <span class="account-link dropdown">
                                            <a class="dropdown-toggle go-to-here"
                                               data-toggle="dropdown"
                                               id="subcat_logo_studio"
                                               href="javascript:void(0);">My Logos</a>

                                            <ul class="dropdown-menu dropdown-menu-right"
                                                role="menu">
                                                <li>
                                                    <a class="load-logo-upload" href="https://dev.queensboro.com/logo_studio/upload">
                                                        Upload A Logo
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="click_to_login"
                                                       href="https://dev.queensboro.com/logo_studio/locker">
                                                        View My Logos
                                                    </a>
                                                </li>
                                                                                            </ul>
                                        </span>
                                    </li>

                                    <!-- Customer Account link -->
                                    <li id="header-account-links">
                                                    <span class="not-logged ">
                            <span class="for-big">
                    <a href="https://dev.queensboro.com/account/login/type/register" class="login click_to_login not-logged-link" data-type="register"><b>Register</b></a> /
                    <a style="padding-right:0;" href="https://dev.queensboro.com/account/login/type/login" class="login click_to_login not-logged-link" data-type="login"><b>Sign In</b></a>
                </span>
                <span class="for-small">
                    <a href="https://dev.queensboro.com/account/login/type/login" class="login click_to_login not-logged-link" data-type="login"><i class="fa fa-user"></i></a>
                </span>
                    </span>
    
                                    </li>

                                </ul>
                            </div>
                        </div>

                        <!-- Google Tag Manager (noscript) -->
                        <!-- new way of implementing all of our Google tags in one place -->
                        <noscript>
                            <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MPFVDVZ"
                                    height="0" width="0" style="display:none;visibility:hidden"></iframe>
                        </noscript>
                        <!-- End Google Tag Manager (noscript) -->

						<header class="vert-flex-center">
							<div class="store-logo-wrapper">
								<a href="https://dev.queensboro.com" title="Return to Home Page">
									<div style="background-image: url(https://cdn.queensboro.com/QB-web-header-since-1982.svg);" id="store-logo" ></div>
								</a>
                                                                    <div class="dev-boy animate__animated animate__infinite animate__heartBeat">
                                        dev
                                    </div>
                                							</div>

                                                            <div class="mega-menu-wrapper container">
    <div class="row wsmenu slideLeft menuclose clearfix" id="mega-menu-container">
        <div class="col-md-12" id="mega-menu-sub-container">
            <!-- Back Button For Mobile Menu -->
            <div class="mr-15" id="back-section-container">
                <div class="menu-title p-10" id="back-section" data-toggle="mega-menu-dropdown-container">
                    <i class="glyphicon glyphicon-chevron-left" style="font-size: 14px;"></i>
                    Back
                </div>
            </div>
            <!-- End Back Button For Mobile Menu -->

            <!-- Products Menu Section -->
            <div class="mega-menu-dropdown-container mega-menu-desktop-container">
                <div class="menu-title p-10" data-toggle="mega-menu-dropdown-container">
                    <span>Products</span>
                </div>
                <div class="mega-menu-dropdown" id="product-section-container" style="max-width: 800px;">
                                                <div class="menu-subsection mega-menu-accordion active">
                                <h4 class="mega-menu-accordion-title">
                                <img src='https://cdn.queensboro.com/content-pages/site-art/thread-shop.webp' alt='Custom Embroidered Apparel' width='150' height='auto'>                                <i class="glyphicon glyphicon-chevron-down mega-menu-title-chevron"></i>
                                </h4>
                                <div class="mega-menu-accordion-content">
                                                                    <div class="featured-category-container">                                             <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/custom-embroidered-polos">
                                                    Polos</a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/custom-embroidered-hats">
                                                    Hats &amp; Beanies</a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/custom-embroidered-apparel">
                                                    All Embroidered Products</a>
                                            </div>
                                                                            </div>                                         <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/new-embroidery-products">
                                                New Arrivals                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/embroidered-closeouts">
                                                Closeouts                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/custom-embroidered-activewear">
                                                Activewear                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/custom-embroidered-accessories">
                                                Bags, Towels, &amp; More                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/custom-embroidered-big-and-tall">
                                                Big &amp; Tall                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/custom-embroidered-dress-shirts">
                                                Dress Shirts                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/custom-embroidered-fleece">
                                                Fleece Apparel                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/custom-embroidered-hats">
                                                Hats &amp; Beanies                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/custom-embroidered-outerwear">
                                                Outerwear                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/custom-embroidered-polos">
                                                Polos                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/custom-embroidered-sweatshirts-sweaters">
                                                Sweatshirts &amp; Sweaters                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/custom-embroidered-shirts">
                                                T-Shirts                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/custom-embroidered-workwear">
                                                Workwear                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/embroidered-youth-apparel">
                                                Youth Apparel                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/embroidered-womens-apparel">
                                                Womens Apparel                                            </a>
                                        </div>
                                                                </div>
                            </div>
                                                    <div class="menu-subsection mega-menu-accordion active">
                                <h4 class="mega-menu-accordion-title">
                                <img src='https://cdn.queensboro.com/content-pages/site-art/print-shop.webp' alt='Custom Printed Apparel' width='150' height='auto'>                                <i class="glyphicon glyphicon-chevron-down mega-menu-title-chevron"></i>
                                </h4>
                                <div class="mega-menu-accordion-content">
                                                                    <div class="featured-category-container">                                             <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/custom-printed-shirts">
                                                    T-Shirts</a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/custom-printed-sweatshirts">
                                                    Sweatshirts</a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/custom-printed-apparel">
                                                    All Printed Products</a>
                                            </div>
                                                                            </div>                                         <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/custom-printed-shirts">
                                                T-Shirts                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/custom-printed-sweatshirts">
                                                Sweatshirts                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/custom-printed-mens-apparel">
                                                Men&#039;s Apparel                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/custom-printed-womens-apparel">
                                                Women&#039;s Apparel                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/custom-printed-youth">
                                                Youth Apparel                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/custom-printed-polos">
                                                Polos                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/custom-printed-hats">
                                                Hats                                            </a>
                                        </div>
                                                                </div>
                            </div>
                                                    <div class="menu-subsection mega-menu-accordion active">
                                <h4 class="mega-menu-accordion-title">
                                <img src='https://cdn.queensboro.com/content-pages/site-art/swag-shop.webp' alt='Custom Promotional Products' width='150' height='auto'>                                <i class="glyphicon glyphicon-chevron-down mega-menu-title-chevron"></i>
                                </h4>
                                <div class="mega-menu-accordion-content">
                                                                    <div class="featured-category-container">                                             <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/custom-promotional-drinkware">
                                                    Drinkware</a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/custom-promotional-pens">
                                                    Pens</a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/custom-promotional-products">
                                                    All Promotional Products</a>
                                            </div>
                                                                            </div>                                         <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/custom-printed-bags">
                                                Bags                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/custom-promotional-drinkware">
                                                Drinkware                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/promotional-home-goods">
                                                Home Goods                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/promotional-office-products">
                                                Office Products                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/custom-promotional-pens">
                                                Pens                                            </a>
                                        </div>
                                                                            <div class="mega-menu-category">
                                            <a class="category-link"
                                               href="https://dev.queensboro.com/custom-outdoor-products">
                                                Outdoor                                            </a>
                                        </div>
                                                                </div>
                            </div>
                                        </div>
            </div>
            <!-- End Products Menu Section -->

            <!-- Brands Menu Section -->
            <div class="mega-menu-dropdown-container mega-menu-desktop-container">
                <div class="menu-title p-10" data-toggle="mega-menu-dropdown-container">
                    <span>Brands</span>
                </div>
                <div class="mega-menu-dropdown" id="brands-section-container">
                                            <div class="menu-subsection mega-menu-accordion">
                                <div class="mega-menu-accordion-content" id="brands-menu-content" style="margin-top: 20px;">
                                                                            <div class="featured-category-container">                                                 <div class="mega-menu-category">
                                                    <a class="category-link"
                                                       href="https://dev.queensboro.com/queensboro-brand-apparel">
                                                        Queensboro</a>
                                                </div>
                                                                                    </div>                                             <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/adidas">
                                                    Adidas                                                </a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/brooks-brothers">
                                                    Brooks Brothers                                                </a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/carhartt">
                                                    Carhartt                                                </a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/columbia">
                                                    Columbia                                                </a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/district">
                                                    District                                                </a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/eddie-bauer">
                                                    Eddie Bauer                                                </a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/gildan">
                                                    Gildan                                                </a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/independent-trading-co">
                                                    Independent Trading Co                                                </a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/mercermettle">
                                                    Mercer+Mettle                                                </a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/nautica">
                                                    Nautica                                                </a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/new-era">
                                                    New Era                                                </a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/nike">
                                                    Nike                                                </a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/ogio">
                                                    OGIO                                                </a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/port-and-company">
                                                    Port &amp; Company                                                </a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/port-authority">
                                                    Port Authority                                                </a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/puma">
                                                    Puma                                                </a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/queensboro-brand-apparel">
                                                    Queensboro                                                </a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/sport-tek">
                                                    Sport-Tek                                                </a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/sportsman">
                                                    Sportsman                                                </a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/spyder">
                                                    Spyder                                                </a>
                                            </div>
                                                                                    <div class="mega-menu-category">
                                                <a class="category-link"
                                                   href="https://dev.queensboro.com/the-north-face">
                                                    The North Face                                                </a>
                                            </div>
                                                                        </div>
                            </div>
                                        </div>
            </div>
            <!-- End Brands Menu Section -->

            <!-- Sales Menu Section -->
            <div class="mega-menu-dropdown-container" id="sale-menu-container">
                <div class="menu-title p-10" data-toggle="mega-menu-dropdown-container">
                    <span class="sale-menu-label">On Sale!</span>
                </div>
                <div class="mega-menu-dropdown" id="sale-section-container">
                    <div class="menu-subsection sale-menu-links">
                        <h4>On Sale by Category</h4>
                        <div class="featured-category-container">
                            <div class="mega-menu-category">
                                <a class="category-link" href="https://dev.queensboro.com/sale">All Sale Items</a>
                            </div>
                        </div>
                                                    <div class="mega-menu-category">
                                <a class="category-link"
                                   href="https://dev.queensboro.com/sale?f%5BProduct%5D%5B0%5D=19f1028d7c&f%5BProduct%5D%5B1%5D=b53759f3ce">
                                    Polos                                </a>
                            </div>
                                                    <div class="mega-menu-category">
                                <a class="category-link"
                                   href="https://dev.queensboro.com/sale?f%5BProduct%5D%5B0%5D=f47d4458f5">
                                    T-Shirts                                </a>
                            </div>
                                                    <div class="mega-menu-category">
                                <a class="category-link"
                                   href="https://dev.queensboro.com/sale?f%5BProduct%5D%5B0%5D=09e23883e9&f%5BProduct%5D%5B1%5D=da80877d95">
                                    Sweatshirts &amp; Hoodies                                </a>
                            </div>
                                                    <div class="mega-menu-category">
                                <a class="category-link"
                                   href="https://dev.queensboro.com/sale?f%5BProduct%5D%5B0%5D=7056a774c3&f%5BProduct%5D%5B1%5D=400cd0299d&f%5BProduct%5D%5B2%5D=46b5e59b2f">
                                    Hats &amp; Beanies                                </a>
                            </div>
                                                    <div class="mega-menu-category">
                                <a class="category-link"
                                   href="https://dev.queensboro.com/sale?f%5BProduct%5D%5B0%5D=c38f411cd1">
                                    Outerwear                                </a>
                            </div>
                                                    <div class="mega-menu-category">
                                <a class="category-link"
                                   href="https://dev.queensboro.com/sale?f%5BProduct%5D%5B0%5D=4e8e6caf66">
                                    Bags                                </a>
                            </div>
                                            </div>
                                            <div class="sale-menu-top-sellers">
                            <h4>Top Sellers</h4>
                            <div class="sale-menu-cards">
                                                                    <div class="product-wrapper qb-card qb-card-compact"
          data-style="21437"
     data-name="Queensboro Embroidered Men&#039;s AP3 3.0 All Purpose Polo"
     data-url="https://dev.queensboro.com/style/21437/queensboro-embroidered-men-s-ap3-3-0-all-purpose-polo">
    <div class="product-image" id="img_cont_cad4f78eba54ace4d2e97f14c66539de">
        <a class="order-now-link" href="https://dev.queensboro.com/style/21437/queensboro-embroidered-men-s-ap3-3-0-all-purpose-polo">
            <img class="for-quick-view"
                 src="https://cdn.queensboro.com/product-images/21437/21437-88173-sm.avif"
                 loading="lazy"
                 alt="Queensboro Embroidered Men&#039;s AP3 3.0 All Purpose Polo"
                 data-decoration-type="emb"
                 data-color-id="1043"
                 data-color-hex="6a91d4"
                 data-color-brightness="light"
            />
        </a>
                <span class="qb-card-tag qb-card-tag-sale">On Sale</span>            </div>

    <a class="qb-card-body" href="https://dev.queensboro.com/style/21437/queensboro-embroidered-men-s-ap3-3-0-all-purpose-polo">
                    <span class="qb-card-brand">Queensboro</span>
                <span class="qb-card-name" title="Queensboro Embroidered Men&#039;s AP3 3.0 All Purpose Polo">Men&#039;s AP3 3.0 All Purpose Polo</span>
        <div class="qb-card-meta">
            <span class="qb-card-deco">Embroidered</span>            <div class="display-sizes">
    <p class="mb-5">S - 3XL</p></div>
        </div>
        <div class="display_short_price category-price">
            <ul class="list-inline price-discounts mb-5" style="text-decoration: none;">
            <li class="sale-price">$10.95</li>
                            <li class="regular-price">$27.95</li>
                <li class="price-save">61% Off</li>
                    </ul>
</div>    </a>
    </div>
                                                                    <div class="product-wrapper qb-card qb-card-compact"
          data-style="4567UD"
     data-name="Queensboro Printed Unisex Classic Cotton Tee"
     data-url="https://dev.queensboro.com/style/4567UD/queensboro-printed-unisex-classic-cotton-tee">
    <div class="product-image" id="img_cont_6fa833cc0cb2c61a04a2e6ba85879bc9">
        <a class="order-now-link" href="https://dev.queensboro.com/style/4567UD/queensboro-printed-unisex-classic-cotton-tee">
            <img class="for-quick-view"
                 src="https://cdn.queensboro.com/product-images/4567ud/4567ud-44487-sm.jpg"
                 loading="lazy"
                 alt="Queensboro Printed Unisex Classic Cotton Tee"
                 data-decoration-type="print"
                 data-color-id="2"
                 data-color-hex="333366"
                 data-color-brightness="dark"
            />
        </a>
                <span class="qb-card-tag qb-card-tag-sale">On Sale</span>            </div>

    <a class="qb-card-body" href="https://dev.queensboro.com/style/4567UD/queensboro-printed-unisex-classic-cotton-tee">
                    <span class="qb-card-brand">Queensboro</span>
                <span class="qb-card-name" title="Queensboro Printed Unisex Classic Cotton Tee">Unisex Classic Cotton Tee</span>
        <div class="qb-card-meta">
            <span class="qb-card-deco">Printed</span>            <div class="display-sizes">
    <p class="mb-5">S - 3XL</p></div>
        </div>
        <div class="display_short_price category-price">
            <ul class="list-inline price-discounts mb-5" style="text-decoration: none;">
            <li class="sale-price">$7.95</li>
                            <li class="regular-price">$11.95</li>
                <li class="price-save">33% Off</li>
                    </ul>
</div>    </a>
    </div>
                                                                    <div class="product-wrapper qb-card qb-card-compact"
          data-style="8035"
     data-name="Port &amp; Company Embroidered Knit Hat"
     data-url="https://dev.queensboro.com/style/8035/port-and-company-embroidered-knit-hat">
    <div class="product-image" id="img_cont_bc3a8020930a5ef700f00b8342e0c2d2">
        <a class="order-now-link" href="https://dev.queensboro.com/style/8035/port-and-company-embroidered-knit-hat">
            <img class="for-quick-view"
                 src="https://cdn.queensboro.com/product-images/8035/8035-91574-sm.avif"
                 loading="lazy"
                 alt="Port &amp; Company Embroidered Knit Hat"
                 data-decoration-type="emb"
                 data-color-id="3182"
                 data-color-hex="716046"
                 data-color-brightness="dark"
            />
        </a>
                <span class="qb-card-tag qb-card-tag-sale">On Sale</span>            </div>

    <a class="qb-card-body" href="https://dev.queensboro.com/style/8035/port-and-company-embroidered-knit-hat">
                    <span class="qb-card-brand">Port &amp; Company</span>
                <span class="qb-card-name" title="Port &amp; Company Embroidered Knit Hat">Knit Hat</span>
        <div class="qb-card-meta">
            <span class="qb-card-deco">Embroidered</span>            <div class="display-sizes">
    <p class="mb-5">One Size</p></div>
        </div>
        <div class="display_short_price category-price">
            <ul class="list-inline price-discounts mb-5" style="text-decoration: none;">
            <li class="sale-price">$8.95</li>
                            <li class="regular-price">$15.95</li>
                <li class="price-save">44% Off</li>
                    </ul>
</div>    </a>
    </div>
                                                            </div>
                        </div>
                                    </div>
            </div>
            <!-- End Sales Menu Section -->

            <!-- About Us Menu Section -->
            <div class="mega-menu-dropdown-container">
                <div class="menu-title p-10" data-toggle="mega-menu-dropdown-container">
                    <span>About Us</span>
                </div>
                <div class="mega-menu-dropdown">
                    <div class="mega-menu-culture-container">
                        <div class="mega-menu-culture-image-grid">
                            <div class="mega-menu-culture-image-container">
                                <a href="https://dev.queensboro.com/about" class="mega-menu-culture-link">
                                    <div class="text-overlay mega-menu-culture-text-overlay">About Queensboro</div>
                                    <div class="overlay mega-menu-culture-image-overlay"></div>
                                    <img src="https://cdn.queensboro.com/content-pages/other/about-queensboro.webp" alt="About Queensboro">
                                </a>
                            </div>

                            <div class="mega-menu-culture-image-container">
                                <a href="https://dev.queensboro.com/our-mission" class="mega-menu-culture-link">
                                    <div class="text-overlay mega-menu-culture-text-overlay">Our Mission</div>
                                    <div class="overlay mega-menu-culture-image-overlay"></div>
                                    <img src="https://cdn.queensboro.com/content-pages/other/our-mission.webp" alt="Our Mission">
                                </a>
                            </div>

                            <div class="mega-menu-culture-image-container">
                                <a href="https://dev.queensboro.com/careers" class="mega-menu-culture-link">
                                    <div class="text-overlay mega-menu-culture-text-overlay">Careers</div>
                                    <div class="overlay mega-menu-culture-image-overlay"></div>
                                    <img src="https://cdn.queensboro.com/content-pages/other/careers.webp" alt="Careers">
                                </a>
                            </div>

                            <div class="mega-menu-culture-image-container">
                                <a href="https://dev.queensboro.com/donations" class="mega-menu-culture-link">
                                    <div class="text-overlay mega-menu-culture-text-overlay">Donations</div>
                                    <div class="overlay mega-menu-culture-image-overlay"></div>
                                    <img src="https://cdn.queensboro.com/content-pages/other/donations.webp" alt="Donations">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End About Us Menu Section -->

            <!-- Search Bar Section -->
            <div class="mega-menu-dropdown-container" id="mega-menu-search-container">
                <div class="mega-menu-search-wrapper">
                    <div class="mega-menu-search-container">
                        <form id="mega-menu-search" method="get" action="/search">
                            <input type="text"
                                   id="search-input"
                                   name="q"
                                   class="form-control input-md"
                                   placeholder="Search Products"
                                   autocomplete="off"
>
                        </form>
                        <div class="mega-menu-search-divider"></div>
                        <a href="javascript:void(0);" id="mega-menu-search-icon">
                            <i class="fa fa-search"></i>
                        </a>
                    </div>
                    <!-- Search Helper Dropdown -->
                    <div class="search-helper-dropdown" id="search-helper-dropdown">
                        <div class="search-helper-row">
                            <button type="button" class="search-helper-chip" data-keyword="embroidered" data-group="type">Embroidery</button>
                            <button type="button" class="search-helper-chip" data-keyword="printed" data-group="type">Digital Print</button>
                        </div>
                        <div class="search-helper-divider"></div>
                        <div class="search-helper-row">
                            <button type="button" class="search-helper-chip" data-keyword="mens" data-group="gender">Men</button>
                            <button type="button" class="search-helper-chip" data-keyword="womens" data-group="gender">Women</button>
                            <button type="button" class="search-helper-chip" data-keyword="unisex" data-group="gender">Unisex</button>
                            <button type="button" class="search-helper-chip" data-keyword="youth" data-group="gender">Youth</button>
                        </div>
                        <!-- Category suggestions (shown after type or gender selection) -->
                        <div class="search-helper-divider search-helper-category-divider" style="display: none;"></div>
                        <div class="search-helper-row search-helper-categories" id="search-helper-categories" style="display: none;">
                            <!-- Dynamically populated by search-helper.js -->
                        </div>
                        <div class="search-helper-loading" id="search-helper-loading" style="display: none;">
                            <span class="search-helper-loading-text">Loading suggestions...</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Search Bar section -->

            <div id="mobile-only-contact-section">
                                    <div style="margin-bottom: 10px;">
                        <div style="margin: 5px 0;">
                            <a href="https://dev.queensboro.com/a/myaccount" class="mega-menu-link-account-action">
                                <i class="fa fa-user for-small mega-menu-link-icon"></i>
                                My Account
                            </a>
                        </div>

                        <div style="margin: 5px 0;">
                            <a href="https://dev.queensboro.com/cart" class="mega-menu-link-account-action">
                                <i class="fa fa-shopping-cart mega-menu-link-icon"></i>
                                My Cart
                            </a>
                        </div>
                    </div>
                                <!-- Contact Us for Mobile Menu -->
                <div class="nav-btn btn mega-menu-search-container" id="mobile-contact-us-button">
                    <a href="https://dev.queensboro.com/contact-us" >
                        Contact Us
                    </a>
                </div>
                <!-- End Contact Us for Mobile Menu -->
            </div>
        </div>
    </div>
</div>

<style>
    .mega-menu-search-container {
        display: flex;
        align-items: center;
        background-color: white;
        margin-left: 10px;
        width: 240px;
        padding: 0 !important;
        border-radius: 7px;
        border: 1px solid var(--gray-d-10);
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .mega-menu-search-container:focus-within {
        box-shadow: 0 0 0 2px var(--blue);
        background-color: #fff;
    }

    #mega-menu-search {
        flex: 1;
    }

    #search-input.form-control {
        border: none !important;
        background-color: transparent;
        width: 100%;
        box-shadow: none !important;
        color: var(--black-l-40);
    }

    #mega-menu-search-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 6px 10px;
        margin-left: 2px;
        flex: 0 0 auto;
    }

    #mega-menu-search-icon i {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        color: var(--blue);
        transition: color 0.2s ease;
    }

    #mega-menu-search-icon:hover {
        text-decoration: none !important;
    }

    .mega-menu-search-divider {
        width: 1px;
        background-color: var(--gray-d-10);
        align-self: stretch !important;
        margin: 0;
    }

    #mega-menu-search-icon::before,
    #mega-menu-search-icon::after {
        content: none !important; /* removes the extra icon */
    }

    .mega-menu-dropdown-container .sale-menu-label {
        color: var(--blue);
        font-weight: 600;
    }

    #sale-section-container h4 {
        margin: 0 0 15px;
        color: var(--blue-dark);
        font-size: var(--small-font-size);
        font-weight: bold;
    }

    .sale-menu-links,
    .sale-menu-top-sellers {
        text-align: left;
    }

    .sale-menu-cards {
        display: grid;
        grid-template-columns: repeat(3, 210px);
        gap: 20px;
    }

    .sale-menu-cards .product-wrapper {
        margin: 0;
    }

    @media only screen and (min-width: 776px) {
        #sale-section-container {
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px 40px;
            height: auto;
            padding: 24px 32px;
        }
    }

    @media only screen and (min-width: 776px) and (max-width: 999px) {
        #sale-section-container {
            justify-content: flex-start;
        }
    }

    @media only screen and (min-width: 1366px) {
        #sale-menu-container {
            position: relative;
        }

        #sale-section-container {
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            flex-wrap: nowrap;
            width: max-content;
            max-width: 95vw;
        }

        #sale-section-container > .sale-menu-links {
            margin: 0;
        }

        .sale-menu-top-sellers {
            padding-left: 40px;
            border-left: 1px solid var(--gray-d-10);
        }
    }

    @media only screen and (max-width: 775px) {
        #sale-section-container {
            display: block;
        }

        .sale-menu-top-sellers {
            display: none;
        }
    }

    @media only screen and (max-width: 776px) {
        .mega-menu-search-container {
            margin-left: 0;
            /*width: 100%;*/
            padding: 5px 8px;
        }
    }

    /* Search Helper Dropdown Styles */
    .mega-menu-search-wrapper {
        position: relative;
    }

    .search-helper-dropdown {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        background: var(--pure-white);
        border: 1px solid var(--gray-d-10);
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        padding: 12px;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    }

    .search-helper-dropdown.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .search-helper-row {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
    }

    .search-helper-divider {
        height: 1px;
        background: var(--gray-d-10);
        margin: 8px 0;
    }

    .search-helper-chip {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        font-size: var(--x-small-font-size);
        font-weight: var(--medium-font-weight);
        color: var(--black-l-20);
        background: var(--gray);
        border: 1px solid var(--gray-d-10);
        border-radius: 16px;
        cursor: pointer;
        transition: all 0.15s ease;
        white-space: nowrap;
    }

    .search-helper-chip:hover {
        background: var(--gray-d-10);
        border-color: var(--gray-d-20);
    }

    .search-helper-chip.active {
        background: var(--blue);
        border-color: var(--blue);
        color: var(--pure-white);
    }

    .search-helper-chip.active:hover {
        background: var(--blue-hover);
        border-color: var(--blue-hover);
    }

    /* Category suggestion chips - slightly different styling */
    .search-helper-categories {
        flex-wrap: wrap;
    }

    .search-helper-category-chip {
        background: var(--blue-l-90, #e8f4fc);
        border-color: var(--blue-l-70, #b8daef);
    }

    .search-helper-category-chip:hover {
        background: var(--blue-l-80, #d1e9f7);
        border-color: var(--blue-l-60, #9ecce8);
    }

    .search-helper-category-chip.active {
        background: var(--blue);
        border-color: var(--blue);
        color: var(--pure-white);
    }

    .search-helper-category-chip .chip-count {
        opacity: 0.7;
        font-size: 0.85em;
        margin-left: 2px;
    }

    /* Loading state */
    .search-helper-loading {
        display: flex;
        justify-content: center;
        padding: 8px 0;
    }

    .search-helper-loading-text {
        font-size: var(--x-small-font-size, 12px);
        color: var(--black-l-40, #666);
        font-style: italic;
    }

    @media only screen and (max-width: 776px) {
        .search-helper-row {
            flex-wrap: wrap;
        }

        .search-helper-chip {
            padding: 6px 12px;
        }

        .search-helper-divider {
            margin: 10px 0;
        }

        .search-helper-categories {
            justify-content: flex-start;
        }
    }
</style>                            
                            <ul id="right-nav" class="list-inline vert-flex-center">

                                <!-- Customer Alerts -->
                                
                                <!-- Contact Us -->
                                <li class="btn nav-btn btn-primary-dark mr-15" id="contact-us-button">
                                    <a href="https://dev.queensboro.com/contact-us" >
                                        Contact Us
                                    </a>
                                </li>
                                <!-- Upload Logo -->
                                <li class="nav-btn btn btn-primary">
                                    <a href="https://dev.queensboro.com/logo_studio/upload" class="load-logo-upload" style="padding:10px 20px; color:white;">
                                        Upload Logo
                                    </a>
                                </li>

                                <!-- Shopping Cart Button -->
                                                                <li id="cart-in-header" class="nav-btn btn">
                                    <strong id="header-mini-cart" class="account-link">
                                        <span class="dropdown pull-right">
	<a href="https://dev.queensboro.com/cart"
       class="dropdown-toggle load-cart cart-link"
       data-toggle="dropdown"
       style="position: relative;">
        <i class="fa fa-shopping-cart"></i>
        <b class="cart-count"> 0</b>
    </a>
	<ul class="dropdown-menu dropdown-menu-right qb-mini-cart">
		<li>
			<div class="qb-mini-inner">
									<div class="qb-mini-empty">
						Your cart is empty.
											</div>
							</div>
		</li>
	</ul>
</span>
<script src="//dev.queensboro.com/js/qb-rewards.js?v=28d49e54ea6910c71be7.2"></script>
<script>
	$(function(){
        $('#header').on('click', '.load-cart', function(e) {
            if ($(window).width() <= 960) {
                e.preventDefault();
            } else {
                redirect($(this).attr('href'));
            }
        });
        // Desktop hover opens the panel (with a small close delay so the
        // pointer can travel into it); mobile keeps the tap-to-toggle above.
        var $cartWrap = $('#cart-in-header');
        var miniCloseTimer;
        $cartWrap.on('mouseenter', function() {
            if ($(window).width() <= 960) return;
            clearTimeout(miniCloseTimer);
            $cartWrap.find('.dropdown').addClass('open');
        }).on('mouseleave', function() {
            clearTimeout(miniCloseTimer);
            miniCloseTimer = setTimeout(function() {
                $cartWrap.find('.dropdown').removeClass('open');
            }, 200);
        });

        // Line rows navigate to the product's edit flow; the action pair sits
        // on top of that (edit = same link made visible, trash = remove).
        $cartWrap.on('click', '.qb-mini-line[data-url]', function(e) {
            if ($(e.target).closest('.qb-mini-act, .qb-mini-confirm').length) return;
            window.location = $(this).data('url');
        });
        $cartWrap.on('click', '.qb-mini-edit', function(e) {
            e.stopPropagation();
        });

        // Trash confirms with a native dialog, then removes via the same
        // /api_cart/del the cart page uses. The endpoint hands back a fresh
        // CSRF token on every response, so the first attempt mints one and
        // retries once.
        var miniCsrfToken = '';
        function miniCartRemove($line, isRetry) {
            $.post('/api_cart/del', {
                bundle: $line.data('bundle'),
                sgid: $line.data('sgid'),
                style_id: '' + $line.data('styleId'),
                csrf_key: 'header_mini_cart',
                csrf_token: miniCsrfToken
            }, null, 'json').done(function(res) {
                if (res && res.csrf_token) miniCsrfToken = res.csrf_token;
                if (res && res.success) {
                    $line.css({transition: 'opacity .25s ease', opacity: 0});
                    setTimeout(function() { window.location.reload(); }, 250);
                } else if (!isRetry && res && res.csrf_token) {
                    miniCartRemove($line, true);
                } else {
                    window.location.reload();
                }
            }).fail(function() {
                window.location.reload();
            });
        }
        $cartWrap.on('click', '.qb-mini-trash', function(e) {
            e.preventDefault();
            e.stopPropagation();
            var $line = $(this).closest('.qb-mini-line');
            var lineName = $line.find('.qb-mini-name').text().trim();
            var lineImage = $line.find('.qb-mini-thumb img').attr('src') || '';
            // Same modal the cart page's remove button uses.
            if (typeof bootbox !== 'undefined') {
                bootbox.confirm({
                    message: (lineImage ? '<img src="' + lineImage + '" style="max-width: 80px;" />' : '')
                        + '<div class="alert-with-image">'
                        + '<h2 class="danger">Remove Product From Cart</h2>'
                        + '<p class="mb-0">Are you sure you want to remove "<b>' + lineName + '</b>" from your cart?</p></div>',
                    buttons: {
                        'cancel': {
                            label: 'Don\'t Remove',
                            className: 'btn-default'
                        },
                        'confirm': {
                            label: 'Remove',
                            className: 'btn-danger'
                        }
                    },
                    callback: function(confirmed) {
                        if (confirmed) {
                            miniCartRemove($line);
                        }
                    }
                });
            } else if (window.confirm('Remove "' + lineName + '" from your cart?')) {
                miniCartRemove($line);
            }
        });
	});
</script>
<style>
	#header-mini-cart .qb-mini-cart {
		width: 350px; max-width: 92vw; padding: 0; border-radius: 10px;
		border: 1px solid var(--gray); box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
	}
	#header-mini-cart .qb-mini-cart > li { list-style: none; }
	.qb-mini-inner { padding: 14px 14px 12px; }
	.qb-mini-inner .free-ship-meter { margin: 2px 0 12px; }
	.qb-mini-empty { font-size: 15px; color: var(--black); text-align: center; padding: 10px 4px; }
	.qb-mini-start { display: block; margin-top: 8px; font-size: 14px; color: var(--green-dark); font-weight: 600; }
	.qb-mini-lines { max-height: 252px; overflow-y: auto; border-top: 1px solid var(--gray); }
	.qb-mini-line {
		display: flex; gap: 10px; align-items: center; padding: 9px 2px;
		border-bottom: 1px solid var(--gray); text-decoration: none !important; color: var(--black);
		cursor: pointer;
	}
	.qb-mini-line:hover { background: hsl(200, 65%, 97%); }
	.qb-mini-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
	.qb-mini-acts { display: flex; gap: 2px; }
	/* id weight on purpose: the header chrome's `.nav-btn a` rule restyles
	   any anchor in here (display:block + 10px/14px padding) and would knock
	   the pencil off-center */
	#header-mini-cart .qb-mini-act {
		display: inline-flex; align-items: center; justify-content: center;
		width: 26px; height: 26px; border-radius: 7px; color: var(--gray-d-40);
		background: none; border: 0; padding: 0; margin: 0; line-height: 1; cursor: pointer;
		transition: color .12s ease, background-color .12s ease;
	}
	#header-mini-cart .qb-mini-act svg { width: 15px; height: 15px; display: block; }
	#header-mini-cart .qb-mini-edit:hover, #header-mini-cart .qb-mini-edit:focus { color: var(--blue); background: hsl(200, 65%, 93%); }
	#header-mini-cart .qb-mini-trash:hover, #header-mini-cart .qb-mini-trash:focus { color: var(--red-dark); background: hsl(0, 85%, 95%); }
	.qb-mini-thumb {
		width: 44px; height: 44px; flex: 0 0 44px; border-radius: 6px; background: #f6f6f6;
		display: flex; align-items: center; justify-content: center; overflow: hidden;
	}
	.qb-mini-thumb img { max-width: 100%; max-height: 100%; }
	.qb-mini-meta { flex: 1; min-width: 0; text-align: left; }
	.qb-mini-name {
		display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--blue-dark);
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
	.qb-mini-sub { display: block; font-size: 14px; color: var(--gray-d-60); line-height: 1.35; }
	.qb-mini-sub.volume { color: var(--green-dark); font-weight: 600; }
	.qb-mini-total { font-size: 14px; white-space: nowrap; color: var(--black); font-weight: 700; }
	.qb-mini-foot { display: flex; justify-content: space-between; margin-top: 10px; font-size: 15px; color: var(--black); }
	.qb-mini-ctas { display: flex; gap: 8px; margin-top: 10px; }
	#header-mini-cart .qb-mini-ctas .btn { flex: 1; padding: 8px 0; text-align: center; }
</style>
                                    </strong>
                                </li>
                                                            </ul>

                            <span id="tagline">Mon-Fri 8:30AM-6:30PM ET &nbsp;|&nbsp; (800) 847-4478 &nbsp;&nbsp;<a href="javascript:void(0);" class="chat-toggle"><i class="fa fa-comments"></i> Chat Now</a></span>
						</header>
					</div>

                    <!-- Prospect-targeted message banner: existing customers never
                         see it, and dismissal sets a 10-day cookie so later page
                         loads skip it server-side -->
                                        <div class="site-banner">
                        <a href="/honest-pricing">Honest Pricing, Small Business Friendly, Genuine Care | Trust The Queen</a>
                        <button type="button" class="site-banner-dismiss" aria-label="Dismiss this banner">&times;</button>
                    </div>
                    <script>
                        $(function() {
                            $('.site-banner-dismiss').on('click', function() {
                                var expires = new Date(Date.now() + 10 * 24 * 60 * 60 * 1000).toUTCString();
                                document.cookie = 'qb_hide_site_banner=1; expires=' + expires + '; path=/';
                                $('.site-banner').remove();
                                $('body').addClass('no-site-banner');
                            });
                        });
                    </script>
                    
                    <!-- Returns Modal -->
                    <div class="modal fade" id="service-announcement-modal" tabindex="-1" style="z-index:19999;" role="dialog" aria-hidden="true">
                        <div class="modal-dialog return-modal-dialog">
                            <div class="modal-content" style="border-radius: 15px;">
                                <div class="modal-body" style="line-height:25px; padding:40px;">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <img src="https://cdn.queensboro.com/content-pages/site-art/qb-seal-blue.webp"
                                         width="220" height="206"
                                         style="margin: 0 auto 15px; display:block;"
                                         alt="No Returns Necessary Guarantee Seal" />
                                    
        <p>Mistakes get made. Everyone understands that. You ordered a wrong size, we used a wrong thread color. You gave us the wrong date, we sent it to the wrong address. And then there are issues that aren't mistakes but just problems. A button falls off, UPS dropped your box in a puddle, you just don't like the shirts you picked out.</p>
        <p>If anything like this ever happens to you, just let us know. <b>YOU DON'T NEED TO RETURN THE PRODUCT FOR US TO FIX IT!</b> Whether you need a replacement or a refund, it doesn't matter. <b>That's our No Returns Necessary Guarantee.</b></p>
        <p>We've been in business for over 40 years. We trust you and want you to <b>Trust The Queen</b>.</p>
        <p class='mb-0' style='font-size:16px;'><b>A Note about Our Guarantee</b><br>
        Many people think we are crazy to offer this guarantee because it is so easy
        to abuse. Occasionally we run into problems, but our guarantee is one of the
        parts of Queensboro that we are most proud of. There have been times,
        though, when we just can’t satisfy a customer. In those instances, we reserve
        the right to resolve the issue with a refund instead of a replacement. We also
        reserve the right to not accept additional orders that we think are likely to
        repeat the issue. Thank you for understanding this “small print” in our No
        Returns Necessary Guarantee. We are very lucky to work with the best, most
        honest customers in the entire world! We look forward to working with you for
        many years to come!</p>                                </div>
                            </div>
                        </div>
                    </div>
				</div> <!-- end header wrapper -->

                    <!-- Guarantee Modal -->
                    <div class="modal fade" id="guarantee-modal" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog" style="max-width:600px;">
                            <div class="modal-content" style="border-radius: 15px;">
                                <div class="modal-body" style="line-height:25px;">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <img src="https://cdn.queensboro.com/content-pages/site-art/qb-seal-blue.webp"
                                         width="220" height="206"
                                         style="margin: 0 auto 15px; display:block"
                                         alt="No Returns Necessary Guarantee Seal" />
                                    
        <p>Mistakes get made. Everyone understands that. You ordered a wrong size, we used a wrong thread color. You gave us the wrong date, we sent it to the wrong address. And then there are issues that aren't mistakes but just problems. A button falls off, UPS dropped your box in a puddle, you just don't like the shirts you picked out.</p>
        <p>If anything like this ever happens to you, just let us know. <b>YOU DON'T NEED TO RETURN THE PRODUCT FOR US TO FIX IT!</b> Whether you need a replacement or a refund, it doesn't matter. <b>That's our No Returns Necessary Guarantee.</b></p>
        <p>We've been in business for over 40 years. We trust you and want you to <b>Trust The Queen</b>.</p>
        <p class='mb-0' style='font-size:16px;'><b>A Note about Our Guarantee</b><br>
        Many people think we are crazy to offer this guarantee because it is so easy
        to abuse. Occasionally we run into problems, but our guarantee is one of the
        parts of Queensboro that we are most proud of. There have been times,
        though, when we just can’t satisfy a customer. In those instances, we reserve
        the right to resolve the issue with a refund instead of a replacement. We also
        reserve the right to not accept additional orders that we think are likely to
        repeat the issue. Thank you for understanding this “small print” in our No
        Returns Necessary Guarantee. We are very lucky to work with the best, most
        honest customers in the entire world! We look forward to working with you for
        many years to come!</p>                                </div>
                            </div>
                        </div>
                    </div>

				<div class="content-wrapper-outer">
					<div class="content-wrapper">
						<div id="main">
							<!-- start of content wrapper -->
							<div id="main-content" style="opacity: 1%">
							<!-- begin here with individual page content within .container > .row > .col-^ --><div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Sorry for the Technical Difficulties!</h1><br />
                            <p class="lead">Invalid SSO provider</p>
                        <p><a href="https://dev.queensboro.com/">Click here</a> to go to our Home Page, or click your back button to return to your prior page.</p>
            <p><a href="https://dev.queensboro.com/contact-us">Contact us</a>  if you have any questions.</p>
                        <p>Thank You!</p>
        </div>
    </div>
</div>
<div id="hidden_modules" style="display:none;">
    	<!-- ggl_conv_ty_order No Show (CT: N.O.: 0 Internal: no C/T: api_login/)	-->
		</div>
    <input type="hidden" id="js-config" name="js_config" value="{&quot;logo_type_embroidery_id_array&quot;:[1,2,3,6,10,11,13],&quot;logo_type_digital_id_array&quot;:[4,5],&quot;logo_type_hard_id_array&quot;:[7,9],&quot;logo_type_screen_id_array&quot;:[8,12],&quot;upload_validation&quot;:{&quot;max_size_mb&quot;:15,&quot;min_size_kb&quot;:1,&quot;max_dimension&quot;:10000,&quot;max_memory&quot;:512,&quot;allowed_ext&quot;:[&quot;jpg&quot;,&quot;jpeg&quot;,&quot;png&quot;,&quot;gif&quot;,&quot;bmp&quot;,&quot;ai&quot;,&quot;pdf&quot;,&quot;eps&quot;],&quot;allowed_mime&quot;:[&quot;image\/jpeg&quot;,&quot;image\/png&quot;,&quot;image\/gif&quot;,&quot;image\/bmp&quot;,&quot;image\/x-ms-bmp&quot;,&quot;image\/x-eps&quot;,&quot;image\/x-ept&quot;,&quot;application\/pdf&quot;,&quot;application\/postscript&quot;,&quot;application\/illustrator&quot;,&quot;application\/octet-stream&quot;]},&quot;is_devel&quot;:true,&quot;app_url&quot;:&quot;https:\/\/dev.queensboro.com\/&quot;,&quot;cdn_url&quot;:&quot;https:\/\/cdn.queensboro.com\/&quot;,&quot;conflicting_logo_position_ids&quot;:{&quot;2&quot;:[3,44,228],&quot;3&quot;:[2,44,228],&quot;44&quot;:[2,3,228],&quot;228&quot;:[2,3,44],&quot;25&quot;:[64],&quot;64&quot;:[25],&quot;46&quot;:[332,333,994],&quot;332&quot;:[46,992],&quot;333&quot;:[46],&quot;133&quot;:[137,141,321],&quot;137&quot;:[133,141,321],&quot;141&quot;:[133,137,321],&quot;321&quot;:[133,137,141],&quot;992&quot;:[332,993,994],&quot;993&quot;:[992],&quot;994&quot;:[992,46]}}"/>


<div class="feedback-widget">
    <button class="feedback-tab" id="feedbackTab">
        <span class="feedback-tab-text">Feedback</span>
        <span class="feedback-tab-icon">😊</span>
    </button>

    <div class="feedback-modal" id="feedbackModal">
        <div class="feedback-container">
            <div class="feedback-header">
                <button class="close" id="feedbackClose">&times;</button>
                <h2 class="feedback-title" id="feedbackTitle">How would you rate your experience?</h2>
            </div>

            <div class="feedback-body">
                <!-- Step 1: Rating -->
                <div class="feedback-step active" id="step1">
                    <div class="emoji-rating">
                                                <div class="emoji-option" data-rating="1" title="Very Poor">😞</div>
                                                <div class="emoji-option" data-rating="2" title="Poor">😕</div>
                                                <div class="emoji-option" data-rating="3" title="Okay">😐</div>
                                                <div class="emoji-option" data-rating="4" title="Good">😊</div>
                                                <div class="emoji-option" data-rating="5" title="Excellent">😍</div>
                                            </div>
                </div>

                <!-- Step 2: Comment -->
                <div class="feedback-step" id="step2">
                    <div class="form-group">
                        <label class="form-label" for="feedbackComment">Tell us about your experience (optional)</label>
                        <textarea class="form-control textarea" id="feedbackComment" placeholder="What did you like or what could we improve?"></textarea>
                    </div>
                    <div class="feedback-actions">
                        <a href="#" class="feedback-back" id="commentBack">← Back</a>
                        <div class="feedback-buttons">
                            <button class="btn btn-default" id="commentSkip">Skip</button>
                            <button class="btn btn-primary" id="commentNext">Next</button>
                            <button class="btn btn-primary" id="commentSubmit" style="display: none;">Submit Feedback</button>
                        </div>
                    </div>
                </div>

                <!-- Step 3: Email -->
                <div class="feedback-step" id="step3">
                    <div class="form-group">
                        <label class="form-label" for="feedbackEmail">We may want to follow up (optional)</label>
                        <input type="email" class="form-control" id="feedbackEmail" placeholder="your@email.com">
                    </div>
                    <div class="feedback-actions">
                        <a href="#" class="feedback-back" id="emailBack">← Back</a>
                        <div class="feedback-buttons">
                            <button class="btn btn-primary" id="emailSubmit">Submit Feedback</button>
                        </div>
                    </div>
                </div>

                <!-- Step 4: Thank You -->
                <div class="feedback-step" id="step4">
                    <div class="thank-you-content">
                        <div class="thank-you-icon">✓</div>
                        <h3 class="thank-you-title">Thank you for your feedback!</h3>
                        <p class="thank-you-message">We appreciate you taking the time to help us improve your experience.</p>
                    </div>
                </div>

                <!-- Step 5: Positive Experience CTA -->
                <div class="feedback-step" id="step5">
                    <p class="feedback-prompt" id="ctaPrompt">Here&#039;s how you can share the love:</p>
                    <div class="feedback-cta-list">
                                                    <a href="https://www.trustpilot.com/evaluate/www.queensboro.com"
                               target="_blank" rel="noopener" class="feedback-cta-card" id="ctaTrustpilot" data-cta="review">
                                <span class="feedback-cta-icon"><i class="fa fa-star"></i></span>
                                <span class="feedback-cta-title">Leave a Review</span>
                                <span class="feedback-cta-sub">Tell others on Trustpilot</span>
                            </a>
                                                                            <a href="https://dev.queensboro.com/a/referral" target="_blank" rel="noopener"
                               class="feedback-cta-card" id="ctaReferralSignIn" data-cta="referral">
                                <span class="feedback-cta-icon"><i class="fa fa-gift"></i></span>
                                <span class="feedback-cta-title">Refer a Friend</span>
                                <span class="feedback-cta-sub">Sign in to get your referral link.</span>
                            </a>
                                            </div>
                                    </div>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    const FeedbackWidget = {
        // Configuration loaded from PHP
        config: {"display_internal":false,"interaction_cookie_name":"feedback_widget_interacted","days_til_can_show_again":15,"positive_rating_threshold":4,"text":{"tab_text":"Feedback","tab_icon":"\ud83d\ude0a","step1_title":"How would you rate your experience?","step2_title":"Tell us more","step3_title":"Stay in touch","step4_title":"Thank you!","step5_title":"Thank you!","step5_prompt":"Here's how you can share the love:","cta_review":"Leave a Review","cta_review_sub":"Tell others on Trustpilot","cta_referral":"Refer a Friend","cta_referral_sub":"Get a %s credit when their order ships.","cta_referral_signin_sub":"Sign in to get your referral link.","cta_referral_locked_sub":"Available after your first order ships.","copy_button":"Copy","copy_success":"Copied!","copy_failed":"Failed","referral_intro":"Share your link \u2014 get a %s credit when their order ships.","comment_label":"Tell us about your experience (optional)","comment_placeholder":"What did you like or what could we improve?","email_label":"We may want to follow up (optional)","email_placeholder":"your@email.com","thank_you_message":"We appreciate you taking the time to help us improve your experience."}},
        
        // Page information from PHP
        currentPage: 'default',
        isMobile: false,
        pageRule: {"enabled":true,"delay":45,"show_on_mobile":false},
        shouldShowWidget: true,
        
        // Widget state
        currentStep: 1,
        selectedRating: 0,
        comment: '',
        email: '',
        isLoggedIn: false,
        hasEmail: false,
        trustpilotUrl: "https:\/\/www.trustpilot.com\/evaluate\/www.queensboro.com",
        referralUrl: "",
        ratingTimer: null,
        submitting: false,
        ctaDone: {},

        init: function() {
            // Check if widget should be shown based on page rules
            if (!this.shouldShowWidget) {
                return; // Don't show widget based on page/mobile rules
            }
            
            // Check if user has already interacted with feedback widget (unless in debug mode)
            if (this.hasInteractedRecently()) {
                return; // Don't show the widget
            }
            
            // Don't show to employees/internal users unless display_internal is enabled
                        if (!this.config.display_internal && false) {
                return; // Don't show the widget to employees
            }
            
            this.checkUserStatus();
            this.bindEvents();
            
            // Show widget after configured delay for this page
            const delay = (this.pageRule.delay * 1000);
            setTimeout(() => {
                this.showTab();
            }, delay);
        },


        hasInteractedRecently: function() {
            // Check for feedback interaction cookie
            const feedbackCookie = this.getCookie(this.config.interaction_cookie_name);
            return feedbackCookie !== null;
        },


        setInteractionCookie: function() {
            const expires = new Date();
            expires.setTime(expires.getTime() + (this.config.days_til_can_show_again * 24 * 60 * 60 * 1000));
            document.cookie = `${this.config.interaction_cookie_name}=1; expires=${expires.toUTCString()}; path=/`;
        },

        getCookie: function(name) {
            const nameEQ = name + "=";
            const ca = document.cookie.split(';');
            for (let i = 0; i < ca.length; i++) {
                let c = ca[i];
                while (c.charAt(0) === ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        },

        checkUserStatus: function() {
            // Check if user is logged in by looking for customer-specific elements or data
            // This is a simple check - you may need to adjust based on your site's implementation
                    },

        bindEvents: function() {
            // Show/hide modal
            $('#feedbackTab').on('click', () => this.showModal());
            $('#feedbackClose').on('click', () => this.hideModal());
            $('#feedbackModal').on('click', (e) => {
                if (e.target.id === 'feedbackModal') {
                    this.hideModal();
                }
            });

            // Rating selection
            $('.emoji-option').on('click', (e) => {
                this.selectRating($(e.currentTarget));
            });

            // Navigation buttons
            $('#commentSkip, #commentNext').on('click', () => {
                if (this.isLoggedIn && this.hasEmail) {
                    this.submitFeedback(); // Submit directly for logged in users
                } else {
                    this.goToStep(3); // Go to email step for non-logged in users
                }
            });
            $('#commentSubmit').on('click', () => {
                this.submitFeedback();
            });
            $('#commentBack').on('click', (e) => {
                e.preventDefault();
                this.goToStep(1);
            });
            $('#ctaTrustpilot').on('click', () => {
                this.markCtaDone('review');
            });
            $('#ctaReferralSignIn').on('click', () => {
                this.markCtaDone('referral');
            });
            $('#ctaReferral').on('click', () => {
                this.showReferralLink();
                this.markCtaDone('referral');
            });
            $('#copyReferralLink').on('click', () => {
                const $btn = $('#copyReferralLink');
                if (!navigator.clipboard) {
                    $('#referralLinkInput').select();
                    return;
                }
                navigator.clipboard.writeText(this.referralUrl).then(() => {
                    $btn.text(this.config.text.copy_success).removeClass('btn-primary').addClass('btn-success');
                    setTimeout(() => {
                        $btn.text(this.config.text.copy_button).removeClass('btn-success').addClass('btn-primary');
                    }, 2000);
                }, () => {
                    $btn.text(this.config.text.copy_failed).removeClass('btn-primary').addClass('btn-danger');
                    setTimeout(() => {
                        $btn.text(this.config.text.copy_button).removeClass('btn-danger').addClass('btn-primary');
                    }, 2000);
                    $('#referralLinkInput').select();
                });
            });
            $('#emailSubmit').on('click', () => {
                this.submitFeedback();
            });
            $('#emailBack').on('click', (e) => {
                e.preventDefault();
                this.goToStep(2);
            });

            // Handle escape key
            $(document).on('keydown', (e) => {
                if (e.key === 'Escape' && $('#feedbackModal').hasClass('show')) {
                    this.hideModal();
                }
            });
        },


        showTab: function() {
            // First slide in
            $('#feedbackTab').addClass('show');
            
            // Then add bounce effect after slide completes
            setTimeout(() => {
                $('#feedbackTab').addClass('bounce-in');
                // Remove bounce class after animation completes
                setTimeout(() => {
                    $('#feedbackTab').removeClass('bounce-in');
                }, 1000);
            }, 300);
        },

        showModal: function() {
            // Set interaction cookie when user opens the feedback modal
            this.setInteractionCookie();
            
            $('#feedbackModal').addClass('show');
            $('body').css('overflow', 'hidden');
        },

        hideModal: function() {
            clearTimeout(this.ratingTimer);
            $('#feedbackModal').removeClass('show');
            $('body').css('overflow', '');

            if (this.currentStep === 5) {
                this.hideFeedbackTab();
                this.reset();
            }
        },

        hideFeedbackTab: function() {
            $('#feedbackTab').addClass('slide-out-right');
            // Remove the tab from DOM after animation completes
            setTimeout(() => {
                $('#feedbackTab').remove();
            }, 300);
        },

        selectRating: function($element) {
            this.selectedRating = parseInt($element.data('rating'));
            $('.emoji-option').removeClass('selected');
            $element.addClass('selected');

            clearTimeout(this.ratingTimer);
            this.ratingTimer = setTimeout(() => {
                if (this.shouldShowCtaStep()) {
                    $('.emoji-rating').addClass('submitting');
                    this.submitFeedback();
                } else {
                    this.goToStep(2);
                }
            }, 500);
        },

        shouldShowCtaStep: function() {
            return this.selectedRating >= this.config.positive_rating_threshold
                && !!(this.trustpilotUrl || this.referralUrl);
        },

        goToStep: function(step) {
            this.currentStep = step;
            $('.feedback-step').removeClass('active');
            $(`#step${step}`).addClass('active');

            // Update header text based on step
            const titles = {
                1: this.config.text.step1_title,
                2: this.config.text.step2_title,
                3: this.config.text.step3_title,
                4: this.config.text.step4_title,
                5: this.config.text.step5_title
            };

            $('#feedbackTitle').text(titles[step]);

            // Show/hide appropriate buttons based on step and login status
            if (step === 2) {
                if (this.isLoggedIn && this.hasEmail) {
                    // Show submit button instead of next/skip for logged in users
                    $('#commentNext, #commentSkip').hide();
                    $('#commentSubmit').show();
                } else {
                    // Show next/skip buttons for non-logged in users
                    $('#commentNext, #commentSkip').show();
                    $('#commentSubmit').hide();
                }
            }
        },

        showReferralLink: function() {
            $('#referralLinkBox').slideDown(150);
            $('#referralLinkInput').select();
        },

        markCtaDone: function(cta) {
            if (this.ctaDone[cta]) return;
            this.ctaDone[cta] = true;

            $(`#step5 .feedback-cta-card[data-cta="${cta}"]`).addClass('done');
            this.logCtaClick(cta);
        },

        logCtaClick: function(cta) {
            $.ajax({
                url: '/api_feedback/cta_click.html',
                type: 'POST',
                dataType: 'json',
                data: {
                    cta: cta,
                                        csrf_key: 'footer',
                    csrf_token: '32576f424d2fa8e3b3d1bdcfae42e31867ecd3fbda4c525d2bc8ba3059952fed'
                                    }
            });
        },

        showThankYouAndClose: function() {
            this.goToStep(4);
            setTimeout(() => {
                this.hideModal();
                this.hideFeedbackTab();
                this.reset();
            }, 2650);
        },

        submitFeedback: function() {
            if (this.submitting) return;
            this.submitting = true;

            // Collect form data
            this.comment = $('#feedbackComment').val().trim();
            
            // For logged-in users, use the pre-filled email; for others, get from form
            if (this.isLoggedIn && this.hasEmail) {
                // Email is already set from PHP in checkUserStatus()
            } else {
                this.email = $('#feedbackEmail').val().trim();
            }

            // Validate email if provided
            if (this.email && !this.isValidEmail(this.email)) {
                this.submitting = false;
                $('.emoji-rating').removeClass('submitting');
                alert('Please enter a valid email address or leave it blank.');
                return;
            }

            // Show loading state
            $('#emailSubmit, #commentSubmit').prop('disabled', true).text('Submitting...');

            // Prepare data
            const feedbackData = {
                page_path: window.location.pathname,
                emoji_rating: this.selectedRating,
                comment: this.comment,
                email: this.email,
                                csrf_key: 'footer',
                csrf_token: '32576f424d2fa8e3b3d1bdcfae42e31867ecd3fbda4c525d2bc8ba3059952fed'
                            };

            // Submit feedback
            $.ajax({
                url: '/api_feedback/submit.html',
                type: 'POST',
                data: feedbackData,
                dataType: 'json',
                success: (response) => {
                    this.submitting = false;
                    $('.emoji-rating').removeClass('submitting');
                    if (response.status === 'success') {
                        // Ensure cookie is set on successful submission
                        this.setInteractionCookie();

                        if (this.shouldShowCtaStep()) {
                            this.goToStep(5);
                        } else {
                            this.showThankYouAndClose();
                        }
                    } else {
                        alert(response.message || 'Something went wrong. Please try again.');
                        $('#emailSubmit, #commentSubmit').prop('disabled', false).text('Submit Feedback');
                        if (this.currentStep === 1) this.goToStep(2);
                    }
                },
                error: () => {
                    this.submitting = false;
                    $('.emoji-rating').removeClass('submitting');
                    alert('Something went wrong. Please try again.');
                    $('#emailSubmit, #commentSubmit').prop('disabled', false).text('Submit Feedback');
                    if (this.currentStep === 1) this.goToStep(2);
                }
            });
        },

        isValidEmail: function(email) {
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return emailRegex.test(email);
        },

        reset: function() {
            this.currentStep = 1;
            this.selectedRating = 0;
            this.comment = '';
            this.email = '';
            
            $('.feedback-step').removeClass('active');
            $('#step1').addClass('active');
            $('.emoji-option').removeClass('selected');
            $('#feedbackComment').val('');
            $('#feedbackEmail').val('');
            $('#emailSubmit, #commentSubmit').prop('disabled', false).text('Submit Feedback');
            
            $('#feedbackTitle').text(this.config.text.step1_title);

            $('#referralLinkBox').hide();
            $('#ctaPrompt').show();
            $('#step5 .feedback-cta-card').removeClass('done');
            this.ctaDone = {};
            $('#copyReferralLink').text(this.config.text.copy_button).removeClass('btn-success btn-danger').addClass('btn-primary');
            this.submitting = false;
            $('.emoji-rating').removeClass('submitting');
        }
    };

    // Initialize the widget
    FeedbackWidget.init();
});
</script>

<style>
    .feedback-widget {
        z-index: 9999;
        
        .feedback-tab {
            position: fixed;
            right: 0;
            top: 50%;
            transform: translateY(-50%) translateX(100%);
            background: var(--primary);
            color: white;
            padding: 10px 8px;
            border-radius: 8px 0 0 8px;
            cursor: pointer;
            box-shadow: 0 1px 2px rgb(0 0 0 / 20%), 0 -3px 0 rgb(0 0 0 / 10%) inset;
            font-weight: var(--heavy-font-weight);
            font-size: var(--xs-font-size);
            transition: transform 0.3s ease;
            border: none;
            outline: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            z-index: 9999;

            &.show {
                transform: translateY(-50%) translateX(0);
                transition: transform 0.3s ease;
            }

            &.bounce-in {
                animation: bounceIn 1s ease;
            }

            &.slide-out-right {
                animation: slideOutRight 0.3s ease forwards;
            }

            &:hover {
                background: var(--blue-hover);
                transform: translateY(-50%) translateX(-5px);
            }
        }

        .feedback-tab-text {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            text-align: center;
            line-height: 1.2;
            margin-bottom: 2px;
        }

        .feedback-tab-icon {
            font-size: 16px;
            opacity: 0.8;
            display: block;
            line-height: 1;
        }

        .feedback-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            z-index: 10000;

            &.show {
                display: block;
            }
        }

        .feedback-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 1px 2px rgb(0 0 0 / 20%), 0 -3px 0 rgb(0 0 0 / 10%) inset;
            width: 90%;
            max-width: 400px;
            max-height: 90vh;
            overflow: hidden;
            position: fixed;
            top: 50%;
            right: 80px;
            transform: translateY(-50%);
            animation: slideInFromRight 0.3s ease;
        }

        .feedback-header {
            background: var(--primary);
            color: white;
            padding: 16px 20px 12px;
            position: relative;

            .close {
                color: white;
            }
        }

        .feedback-body {
            padding: 20px;
        }

        .feedback-step {
            display: none;
            text-align: center;

            &.active {
                display: block;
            }
        }

        .feedback-title {
            font-size: var(--regular-font-size);
            font-weight: var(--x-heavy-font-weight);
            margin: 0 0 6px;
            color: white;
        }

        .emoji-rating {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin: 16px 0;
        }

        .emoji-rating.submitting {
            opacity: 0.5;
            pointer-events: none;
        }

        .emoji-option {
            font-size: 36px;
            cursor: pointer;
            padding: 8px;
            border-radius: 50%;
            transition: all 0.2s ease;
            opacity: 0.9;
            background: var(--gray);
            border: 2px solid transparent;

            &:hover {
                opacity: 1;
                transform: scale(1.05);
                border-color: var(--primary);
            }

            &.selected {
                opacity: 1;
                background: var(--blue-light);
                border-color: var(--primary);
                transform: scale(1.1);
            }
        }

        .form-group {
            margin-bottom: 16px;
            text-align: left;
        }

        .form-label,
        .feedback-prompt {
            display: block;
            font-weight: var(--heavy-font-weight);
            margin-bottom: 6px;
            color: var(--black);
            font-size: var(--xs-font-size);
        }

        .feedback-cta-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 15px 0 12px;
        }

        .feedback-cta-card {
            flex: 1 1 0;
            min-width: 130px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 16px 12px;
            border: 1px solid var(--gray-d-20);
            border-radius: 8px;
            background: white;
            font: inherit;
            color: inherit;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .feedback-cta-card:hover,
        .feedback-cta-card:focus {
            border-color: var(--primary);
            box-shadow: 0 1px 4px rgb(0 0 0 / 10%);
            text-decoration: none;
        }

        .feedback-cta-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: hsl(var(--blue-h), var(--blue-s), 93%);
            color: var(--primary);
            font-size: var(--regular-font-size);
        }

        .feedback-cta-title {
            font-size: var(--small-font-size);
            font-weight: var(--x-heavy-font-weight);
            color: var(--black);
        }

        .feedback-cta-sub {
            font-size: var(--xs-font-size);
            font-weight: var(--medium-font-weight);
            color: var(--gray-d-60);
            line-height: 1.3;
        }

        .feedback-cta-card.done,
        .feedback-cta-card.done:hover {
            border-color: var(--success);
            background: var(--gray);
        }

        .feedback-cta-card.done .feedback-cta-icon {
            background: var(--success);
            color: white;
        }

        .feedback-cta-card.locked {
            cursor: default;
            background: var(--gray);
            border-style: dashed;
        }

        .feedback-cta-card.locked .feedback-cta-title,
        .feedback-cta-card.locked .feedback-cta-sub {
            color: var(--gray-d-60);
        }

        .feedback-cta-card.locked .feedback-cta-icon {
            background: var(--gray-d-20);
            color: var(--gray-d-60);
        }

        .feedback-cta-card.locked:hover,
        .feedback-cta-card.locked:focus {
            border-color: var(--gray-d-20);
            box-shadow: none;
        }

        .feedback-referral-link {
            border: 1px solid var(--gray-d-20);
            border-radius: 8px;
            background: hsl(var(--blue-h), var(--blue-s), 97%);
            padding: 16px;
            margin-top: 12px;
            text-align: center;
        }

        .feedback-referral-intro {
            font-size: var(--xs-font-size);
            font-weight: var(--medium-font-weight);
            color: var(--gray-d-60);
            line-height: 1.4;
            margin: 0 0 12px;
        }

        .referral-link-copy .btn {
            flex: 0 0 auto;
            padding: 0 18px;
            font-size: var(--xs-font-size);
        }

        .referral-link-copy .btn-primary {
            background-color: var(--primary);
            border-color: var(--primary);
            color: white;
        }

        .referral-link-copy .btn-primary:hover,
        .referral-link-copy .btn-primary:focus {
            background-color: var(--blue-hover);
            border-color: var(--blue-hover);
            color: white;
        }

        .form-control {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--gray-d-20);
            border-radius: 4px;
            font-size: var(--xs-font-size);
            transition: border-color 0.2s ease;
            box-sizing: border-box;

            &:focus {
                outline: none;
                border-color: var(--primary);
                box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
            }

            &.textarea {
                resize: vertical;
                min-height: 80px;
                line-height: 1.4;
            }
        }

        .feedback-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }

        .feedback-back {
            color: var(--primary);
            text-decoration: none;
            font-size: var(--xs-font-size);
            font-weight: var(--medium-font-weight);

            &:hover {
                text-decoration: underline;
                color: var(--blue-hover);
            }
        }

        .feedback-buttons {
            display: flex;
            gap: 8px;
        }

        .referral-link-copy {
            display: flex;
            gap: 8px;
            margin-top: 0px;
        }

        .referral-link-copy .form-control {
            font-size: var(--x-small-font-size);
            flex: 1;
            cursor: text;
            border-radius: 8px;
        }

        .thank-you-content {
            text-align: center;
            padding: 16px 0;
        }

        .thank-you-icon {
            font-size: 40px;
            color: var(--success);
            margin-bottom: 12px;
        }

        .thank-you-title {
            font-size: var(--large-font-size);
            font-weight: var(--x-heavy-font-weight);
            color: var(--black);
            margin-bottom: 6px;
        }

        .thank-you-message {
            color: var(--gray-d-40);
            line-height: 1.4;
            font-size: var(--xs-font-size);
        }
    }

    @keyframes slideInFromRight {
        from {
            opacity: 0;
            transform: translateY(-50%) translateX(50px);
        }
        to {
            opacity: 1;
            transform: translateY(-50%) translateX(0);
        }
    }

    @keyframes bounceIn {
        0%, 20%, 40%, 60%, 80% {
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        }
        0% {
            transform: translateY(-50%) translateX(0) scale3d(1, 1, 1);
        }
        20% {
            transform: translateY(-50%) translateX(0) scale3d(1.1, 1.1, 1.1);
        }
        40% {
            transform: translateY(-50%) translateX(0) scale3d(.9, .9, .9);
        }
        60% {
            transform: translateY(-50%) translateX(0) scale3d(1.03, 1.03, 1.03);
        }
        80% {
            transform: translateY(-50%) translateX(0) scale3d(.97, .97, .97);
        }
        100% {
            transform: translateY(-50%) translateX(0) scale3d(1, 1, 1);
        }
    }

    @keyframes slideOutRight {
        from {
            transform: translateY(-50%) translateX(0);
            opacity: 1;
        }
        to {
            transform: translateY(-50%) translateX(100%);
            opacity: 0;
        }
    }

    @media (max-width: 768px) {
        .feedback-widget {
            .feedback-container {
                width: 95%;
                max-width: 350px;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
            }

            .feedback-header,
            .feedback-body {
                padding: 16px;
            }

            .emoji-option {
                font-size: 30px;
                padding: 6px;
            }

            .feedback-actions {
                gap: 8px;
            }
        }
    }
</style>
<script>
$(document).ready(function() {
    const AutoCustomerEngagement = {
        config: {
            checkInterval: 30000, // Check every 30 seconds
            maxChecks: 20, // Maximum number of checks (10 minutes total)
            enabled: true,
            debug: false // Debug mode
        },
        
        checkCount: 0,
        intervalId: null,
        hasTriggered: false,

        init: function() {
            if (!this.config.enabled) {
                this.log('Auto Customer Engagement is disabled');
                return;
            }

            this.log('Initializing Auto Customer Engagement - Server will handle all validation');
            this.startMonitoring();
        },

        startMonitoring: function() {
            this.log('Starting periodic server checks');
            
            // Initial check after 30 seconds
            setTimeout(() => {
                this.checkServer();
            }, 30000);

            // Set up interval for subsequent checks
            this.intervalId = setInterval(() => {
                this.checkServer();
            }, this.config.checkInterval);
        },

        checkServer: function() {
            if (this.hasTriggered) {
                this.log('Already triggered, stopping monitoring');
                this.stopMonitoring();
                return;
            }

            if (this.checkCount >= this.config.maxChecks) {
                this.log('Maximum checks reached, stopping monitoring');
                this.stopMonitoring();
                return;
            }

            this.checkCount++;
            this.log('Server check #' + this.checkCount);

            // Let server decide everything - single API call
            $.ajax({
                url: '/api_cart/trigger_auto_engagement',
                type: 'POST',
                dataType: 'json',
                success: (response) => {
                    this.log('Server response:', response);
                    
                    if (response.status === 'success') {
                        this.log('Engagement notification sent successfully!');
                        this.hasTriggered = true;
                        this.stopMonitoring();
                        this.trackEngagement(response);
                    } else {
                        this.log('Server says: ' + response.message);
                        // Continue checking - server will decide when ready
                    }
                },
                error: (xhr, status, error) => {
                    this.log('Server error:', error);
                    // Continue checking despite error
                }
            });
        },

        stopMonitoring: function() {
            if (this.intervalId) {
                clearInterval(this.intervalId);
                this.intervalId = null;
                this.log('Stopped monitoring');
            }
        },

        trackEngagement: function(response) {
            // Track with HotJar if available
            if (typeof hj === 'function') {
                hj('event', 'auto_engagement_triggered', {
                    cart_total: response.cart_total,
                    cart_id: response.cart_id
                });
            }

            // Track with Google Analytics if available
            if (typeof gtag === 'function') {
                gtag('event', 'auto_engagement_triggered', {
                    'event_category': 'customer_engagement',
                    'event_label': 'automated',
                    'value': Math.round(response.cart_total || 0)
                });
            }

            this.log('Engagement tracked');
        },

        log: function(message, data) {
            if (this.config.debug) {
                if (data !== undefined) {
                    console.log('[AutoCustomerEngagement]', message, data);
                } else {
                    console.log('[AutoCustomerEngagement]', message);
                }
            }
        },

        // Manual trigger for testing (can be called from console)
        manualTrigger: function() {
            this.log('Manual trigger requested');
            this.checkServer();
        },

        // Get current status for debugging
        getStatus: function() {
            return {
                hasTriggered: this.hasTriggered,
                checkCount: this.checkCount,
                isMonitoring: this.intervalId !== null,
                config: this.config
            };
        }
    };

    // Expose to global scope for debugging
    window.AutoCustomerEngagement = AutoCustomerEngagement;

    // Initialize the engagement system
    AutoCustomerEngagement.init();
});
</script>

<!-- ^^ end of individual page content within .container > .row > .col-^ -->
</div> <!-- end #main-content -->
    <div id="content-loader" class="spin-wrapper" style="background-image: url('https://cdn.queensboro.com/content-pages/site-art/the-queen-blue.webp')">
        <i class="spin extra-large"></i>
    </div>
</div> <!-- end #main -->
</div> <!-- end .content-wrapper -->
</div><!-- end .content-wrapper-outer -->
</div> <!-- end #main-container -->
    <div id="global-email-form-wrapper">
        <section id="global-email-form" class="email-signup-form fixed">
            <div class="email-signup-message">
                <div class="container">
                    <div id="email-step" class="row">
                        <div id="upper-message-b" class="col-lg-7 col-md-12 email-form-message">
                            <strong>Like Deals?</strong> Sign up and we will send you a great one every day. Unsubscribe
                            anytime!
                        </div>
                        <div class="col-lg-5 col-md-12">
                            <form class="email-form-inputs form-group">
                                <input id="global-email-input" type="email" class="form-control global-email-input"
                                       placeholder="email@example.com">
                                <input type="hidden" name="csrf_key" value="footer"/>
                                <input type="hidden" name="csrf_token" value="32576f424d2fa8e3b3d1bdcfae42e31867ecd3fbda4c525d2bc8ba3059952fed"/>
                                <button type="button" class="btn btn-primary-dark">Sign Up</button>
                                <div class="email-warning-message alert alert-warning mt-3 mb-0"
                                     style="display: none; max-width: 600px; padding: 5px 10px; font-size: var(--xs-font-size);"></div>
                                <input type="hidden" name="undeliverable_email_address" value="false">
                            </form>
                        </div>
                    </div>
                </div>

                <div id="frequency-step" style="display:none;">
                    <div class="email-form-message">Select Email Frequency:</div>
                    <div id="radioBtn" class="btn-group" style="margin-bottom:15px;">
                                                    <a class="btn btn-primary email-reg-btn"
                               data-title="0">All offers </a>
                                                    <a class="btn btn-primary email-reg-btn"
                               data-title="5">Twice a week </a>
                                                    <a class="btn btn-primary email-reg-btn"
                               data-title="6">Twice a Month </a>
                                            </div>
                </div>
            </div>

            <i class="fa fa-close" id="hide-global-email" data-toggle="tooltip" data-placement="left"
               title="Dismiss"></i>
        </section>
    </div>

    <script>
        var globalEmailScroll;

        function gtsContainerFixed() {
            $('#global-email-form-wrapper').before($('#gts_container'));
            $('#gts_container').removeClass('absolute');
            $('#gts_container').css('bottom', -4);
            $('div.pagescrollup').css('bottom', 75);
        }

        function gtsContainerAbsolute() {
            $('#gts_container').prependTo('#global-email-form');
            $('#gts_container').addClass('absolute');
            $('#gts_container').css('bottom', $('#global-email-form').outerHeight());
            $('div.pagescrollup').css('bottom', $('#gts_container').outerHeight() + $('#global-email-form').outerHeight() + 15);
        }

        $(document).ready(function () {
            globalEmailScroll = true;
            if (!Cookies.get('qbformscroll')) {
                var isWideViewport = $(window).width() > 640;

                if (isWideViewport) {
                    gtsContainerAbsolute();
                    $(window).on('scroll', function () {
                        if (globalEmailScroll) {
                            if ($(window).scrollTop() >= $(document).height() - $(window).height() -
                                $('#footer').outerHeight() - $('#global-email-form').outerHeight()) {
                                $('#global-email-form').removeClass('fixed');
                                if ($('#gts_container').hasClass('absolute')) {
                                    gtsContainerFixed();
                                }
                            } else if (!onVideoPage()) {
                                $('#global-email-form').addClass('fixed');
                                if (!$('#gts_container').hasClass('absolute')) {
                                    gtsContainerAbsolute();
                                }
                                if ($('.pagescrollup').css('bottom') !== $('#gts_container').outerHeight() +
                                    $('#global-email-form').outerHeight() + 15) {
                                    $('.pagescrollup').css('bottom', $('#gts_container').outerHeight() +
                                        $('#global-email-form').outerHeight() + 15);
                                }
                            } else {  // We're either on desktop-un-videos or one of it's clones, and should always stay fixed
                                if ($('#gts_container').hasClass('absolute')) {
                                    gtsContainerFixed();
                                }
                            }
                        }
                    });
                    $(window).resize(function () {
                        if ($('#gts_container').css('bottom') !== $('#global-email-form').outerHeight() &&
                            $('#gts_container').hasClass('absolute')) {
                            $('#gts_container').css('bottom', $('#global-email-form').outerHeight() - 1);
                            $('div.pagescrollup').css('bottom', $('#gts_container').outerHeight() +
                                $('#global-email-form').outerHeight() + 15);
                        }
                    });
                    $(window).on('load', function () {
                        $(document).on('refreshLoggedIn', function () {
                            globalEmailScroll = false;
                            gtsContainerFixed();
                        });
                    });
                    $('#global-email-form button').click(function () {
                        globalEmailScroll = false;
                        gtsContainerFixed();
                    });
                }
            }

            // Dismiss works on every viewport width (handler used to be trapped
            // inside the width > 640 gate, so the × did nothing on real phones).
            $('#hide-global-email').on('click', function () {
                $('#global-email-form').removeClass('fixed');
                globalEmailScroll = false;
                Cookies.set('qbformscroll', 'nope', {expires: 3, path: '/'});
                if (isWideViewport) {
                    gtsContainerFixed();
                }
            });
        });
    </script>

<!-- BEGIN FOOTER -->
<div id="footer" class="container-fluid bg-primary-dark">
    <div class="row no-gutters">
        <div id="emb-video" class="col-lg-6 hidden-md hidden-xs hidden-sm">
            <h3>WATCH US WORK!</h3>
            <div class="yt-click" data-id="ZCXP61Zd9X0" style="cursor: pointer;">
                <img src="https://cdn.queensboro.com/content-pages/site-art/youtube-thumbnail.webp"
                     alt="Video of logos being embroidered by Queensboro"
                     width="560" height="315"
                     class="img-responsive">
            </div>
            <script>
                $('.yt-click').one('click', function () {
                    const $wrapper = $(this);
                    const videoId = $wrapper.data('id');
                    const $iframe = $('<iframe>', {
                        width: 560,
                        height: 315,
                        src: `https://www.youtube.com/embed/${videoId}?autoplay=1`,
                        title: 'Video of logos being embroidered by Queensboro',
                        frameborder: 0,
                        allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share',
                        allowfullscreen: true
                    });
                    /* swap thumbnail → iframe */
                    $wrapper.empty().append($iframe);
                });
            </script>
        </div>

        <div class="col-md-3">
            <h3>ABOUT US</h3>
            <ul>
                <li><a href="https://dev.queensboro.com/about">Get to Know Queensboro</a></li>
                <li><a href="https://dev.queensboro.com/our-mission">Our Mission</a></li>
                <li><a href="https://dev.queensboro.com/careers">Careers</a></li>
                <li><a href="https://dev.queensboro.com/donations">Donations</a></li>
            </ul>

            <ul id="contact-us">
                <li class="mb-5">
                    <a href="#" class="schedule-call-trigger"><i
                                class="fa fa-phone icon-circle" style="color: var(--primary)"></i>Schedule a Call</a>
                </li>
                <li class="mb-5">
                    <a href="javascript:void(0);" class="chat-link"><i class="fa fa-comment icon-circle"
                                                                       style="color: var(--primary)"></i>Live Chat
                        Now</a>
                </li>
                <li>
                    <a href="https://dev.queensboro.com/contactus.html"><i class="fa fa-envelope icon-circle"
                                                               style="color: var(--primary)"></i>Send us an Email</a>
                </li>
            </ul>
        </div>
        <div class="col-md-3">
            <h3>SERVICE CENTER</h3>
            <ul>
                <li><a href="https://dev.queensboro.com/a/myaccount">My Account</a></li>
                <li><a href="https://dev.queensboro.com/our-promise">No Returns Necessary Guarantee</a></li>
                <li><a href="https://dev.queensboro.com/a/referral">Refer a Friend - Earn $25</a></li>
                <li><a href="https://dev.queensboro.com/queensboroplus">QueensboroPlus</a></li>
                <li><a href="https://dev.queensboro.com/shipping-info">Shipping Information</a></li>
            </ul>

            <h3>FOLLOW US</h3>
            <div id="social-media-links">
                <ul class="list-inline colorless-links big-in-footer" style="display:inline;">
                                            <li><a href="https://www.facebook.com/queensboro" target="_blank" rel="noopener"
                               class="facebook social-media-links" title="Queensboro on Facebook"><i
                                        class="fa fa-facebook icon-circle-blue"></i></a></li>
                        <li><a href="https://www.twitter.com/queensborousa" target="_blank" rel="noopener"
                               class="twitter social-media-links" title="Queensboro on Twitter"><i
                                        class="fa fa-twitter icon-circle-blue"></i></a></li>
                        <li><a href="https://www.instagram.com/queensborousa" target="_blank" rel="noopener"
                               class="instagram social-media-links" title="Queensboro on Instagram"><i
                                        class="fa fa-instagram icon-circle-blue"></i></a></li>
                        <li><a href="https://www.linkedin.com/company/queensboro" rel="noopener" target="_blank"
                               class="youtube social-media-links" title="Queensboro on Linkedin"><i
                                        class="fa fa-linkedin icon-circle-blue"></i></a></li>
                                        </ul>
            </div>
        </div>
    </div>

    <div class="row" style="margin-top: 60px">
        <div class="col-md-4">
            <ul class="list-inline text-center">
                <li><a class="mr-30" href="https://dev.queensboro.com/privacy-policy">Privacy Policy</a></li>
                <li><a href="https://dev.queensboro.com/terms-conditions">Terms and Conditions</a></li>
            </ul>
        </div>
        <div class="col-md-4" style="text-align: center">
            <span>&copy; 2026 Queensboro.com</span>
        </div>
        <div class="col-md-4" style="text-align: center">
                                        <form method="post" class="form-inline">
                    <input type="text" name="subsite_alias" placeholder="Subsite Alias" value=""/>
                    <button type="submit" class="btn btn-primary">Enter</button>
                </form>
                    </div>

        <div class="modal fade" id="change-promotion-modal" tabindex="-1" style="z-index: 19999;" role="dialog"
             aria-hidden="true">
            <div class="modal-dialog return-modal-dialog"
                 style="position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);">
                <div class="modal-content" style="border-radius: 15px;">
                    <div class="modal-body" style="line-height: 25px; padding: 35px;">
                        <button type="button" class="close" style="bottom: 17px; top: unset;" data-dismiss="modal"
                                aria-hidden="true">&times;
                        </button>
                        <div class="">
                            <div id="cart_coupon_error" style="color: black;"></div>
                            <div class="input-group">
                                <input type="text" value="" placeholder="Enter Coupon Code Here!"
                                       class="form-control input-sm" id="cart_coupon_code" name="coupon_code">
                                <span class="input-group-btn">
                                    <input class="btn btn-sm btn-info" type="button" value="Check Coupon"
                                           id="cart_coupon_submit"/>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END FOOTER -->


    <script>
        $(window).on('load', function() {
            removeSpinner('content-loader');
            $('#main-content').animate({ opacity: '100%' }, 400);
        });
    </script>


<style>
/* QB Chat Gateway Button - mimics HelpScout beacon button */
#qb-chat-gateway-fab {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    border-radius: 24px;
    background-color: var(--blue-dark);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#qb-chat-gateway-fab:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

#qb-chat-gateway-fab:active {
    transform: scale(0.98);
}

#qb-chat-gateway-fab i {
    font-size: 26px;
    color: white;
}

/* QB Chat Gateway Panel */
#qb-chat-gateway-panel {
    position: fixed;
    bottom: 90px;
    left: 20px;
    width: 380px;
    max-height: 550px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16);
    z-index: 1051;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: qb-gateway-slide-up 0.3s ease;
}

@keyframes qb-gateway-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#qb-chat-gateway-panel.closing {
    animation: qb-gateway-slide-down 0.2s ease forwards;
}

@keyframes qb-gateway-slide-down {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* Panel Header */
.qb-gateway-header {
    background: linear-gradient(135deg, #1d3d5c 0%, #2a5580 100%);
    padding: 24px 20px;
    color: white;
    text-align: center;
}

.qb-gateway-header h3 {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 600;
    color: white;
}

.qb-gateway-header p {
    margin: 0;
    font-size: 14px;
    opacity: 0.9;
}

/* Avatar row */
.qb-gateway-avatars {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.qb-gateway-avatars img {
    height: 56px;
    width: auto;
}

/* Panel Body */
.qb-gateway-body {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
}

/* Option Cards */
.qb-gateway-option {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none !important;
    color: inherit;
}

.qb-gateway-option:last-child {
    margin-bottom: 0;
}

.qb-gateway-option:hover,
.qb-gateway-option:focus,
.qb-gateway-option:active {
    background: #e9ecef;
    border-color: #dee2e6;
    transform: translateX(4px);
    text-decoration: none !important;
}

.qb-gateway-option .qb-gateway-option-title,
.qb-gateway-option .qb-gateway-option-desc {
    text-decoration: none !important;
}

.qb-gateway-option-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #1d3d5c;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.qb-gateway-option-icon i {
    font-size: 16px;
    color: white;
}

.qb-gateway-option-content {
    flex: 1;
}

.qb-gateway-option-title {
    font-size: 14px;
    font-weight: 600;
    color: #1d3d5c;
    margin-bottom: 0;
    line-height: 1.3;
}

.qb-gateway-option-desc {
    font-size: 12px;
    color: #6c757d;
    margin: 0;
    line-height: 1.3;
}

.qb-gateway-option-arrow {
    color: #adb5bd;
    margin-left: 8px;
    font-size: 12px;
}

/* Special styling for human assistance option */
.qb-gateway-option.human-assist {
    background: linear-gradient(135deg, #1d3d5c 0%, #2a5580 100%);
    border: none;
    margin-top: 4px;
}

.qb-gateway-option.human-assist .qb-gateway-option-icon {
    background: rgba(255, 255, 255, 0.2);
}

.qb-gateway-option.human-assist .qb-gateway-option-title {
    color: white;
}

.qb-gateway-option.human-assist .qb-gateway-option-desc {
    color: rgba(255, 255, 255, 0.8);
}

.qb-gateway-option.human-assist .qb-gateway-option-arrow {
    color: rgba(255, 255, 255, 0.6);
}

.qb-gateway-option.human-assist:hover {
    background: linear-gradient(135deg, #2a5580 0%, #3a6590 100%);
    transform: translateX(4px);
}

/* Instant badge for AI option */
.qb-gateway-badge {
    display: inline-block;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}


/* Status indicator for human chat */
.qb-gateway-status {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    margin-left: 8px;
    vertical-align: middle;
}

.qb-gateway-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
    flex-shrink: 0;
}

.qb-gateway-status-dot.online {
    background-color: #28a745;
    box-shadow: 0 0 4px rgba(40, 167, 69, 0.5);
    animation: qb-pulse 2s ease-in-out infinite;
}

@keyframes qb-pulse {
    0%, 100% {
        box-shadow: 0 0 4px rgba(40, 167, 69, 0.5);
    }
    50% {
        box-shadow: 0 0 8px rgba(40, 167, 69, 0.8), 0 0 12px rgba(40, 167, 69, 0.4);
    }
}

.qb-gateway-status-dot.offline {
    background-color: #dc3545;
    box-shadow: 0 0 4px rgba(220, 53, 69, 0.5);
}

.qb-gateway-option.human-assist .qb-gateway-status {
    color: rgba(255, 255, 255, 0.9);
}

.qb-gateway-option.human-assist .qb-gateway-status-dot.online {
    background-color: #5eff5e;
    box-shadow: 0 0 4px rgba(94, 255, 94, 0.5);
    animation: qb-pulse-bright 2s ease-in-out infinite;
}

@keyframes qb-pulse-bright {
    0%, 100% {
        box-shadow: 0 0 4px rgba(94, 255, 94, 0.5);
    }
    50% {
        box-shadow: 0 0 8px rgba(94, 255, 94, 0.9), 0 0 12px rgba(94, 255, 94, 0.5);
    }
}

.qb-gateway-option.human-assist .qb-gateway-status-dot.offline {
    background-color: #ff6b6b;
    box-shadow: 0 0 4px rgba(255, 107, 107, 0.5);
}

/* Close button in panel */
.qb-gateway-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.qb-gateway-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.qb-gateway-close i {
    font-size: 14px;
    color: white;
}

/* Mobile Responsive */
@media screen and (max-width: 760px) {
    #qb-chat-gateway-panel {
        left: 10px;
        right: 10px;
        width: auto;
        bottom: 80px;
        max-height: 70vh;
    }

    #qb-chat-gateway-fab {
        left: 10px;
        bottom: 10px;
        width: 54px;
        height: 54px;
    }
}

/* Hide gateway when HelpScout beacon is active */
body.qb-gateway-hidden #qb-chat-gateway-fab,
body.qb-gateway-hidden #qb-chat-gateway-panel {
    display: none !important;
}
</style>

<!-- Floating Action Button -->
<button id="qb-chat-gateway-fab" type="button" aria-label="Open chat options">
    <i class="fa fa-comments"></i>
</button>

<!-- Gateway Panel -->
<div id="qb-chat-gateway-panel">
    <div class="qb-gateway-header">
        <button class="qb-gateway-close" type="button" aria-label="Close">
            <i class="fa fa-times"></i>
        </button>
        <div class="qb-gateway-avatars">
            <img src="https://cdn.queensboro.com/misc/support-team.png" alt="Support team">
        </div>
        <h3>How can we help?</h3>
        <p>Choose an option below to get started</p>
    </div>

    <div class="qb-gateway-body">
            <!-- Option 1: Check Order Status -->
            <a href="https://dev.queensboro.com/o/view_orders"
               class="qb-gateway-option" data-action="track-order">
                <div class="qb-gateway-option-icon">
                    <i class="fa fa-truck"></i>
                </div>
                <div class="qb-gateway-option-content">
                    <div class="qb-gateway-option-title">Check Order Status</div>
                    <p class="qb-gateway-option-desc">View orders, tracking & shipping</p>
                </div>
                <span class="qb-gateway-option-arrow">
                    <i class="fa fa-chevron-right"></i>
                </span>
            </a>

            <!-- Option 2: Knowledge Base -->
            <div class="qb-gateway-option" data-action="knowledge-base">
                <div class="qb-gateway-option-icon">
                    <i class="fa fa-book"></i>
                </div>
                <div class="qb-gateway-option-content">
                    <div class="qb-gateway-option-title">Search our Knowledge Base</div>
                    <p class="qb-gateway-option-desc">Find answers to common questions</p>
                </div>
                <span class="qb-gateway-option-arrow">
                    <i class="fa fa-chevron-right"></i>
                </span>
            </div>

            <!-- Option 3: Ask AI -->
            <div class="qb-gateway-option" data-action="ask-ai">
                <div class="qb-gateway-option-icon">
                    <i class="fa fa-magic"></i>
                </div>
                <div class="qb-gateway-option-content">
                    <div class="qb-gateway-option-title">Ask AI Assistant <span class="qb-gateway-badge"><i
                                    class="fa fa-bolt"></i> Instant</span></div>
                    <p class="qb-gateway-option-desc">Get <strong>instant</strong> answers, 24/7</p>
                </div>
                <span class="qb-gateway-option-arrow">
                    <i class="fa fa-chevron-right"></i>
                </span>
            </div>

            <!-- Option 4: Schedule a Call -->
            <div class="qb-gateway-option" data-action="schedule-call">
                <div class="qb-gateway-option-icon">
                    <i class="fa fa-phone"></i>
                </div>
                <div class="qb-gateway-option-content">
                    <div class="qb-gateway-option-title">Schedule a Call</div>
                    <p class="qb-gateway-option-desc">Book a time with our team</p>
                </div>
                <span class="qb-gateway-option-arrow">
                    <i class="fa fa-chevron-right"></i>
                </span>
            </div>

            <!-- Option 5: Human Assistance (triggers HelpScout) -->
            <div class="qb-gateway-option human-assist" data-action="human-assist">
                <div class="qb-gateway-option-icon">
                    <i class="fa fa-comments"></i>
                </div>
                <div class="qb-gateway-option-content">
                    <div class="qb-gateway-option-title">Chat with a Human <span class="qb-gateway-status"
                                                                                 id="qb-gateway-human-status"><span
                                    class="qb-gateway-status-dot"></span><span
                                    class="qb-gateway-status-text"></span></span></div>
                    <p class="qb-gateway-option-desc">Mon-Fri 8:30AM-6:30PM ET</p>
                </div>
                <span class="qb-gateway-option-arrow">
                    <i class="fa fa-chevron-right"></i>
                </span>
            </div>
    </div>
</div>

<script>
(function() {
    'use strict';

    const QBChatGateway = {
        fab: null,
        panel: null,
        isOpen: false,

        // Chat availability computed server-side (includes holidays from date.conf.php)
        isChatAvailable: false,

        init() {
            this.fab = document.getElementById('qb-chat-gateway-fab');
            this.panel = document.getElementById('qb-chat-gateway-panel');

            if (!this.fab || !this.panel) return;

            const beaconSessionActive = typeof Cookies !== 'undefined' && Cookies.get('_beaconToggle') === '1';
            if (beaconSessionActive) {
                this.fab.style.display = 'none';
                return;
            }
            this.hideHelpScoutBeacon();
            this.setupBeaconCloseListener();

            this.bindEvents();
            this.updateHumanChatStatus();
        },

        bindEvents() {
            // FAB click
            this.fab.addEventListener('click', () => this.toggle());

            // Close button
            this.panel.querySelector('.qb-gateway-close').addEventListener('click', () => this.close());

            // Option clicks
            this.panel.querySelectorAll('.qb-gateway-option').forEach(option => {
                option.addEventListener('click', (e) => this.handleOptionClick(e, option));
            });

            // Close on outside click
            document.addEventListener('click', (e) => {
                if (this.isOpen &&
                    !this.panel.contains(e.target) &&
                    !this.fab.contains(e.target)) {
                    this.close();
                }
            });

            // Close on escape key
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape' && this.isOpen) {
                    this.close();
                }
            });

            // Intercept existing .chat-link clicks (e.g., "Live Chat Now" in footer)
            document.addEventListener('click', (e) => {
                const chatLink = e.target.closest('.chat-link');
                if (chatLink) {
                    e.preventDefault();
                    e.stopPropagation();
                    this.open();
                }
            }, true);
        },

        toggle() {
            if (this.isOpen) {
                this.close();
            } else {
                this.open();
            }
        },

        open() {
            this.panel.style.display = 'flex';
            this.isOpen = true;
            this.fab.setAttribute('aria-expanded', 'true');

            if (typeof hj === 'function') {
                hj('event', 'qb_chat_gateway_opened');
            }
        },

        close() {
            this.panel.classList.add('closing');
            setTimeout(() => {
                this.panel.style.display = 'none';
                this.panel.classList.remove('closing');
                this.isOpen = false;
                this.fab.setAttribute('aria-expanded', 'false');
            }, 200);
        },

        handleOptionClick(e, option) {
            const action = option.dataset.action;

            switch (action) {
                case 'human-assist':
                    e.preventDefault();
                    this.openBeaconTo('/ask/chat/');
                    break;

                case 'ask-ai':
                    e.preventDefault();
                    this.openBeaconTo('/ai-answers/');
                    break;

                case 'knowledge-base':
                    e.preventDefault();
                    this.openBeaconTo('/answers/');
                    break;

                case 'schedule-call':
                    e.preventDefault();
                    this.scheduleCall();
                    break;

                case 'track-order':
                case 'email-us':
                    // Link navigates naturally, close panel after brief delay
                    setTimeout(() => this.close(), 100);
                    break;
            }

            if (typeof hj === 'function') {
                hj('event', 'qb_chat_gateway_option_' + action);
            }
        },

        hideHelpScoutBeacon() {
            if (document.getElementById('qb-gateway-beacon-hide')) return;

            const style = document.createElement('style');
            style.id = 'qb-gateway-beacon-hide';
            style.textContent = '.BeaconFabButtonFrame { display: none !important; }';
            document.head.appendChild(style);
        },

        showHelpScoutBeacon() {
            const hideStyle = document.getElementById('qb-gateway-beacon-hide');
            if (hideStyle) hideStyle.remove();
        },

        openBeaconTo(route) {
            // Store route in sessionStorage so it persists across page navigations
            sessionStorage.setItem('qb_gateway_beacon_route', route);

            // Mark that gateway activated the beacon (so beacon knows not to show auto-popup)
            sessionStorage.setItem('qb_gateway_beacon_activated', 'true');

            // Hide our gateway, show HelpScout
            this.fab.style.display = 'none';
            this.close();
            this.showHelpScoutBeacon();

            // Open beacon after a brief delay
            setTimeout(() => {
                if (typeof Beacon === 'function') {
                    Beacon('open');
                }
            }, 100);
        },

        scheduleCall() {
            this.close();
            if (typeof Beacon === 'function') Beacon('close');
            $('#schedule-call-modal').modal('show');
        },

        setupBeaconCloseListener() {
            if (typeof Beacon === 'function') {
                Beacon('on', 'close', () => this.restoreGateway());
            } else {
                // Beacon might not be ready yet, try again later
                setTimeout(() => this.setupBeaconCloseListener(), 500);
            }
        },

        restoreGateway() {
            sessionStorage.removeItem('qb_gateway_beacon_route');

            if (this.fab) {
                this.fab.style.display = 'flex';
            }

            this.hideHelpScoutBeacon();
        },

        updateHumanChatStatus() {
            const statusEl = document.getElementById('qb-gateway-human-status');
            if (!statusEl) return;

            const dot = statusEl.querySelector('.qb-gateway-status-dot');
            const text = statusEl.querySelector('.qb-gateway-status-text');

            if (!dot || !text) return;

            if (this.isChatAvailable) {
                dot.classList.remove('offline');
                dot.classList.add('online');
                text.textContent = 'Online now';
            } else {
                dot.classList.remove('online');
                dot.classList.add('offline');
                text.textContent = 'Offline';
            }
        }
    };

    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => QBChatGateway.init());
    } else {
        QBChatGateway.init();
    }

    // Expose for external access if needed
    window.QBChatGateway = QBChatGateway;
})();
</script>
<link rel="stylesheet" href="//dev.queensboro.com/css/schedule_call.css?v=28d49e54ea6910c71be7">
<script src="//dev.queensboro.com/js/schedule_call.js?v=28d49e54ea6910c71be7"></script>


<script>
    window.scheduleCallConfig = {
        isChatAvailable: false    };
</script>

<!-- Schedule a Call Modal -->
<div class="modal fade" id="schedule-call-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div id="schedule-call-form-step"">
                <div class="step-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <i class="fa fa-phone step-icon"></i>
                    <h2>Schedule a Call</h2>
                    <p>Monday-Friday 9AM-5PM ET</p>
                </div>
                <div class="modal-body">
                    <div id="schedule-call-success" style="display: none; text-align: center; padding: 40px 20px;">
                        <i class="fa fa-check-circle" style="font-size: 48px; color: #28a745; display: block; margin-bottom: 16px;"></i>
                        <h3 style="font-size: 20px; font-weight: var(--medium-font-weight); margin: 0 0 8px;">You're all set!</h3>
                        <p id="schedule-call-success-phone" style="color: var(--gray-d-40); font-size: 15px; margin: 0;">We'll call you at your scheduled time.</p>
                        <p id="schedule-call-success-video" style="color: var(--gray-d-40); font-size: 15px; margin: 0; display: none;">We'll email your Google Meet link before your scheduled time.</p>
                    </div>
                    <form id="schedule-call-form">
                        <div class="form-group">
                            <label>How would you like to meet? <span class="text-danger">*</span></label>
                            <div id="call-type-options">
                                <label class="call-type-card">
                                    <input type="radio" name="call_type" value="video">
                                    <span class="call-type-title"><i class="fa fa-video-camera"></i> Video Call</span>
                                    <span class="call-type-desc">Face-to-face on Google Meet. We will send a Google Meet link to the email you provided.</span>
                                </label>
                                <label class="call-type-card">
                                    <input type="radio" name="call_type" value="phone">
                                    <span class="call-type-title"><i class="fa fa-phone"></i> Phone Call</span>
                                    <span class="call-type-desc">We will call you at the number you provided at the scheduled time.</span>
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="name" required
                                   value="">
                        </div>
                        <div class="form-group">
                            <label>Email <span class="text-danger">*</span></label>
                            <input type="email" class="form-control" name="email" required
                                   value="">
                        </div>
                        <div class="form-group">
                            <label>Phone <span class="text-danger">*</span></label>
                            <input type="tel" class="form-control" name="phone" required
                                   value="">
                        </div>
                        <div class="form-group">
                            <label>Topic <span class="text-danger">*</span></label>
                            <select class="form-control" name="topic" required>
                                <option value="" disabled selected>Select a Topic</option>
                                <option value="Placing a New Order">Placing a New Order</option>
                                <option value="Status of Current Order">Status of Current Order</option>
                                <option value="Problem with Past Order">Problem with Past Order</option>
                                <option value="Logo Questions">Logo Questions</option>
                                <option value="Payment Questions">Payment Questions</option>
                                <option value="Pricing Questions">Pricing Questions</option>
                                <option value="Merchandise Questions">Merchandise Questions</option>
                                <option value="Storefront Questions">Storefront Questions</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
                        <div id="topic-order-status-hint" style="display: none;">
                            You can check your order status anytime on your <a href="/o/view_orders" target="_blank">My Orders</a> page.
                        </div>

                        <!-- Day Pills -->
                        <div class="form-group">
                            <label>Select a Day <span class="text-danger">*</span></label>
                            <div id="slot-picker-days">
                                                                    <button type="button" class="btn btn-default" data-date="2026-10-28">
                                        Wed, Oct 28                                    </button>
                                                                    <button type="button" class="btn btn-default" data-date="2026-10-29">
                                        Thu, Oct 29                                    </button>
                                                                    <button type="button" class="btn btn-default" data-date="2026-10-30">
                                        Fri, Oct 30                                    </button>
                                                                    <button type="button" class="btn btn-default" data-date="2026-11-02">
                                        Mon, Nov 2                                    </button>
                                                                    <button type="button" class="btn btn-default" data-date="2026-11-03">
                                        Tue, Nov 3                                    </button>
                                                            </div>
                        </div>

                        <!-- Time Slots -->
                        <div class="form-group" id="slot-picker-container" style="display: none;">
                            <label>Select a Time <span class="text-danger">*</span> <small id="slot-timezone-label"></small></label>
                            <div id="slot-picker-loading" class="text-center" style="display: none;">
                                <i class="fa fa-spinner fa-spin"></i> Loading available times...
                            </div>
                            <div id="slot-picker-times" style="display: none;"></div>
                        </div>

                        <input type="hidden" name="slot_date" value="">
                        <input type="hidden" name="slot_time" value="">
                        <input type="hidden" name="csrf_key" value="footer">
                        <input type="hidden" name="csrf_token" value="32576f424d2fa8e3b3d1bdcfae42e31867ecd3fbda4c525d2bc8ba3059952fed">
                        <input type="checkbox" name="learn_more" value="1" style="display:none !important" tabindex="-1" autocomplete="off">
                        <input type="hidden" name="g-recaptcha-response" value="">
                    </form>
                    <div id="schedule-call-buttons" class="form-group" style="margin-top: 24px;">
                        <div id="schedule-call-error" class="alert alert-danger" style="display: none;"></div>
                        <button type="button" class="btn btn-primary btn-lg btn-block" id="schedule-call-submit">
                            <i class="fa fa-phone"></i> Request Call
                        </button>
                        <button type="button" class="btn btn-default btn-block schedule-secondary" data-dismiss="modal">
                            Cancel
                        </button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div><style>
    #beacon-position-toggle {
        display: none;
        position: fixed;
        bottom: 100px;
        z-index: 1051;
        background: var(--blue);
        color: var(--off-white);
        border: none;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    #beacon-position-toggle:hover {
        background: #0d7dce;
    }

    #beacon-position-toggle.position-right {
        right: 400px; /* inside the right edge of chat */
        left: auto;
    }

    #beacon-position-toggle.position-left {
        left: 400px; /* inside the left edge of chat */
        right: auto;
    }

    @media screen and (max-width: 760px) {
        #beacon-position-toggle {
            display: none !important;
        }
    }
</style>

<button id="beacon-position-toggle" title="Move chat to other side">
    <i class="fa fa-arrows-h"></i>
</button>

<script type="text/javascript">!function (e, t, n) {
        function a() {
            var e = t.getElementsByTagName("script")[0], n = t.createElement("script");
            n.type = "text/javascript", n.async = !0, n.src = "https://beacon-v2.helpscout.net", e.parentNode.insertBefore(n, e)
        }

        if (e.Beacon = n = function (t, n, a) {
            e.Beacon.readyQueue.push({method: t, options: n, data: a})
        }, n.readyQueue = [], "complete" === t.readyState) return a();
        e.attachEvent ? e.attachEvent("onload", a) : e.addEventListener("load", a, !1)
    }(window, document, window.Beacon || function () {
    });</script>

<script type="text/javascript">

    let customerEngaged = localStorage.getItem('customerEngaged');

    if (customerEngaged === 'true') {
        window.Beacon('init', '1b80ce34-ace7-41a9-ac33-1152d4d50ee8');
    } else {
        window.Beacon('init', '1b80ce34-ace7-41a9-ac33-1152d4d50ee8');
        // Only show auto-popup message if gateway has been bypassed (user already engaged with beacon)
        // The QB Chat Gateway now handles initial customer interaction
        let beaconActivatedByGateway = sessionStorage.getItem('qb_gateway_beacon_activated');
        if (!beaconActivatedByGateway) {
            let cst_experience_message_id = 'e430b17c-68d2-4fb3-bd47-020828bf7324';
            if (!window.matchMedia("only screen and (max-width: 760px)").matches && cst_experience_message_id) {
                // don't want this message popping up on mobile
                // Note: This is now disabled by default due to QB Chat Gateway
                // Beacon('show-message', cst_experience_message_id);
            }
        }
    }

    let beaconPosition = sessionStorage.getItem('beacon_position') || 'left';
    Beacon('config', {
        display: {
            position: beaconPosition
        }
    });

    function updateTogglePosition() {
        const pos = sessionStorage.getItem('beacon_position') || 'left';
        const icon = pos === 'left' ? 'fa-arrow-right' : 'fa-arrow-left';

        $('#beacon-position-toggle')
            .removeClass('position-left position-right')
            .addClass('position-' + pos)
            .find('i')
            .removeClass('fa-arrows-h fa-arrow-left fa-arrow-right')
            .addClass(icon);
    }

    function toggleBeaconPosition() {
        const current = sessionStorage.getItem('beacon_position') || 'left';
        const newPos = current === 'right' ? 'left' : 'right';
        sessionStorage.setItem('beacon_position', newPos);
        Beacon('config', {display: {position: newPos}});
        updateTogglePosition();
    }

    function setBeaconData(customerInfo) {
        if (typeof customerInfo === 'object' && Object.keys(customerInfo).length) {
            Beacon('identify', customerInfo);
        }

        Beacon('session-data', {
            'Is Logged': loggedIn ? 'TRUE' : 'FALSE',
            'Is Employee': is_employee ? 'TRUE' : 'FALSE',
            'Promotion': promotion_name
        });
    }

    function getCustomerInfo(forceUpdate) {
        if (!loggedIn) {
            setBeaconData();
            return;
        }

        let customerInfo;
        forceUpdate = !!forceUpdate || false;

        if (!forceUpdate) {
            customerInfo = JSON.parse(sessionStorage.getItem('customerInfo')) || {};

            if (Object.keys(customerInfo).length) {
                setBeaconData(customerInfo);
                return;
            }
        }

        $.getJSON('/api_customer/get_info.html', {'ssid': subsite_id, 'format': 'helpdesk'}, function (data) {
            if (data?.error === null && data?.customer !== null) {
                customerInfo = {
                    name: data.customer.first_name + ' ' + data.customer.last_name,
                    email: data.customer.email,
                    company: data.customer.company_name,
                    // HelpScout Customer Properties (new Apr 1, 2021)
                    'last-updated': data.last_updated.split(' ')[0] || '',  // date part only of datetime field
                    /*
                    * PLACEHOLDER
                    * our HelpScout Custom App already pulls the data below,
                    * and is configured to display on the Beacon user sidebar;
                    * keeping it in case we need move to Customer Properties
                    *
                    "customer-id": data.customer.id,
                    "customer-link": data.customer.link,
                    "customer-type": data.customer.type,
                    "last-order": data.customer.last_order,  // LO
                    "lifetime-sales": data.customer.lifetime_sales,  //LTV
                    "customer-1x": data.customer['1x'],
                    "enterprise": data.customer.enterprise,
                    "enterprise-csr": data.customer.enterprise_csr,
                    "recent-orders": data.customer.latest_orders.reduce(function(orders, order) {
                        return orders + '; ' + order.id + ' - ' + order.stage + ' (' + order.datePlaced + ')'
                    }, ''),
                    * */
                };

                sessionStorage.setItem('customerInfo', JSON.stringify(customerInfo));
            }

            setBeaconData(customerInfo);
        });
    }

    $(document).on('ready', function () {
        var chatType = 'ask'; // flag so there is only one 'open' method call

        $('#beacon-position-toggle').on('click', toggleBeaconPosition);

        $('body')
            .on('click', '.chat-link', function (e) {
                e.preventDefault();
                chatType = 'ask';
                Beacon('open');
            });

        // consolidated all the on open method calls into one
        Beacon('on', 'open', function () {
            BeaconStyleFix.apply();
            updateTogglePosition();
            $('#beacon-position-toggle').show();

            // Add beacon status to cookie and session on open
            Cookies.set('_beaconToggle', '1', {expires: 1});
            $.post('/api_session/set_beacon_status', {beaconActive: true});

            // Initialize customer tracker early so it catches pre-chat email entry
            HelpScoutCustomerTracker.initialize();

            // Check if QB Chat Gateway requested a specific route (stored in sessionStorage for cross-page persistence)
            let gatewayRoute = sessionStorage.getItem('qb_gateway_beacon_route');

            if (gatewayRoute) {
                Beacon('navigate', gatewayRoute);
                // Clear after use so subsequent opens go to default
                sessionStorage.removeItem('qb_gateway_beacon_route');
            } else if (localStorage.getItem('qb-hs-beacon-last-activity')) {
                // User has active chat - go directly to chat
                Beacon('navigate', '/ask/chat/');
            } else if (chatType === 'ask') {
                Beacon('navigate', '/ask/');
            }
            chatType = 'ask';

            // snippet for hotjar event tracking
            if (typeof hj === 'function') {
                hj('event', 'opened_helpscout_beacon');
            }

            $('iframe').attr('data-hj-allow-iframe', true);
        });

        // Remove beacon status for cookie and session on close
        Beacon('on', 'close', function () {
            $('#beacon-position-toggle').hide();
            Cookies.remove('_beaconToggle');
            $.post('/api_session/set_beacon_status', {beaconActive: false});
            localStorage.removeItem('customerEngaged');
            localStorage.removeItem('qb-hs-beacon-last-activity');

            // Clear gateway session state
            sessionStorage.removeItem('qb_gateway_beacon_activated');
            sessionStorage.removeItem('qb_gateway_beacon_route');

            // Clean up customer tracker
            HelpScoutCustomerTracker.destroy();
        });

        Beacon('event', {
            type: 'page-viewed',
            url: document.location.href,
            title: document.title,
        });

        // allow hotjar to track iframes
        Beacon('on', 'ready', function () {
            if (Cookies.get('_beaconToggle') === '1') {
                Beacon('open');
            }
            $('#beacon-container iframe').attr('data-hj-allow-iframe', true);
        });

        Beacon('on', 'chat-started', function () {
            InactivityTracker.initialize();
        });

        if (localStorage.getItem('qb-hs-beacon-last-activity')) {
            InactivityTracker.initialize();  // Resume inactivity check on page load
        }

        setTimeout(function () {
            $('iframe').attr('data-hj-allow-iframe', true);
        }, 500);
    });

    $(window).on('load', function () {
        getCustomerInfo();

        $(document).on('refreshLoggedIn', function () {
            getCustomerInfo(true);
        });
    });

    /**
     * HelpScoutCustomerTracker - Monitors chat messages for email addresses
     * and creates customer records in QSC2 for unregistered HelpScout chat users.
     *
     * Re-added per ticket #25389 - This was accidentally removed in MR-7165.
     * When unregistered customers chat via HelpScout, we need to create a customer
     * record so that subsequent form submissions (e.g., storefront request form)
     * will have a valid customer ID.
     */
    const HelpScoutCustomerTracker = {
        observer: null,
        processedEmails: new Set(),

        /**
         * Set up MutationObserver to watch for new chat messages containing emails
         */
        setupEmailTracking(beaconBody) {
            if (this.observer) {
                return; // Already initialized
            }

            this.observer = new MutationObserver((mutations) => {
                mutations.forEach((mutation) => {
                    if (mutation.addedNodes.length) {
                        mutation.addedNodes.forEach((node) => {
                            if (node.innerText) {
                                this.processNodeText(node.innerText);
                            }
                        });
                    }
                });
            });

            this.observer.observe(beaconBody, { subtree: true, childList: true });
        },

        /**
         * Process text from chat nodes to detect and handle email addresses
         */
        processNodeText(text) {
            try {
                // Check if chat has ended
                if (text.search('ended the chat') !== -1) {
                    Cookies.remove('_beaconToggle');
                    $.post('/api_session/set_beacon_status', {beaconActive: false});
                }

                // Check for email addresses and create customer record if found
                // Only process if user is not already logged in
                if (!loggedIn && typeof validateEmail === 'function' && validateEmail(text)) {
                    const email = text.toLowerCase();
                    if (!this.processedEmails.has(email)) {
                        this.processedEmails.add(email);
                        $.post('/api_customer/create_new_hs_customer', {
                            customer_email: email,
                            csrf_key: 'ajax',
                            csrf_token: csrf_token_ajax
                        }).done(function(data) {
                            if (data && data.csrf_token) {
                                csrf_token_ajax = data.csrf_token;
                            }
                        });
                    }
                }
            } catch (error) {
                // Silently fail to prevent console errors from affecting chat
            }
        },

        /**
         * Initialize the tracker by polling for beacon to load
         */
        initialize() {
            const checkBeaconLoaded = setInterval(() => {
                let beacon = document.getElementById("beacon-container");
                if (beacon) {
                    let beaconIframe = beacon.getElementsByTagName("iframe")[0];
                    if (beaconIframe && beaconIframe.contentWindow) {
                        let beaconDocument = beaconIframe.contentWindow.document;
                        let beaconBody = beaconDocument.getElementById("beacon-container-body");
                        if (beaconBody) {
                            clearInterval(checkBeaconLoaded);
                            this.setupEmailTracking(beaconBody);
                        }
                    }
                }
            }, 1000);
        },

        /**
         * Clean up observer when no longer needed
         */
        destroy() {
            if (this.observer) {
                this.observer.disconnect();
                this.observer = null;
            }
            this.processedEmails.clear();
        }
    };

    const InactivityTracker = {
        inactivityTimer: null,
        maxInactivityTime: 420000,  // 7 Minutes - set by Marketing

        setupInactivityTracking(beaconDocument, beaconBody) {
            $(beaconDocument).on('mousemove keydown', beaconBody, () => {
                this.resetTimer();
            });
            this.checkInactivity();
        },
        closeChat() {
            clearTimeout(this.inactivityTimer);
            localStorage.removeItem('qb-hs-beacon-last-activity');
            Beacon('logout', {endActiveChat: true});
        },
        resetTimer() {
            clearTimeout(this.inactivityTimer);
            const now = new Date().getTime();
            localStorage.setItem('qb-hs-beacon-last-activity', now);
            this.inactivityTimer = setTimeout(() => this.closeChat(), this.maxInactivityTime);
        },
        checkInactivity() {
            const helpScoutBeaconLastActivity = localStorage.getItem('qb-hs-beacon-last-activity');
            if (helpScoutBeaconLastActivity) {
                const now = new Date().getTime();
                const inactivityDuration = now - helpScoutBeaconLastActivity;

                if (inactivityDuration >= this.maxInactivityTime) {
                    this.closeChat();
                } else {
                    localStorage.setItem('qb-hs-beacon-last-activity', helpScoutBeaconLastActivity);
                    clearTimeout(this.inactivityTimer);
                    this.inactivityTimer = setTimeout(() => this.closeChat(), this.maxInactivityTime - inactivityDuration);
                }
            } else {
                this.resetTimer();
            }
        },
        initialize() {
            // Poll for beacon iframe and body to be fully loaded - HS doesn't seem to have an on load event,
            // only an on ready which is when the beacon is initialized and opened, but none of those are fired when the beacon is fully loaded,
            // and we want the document element and body element to add delegated event handlers
            // This only polls if the beacon is not open -- once usually
            const checkBeaconLoaded = setInterval(() => {
                let beacon = document.getElementById("beacon-container");
                if (beacon) {
                    let beaconIframe = beacon.getElementsByTagName("iframe")[0];
                    if (beaconIframe && beaconIframe.contentWindow) {
                        let beaconDocument = beaconIframe.contentWindow.document;
                        let beaconBody = beaconDocument.getElementById("beacon-container-body");
                        if (beaconBody) {
                            clearInterval(checkBeaconLoaded);  // Stop polling once the body is loaded
                            this.setupInactivityTracking(beaconDocument, beaconBody);  // Set up activity tracking
                        }
                    }
                }
            }, 1000);  // Check every 1 second for beacon loading
        }
    };

    const BeaconStyleFix = {
        css: `
            .c-HeaderNav.is-mobile [aria-label="Previous conversations"] {
                margin-right: 16px;
                transform: translateY(-3px);
            }
        `,

        apply() {
            let attempts = 0;
            const checkBeaconLoaded = setInterval(() => {
                const beaconIframe = document.querySelector('#beacon-container iframe');
                const beaconDocument = beaconIframe?.contentWindow?.document;

                if (beaconDocument?.getElementById('beacon-container-body')) {
                    clearInterval(checkBeaconLoaded);
                    if (!beaconDocument.getElementById('qb-beacon-style-fix')) {
                        const style = beaconDocument.createElement('style');
                        style.id = 'qb-beacon-style-fix';
                        style.textContent = this.css;
                        beaconDocument.head.appendChild(style);
                    }
                } else if (++attempts >= 40) {
                    clearInterval(checkBeaconLoaded);
                }
            }, 250);
        }
    };

    $(function () {
        Beacon('on', 'open', function () {
            // When the page is loaded via AJAX, the beacon is still open, but then re-initializes.
            // We need to set the event handlers back on the beacon only AFTER the re-initialization
            if (localStorage.getItem('qb-hs-beacon-last-activity')) {
                InactivityTracker.initialize();  // Resume inactivity check on page load
            }
        })
    });
</script>
<div id="loginModal" class="modal in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" title="Close" class="close" data-dismiss="modal" aria-hidden="true">&times;
                </button>
            </div>
            <div class="modal-body">

            </div>
        </div>
    </div>
</div>
<p class="displayClicks" style="width:20px;height:20px;position:fixed;bottom:0;"></p>
<div class="pagescrollup"><i class="fa fa-arrow-up"></i></div>


<!-- Registration Pop-up Modal -->
<div class="modal fade" id="registration-pop-up-modal" style="margin-top: 125px;" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content bg-primary">
            <div class="modal-header" style="border-bottom: 0 none;">
                <button type="button" class="close" style="color: white; opacity: 1; cursor: pointer; padding-top: 10px"
                        data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body text-center registration-pop-up-page" style="padding: 15px; margin-bottom: 0;"
                 data-page="0">
                <span class="modal-title" style="color:white; font-weight: var(--xx-heavy-font-weight); font-size: 36px;" id="selectModalLabel">
                    Friends Don’t Let Friends<br>Pay Full Price!
                </span>
                <p style="color:white;" class="mt-10">Registered customers <b>save an average of 42%</b> on their
                    orders.
                </p>
                <div class="form-container">
                    <form id="registration-pop-up-form" class="text-center">
                        <div class="row mb-5">
                            <div class="col-md-8 col-md-offset-2" style="max-width: 400px; float: none; margin: 0 auto">
                                <input type="email" class="form-control w-50" id="registration-email-input" name="email"
                                       placeholder="Email" required aria-label="Email address" tabindex="0">
                                <div id="email-error" class="alert alert-danger mt-5"
                                     style="display: none; font-size: var(--xs-font-size);"></div>
                                <div id="email-warning" class="alert alert-warning mt-5"
                                     style="display: none; font-size: var(--xs-font-size);"></div>
                                <a id="reg-sign-in" class="btn btn-default btn-block" style="display: none;" href="https://dev.queensboro.com/a/login">Sign In</a>
                                <button type="button" id="registration-button" class="btn btn-primary-dark btn-block mt-10">
                                    Sign Up
                                </button>
                            </div>
                        </div>
                        <input type="hidden" name="csrf_key" value="registration_pop_up"/>
                        <input type="hidden" name="csrf_token" value="9313a8e2c22f5fb0cddda39e99586513e4356047a54f74ce320708f7e1767bb9"/>
                        <input type="hidden" name="undeliverable_email_address" value="false">
                    </form>
                </div>
                <p class="signup-message mt-20" style="color: white;"><b>Sign Up</b> and unlock the savings!</p>
            </div>

            <div class="modal-body mb-0 pb-0 registration-pop-up-page text-center" data-page="1"
                 style="display: none; min-height: 345px; padding-top: 18%;">
                    <div class="email-form-message">Select Email Frequency:</div>
                    <div id="radioBtn" class="btn-group" style="margin-bottom:15px;">
                                                    <a class="btn btn-primary freq-option" style="display: block; margin-right: 10px;"
                               data-frequency-id="0">All offers</a>
                                                    <a class="btn btn-primary freq-option" style="display: block; margin-right: 10px;"
                               data-frequency-id="5">Twice a week</a>
                                                    <a class="btn btn-primary freq-option" style="display: block; margin-right: 10px;"
                               data-frequency-id="6">Twice a Month</a>
                                            </div>
            </div>
        </div>
    </div>
</div>

<style>
    @media (max-width: 768px) {
        #selectModalLabel {
            font-size: var(--xl-font-size);
        }
    }
</style>

<script>
    $(document).ready(function () {
        $('#registration-button').off('click').on('click', function (e) {
            e.preventDefault();
            $(this).prop('disabled', true);
            RegistrationPopUp.submitEmail();
        });

        $('.freq-option').off('click').on('click', function (e) {
            e.preventDefault();
            $(this).prop('disabled', true);
            let frequencyId = $(this).data('frequency-id');
            RegistrationPopUp.submitFrequency(frequencyId);
        });

        $('#registration-email-input').keypress(function (e) {
            // allows use of enter key
            if (e.which === 13) {
                e.preventDefault();
                $('#registration-button').click();
            }
        });

        setTimeout(function () {
            if (!loggedIn && RegistrationPopUp.shouldShow(promotion_name)) {
                RegistrationPopUp.show();
                setTimeout(function () {
                    $('#registration-email-input').focus();
                }, 1000);
            }
        }, RegistrationPopUp.delay_time);

        new EmailValidator(
            '#registration-email-input',
            '#email-warning',
            '#registration-pop-up-form input[name="undeliverable_email_address"]',
            250
        );
    });
</script>

<!-- This is the mobile menu  -->
<div class="wsmenucontainer clearfix">
    <div class="wsmenuexpandermain slideRight">
        <a id="navToggle" class=" animated-arrow slideLeft" href="#">
            <span></span>
            <p>Menu</p>
        </a>
    </div>
    <div class="wsmenucontent overlapblackbg"></div>
    </div>

<style>
    /* prevent rows from pushing outside container-fluid */
    #footer .row.no-gutters {
        margin-left: 0;
        margin-right: 0;
    }

    #footer .row {
        margin-left: 0;
        margin-right: 0;
    }

    #footer .modal-dialog {
        max-width: 100%;
    }

    /* social icons flex-wrap nicely */
    #footer ul.list-inline {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* make sure images & iframes shrink properly */
    #footer img,
    #footer iframe {
        max-width: 100%;
        height: auto;
    }

    @media screen and (max-width: 776px) {
        #cart_coupon_code {
            width: 170px;
        }
    }
</style>


</body>
</html>[]