/** Shopify CDN: Minification failed

Line 16:5 Unexpected "="
Line 112:0 Comments in CSS use "/* ... */" instead of "//"
Line 327:0 Unexpected "<"
Line 356:76 Unterminated string token
Line 418:1 Expected identifier but found "%"
Line 419:45 Unexpected "("
Line 420:1 Expected identifier but found "%"
Line 422:0 Unexpected "<"
Line 473:34 Unexpected "{"
Line 473:40 Expected ":"
... and 58 more hidden warnings

**/
<!-- ================= GSS MASTER HEADER (ALL-IN-ONE) ================= -->
<!-- Paste entire file into header.liquid (or a header section) — CSS then HTML/Liquid then JS -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;800&display=swap" rel="stylesheet">

<style>
/* ================= RESET & ROOT ================= */
*{box-sizing:border-box;margin:0;padding:0;font-family:'Poppins',sans-serif}
img,svg{max-width:100%;height:auto}
:root{
  --primary:#0073e6;
  --accent1:#ff4444; --accent2:#ff8800; --accent3:#00c0ff;
  --inverse:#111;
  --panel-shadow:0 12px 30px rgba(0,0,0,0.14);
  --hero-h:420px;
  --trend-w:440px; --trend-h:300px;
}

/* ========== Hide legacy bars (safety) ========== */
#legacy-top-bar, .legacy-promo, .script-to-content, .vertical-menu, .old-announcement, .top-banner-legacy { display:none !important; }

/* ================= ANNOUNCEMENT BAR ================= */
#announcement-bar, #gss-announcement {
  height: 36px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  padding-left: 14px;
  font-weight: 700;
  font-size: 14px;
  color: #ffffff; /* White text */
  background: #000000; /* Solid black background */
  border-bottom: 2px solid #111;
}

/* Sliding content */
.announcement-slider, .gss-ann-slider {
  display: inline-block;
  padding-right: 40px;
  will-change: transform;
}

/* Responsive styling */
@media (max-width: 768px) {
  #announcement-bar {
    height: 44px;
    font-size: 13px;
    padding-left: 10px;
  }
}

@media (max-width: 480px) {
  #announcement-bar {
    height: 50px;
    font-size: 12px;
    padding-left: 8px;
  }
}


/* ================= SUB HEADER ================= */
.sub-header, .gss-subheader {
  display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 18px;
  background:#0d0d0f;color:#fff;z-index:1600;flex-wrap:wrap;border-bottom:2px solid rgba(255,255,255,0.04);
}
.sub-left,.sub-right,.gss-sub-left,.gss-sub-right{display:flex;gap:10px;align-items:center}
.sub-btn,.gss-btn,.sub-link,.gss-link{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:22px;border:1px solid rgba(255,255,255,0.12);
  background:transparent;color:#fff;font-weight:700;cursor:pointer;
}
.btn-join,.gss-join{background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));border:0;color:#fff}
.btn-sign,.gss-sign{background:linear-gradient(90deg,#00ff88,#ff00ff,#ffcc00);border:0;color:#111}

/* Dropdown */
.sub-dropdown,.gss-dropdown{position:relative}
.dropdown-panel,.gss-panel{
  position:absolute;top:calc(100% + 8px);left:0;min-width:240px;background:#fff;color:#111;border-radius:10px;padding:10px;
  box-shadow:var(--panel-shadow);display:none;opacity:0;transform:translateY(-6px);transition:all .22s ease;z-index:2000;
}
.dropdown-panel.show,.gss-panel.show{display:block;opacity:1;transform:translateY(0)}
.dropdown-item, .gss-panel a{display:block;padding:8px;border-radius:6px;font-weight:600;color:#111;text-decoration:none}
.dropdown-item:hover, .gss-panel a:hover{background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));color:#fff}

/* Order tracker */
.order-tracker-form { display:flex; gap:8px; align-items:center; }
.order-tracker-form input[type="text"]{padding:8px 10px;border-radius:8px;border:1px solid #eee;width:160px}
.order-tracker-form button{padding:8px 10px;border-radius:8px;background:var(--primary);color:#fff;border:0;cursor:pointer}

/* Mobile hamburger */
.mobile-hamburger{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:6px}
.mobile-hamburger span{width:26px;height:3px;background:#fff;border-radius:2px}

/* Mobile overlay */
.mobile-menu-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1600;justify-content:flex-start;align-items:flex-start;padding:18px}
.mobile-menu-inner{background:#0d0d0f;width:100%;max-width:360px;border-radius:12px;padding:16px;color:#fff;display:flex;flex-direction:column;gap:12px}

//* ===========================================
   Shoparo Header – Amazon-like layout
   =========================================== */

.shoparo-header {
  width: 100%;
  background: #131921;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  padding: 0 20px;
}

/* LEFT */
.header-left {
  display: flex;
  align-items: center;
  gap: 18px;
}
.logo img {
  height: 36px;
  width: auto;
}
.deliver-to {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.deliver-to i {
  font-size: 18px;
  color: #febd69;
}
.deliver-text span {
  font-size: 11px;
  color: #ccc;
  line-height: 1;
}
.deliver-text strong {
  font-size: 13px;
  color: #fff;
  font-weight: 600;
}

/* SEARCH */
.header-search {
  flex: 1;
  display: flex;
  max-width: 620px;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  margin: 0 20px;
}
.category-select button {
  background: #e6e6e6;
  border: none;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
}
.header-search input {
  flex: 1;
  border: none;
  padding: 10px;
  font-size: 14px;
}
.search-btn {
  background: #febd69;
  border: none;
  padding: 10px 16px;
}
.search-btn i {
  color: #000;
  font-size: 18px;
}

/* RIGHT SIDE */
.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13px;
}
.language-switch select {
  background: transparent;
  border: 1px solid #555;
  color: #fff;
  padding: 4px 6px;
  border-radius: 4px;
}
.account-menu, .order-menu, .cart-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
  position: relative;
}
.account-menu .small,
.order-menu .small {
  font-size: 11px;
  color: #ccc;
  line-height: 1;
}
.account-menu strong,
.order-menu strong {
  font-size: 13px;
  color: #fff;
}
.cart-menu {
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.cart-menu .icon-cart {
  font-size: 20px;
}
.cart-count {
  position: absolute;
  top: -4px;
  right: -10px;
  background: #f08804;
  color: #000;
  font-size: 11px;
  font-weight: bold;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 18px;
}
.cart-text {
  font-weight: 500;
  font-size: 13px;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .header-search { display: none; }
}

/* ================= MEGA MENU ================= */
.mega-menu, .gss-mega{display:none;position:absolute;left:0;top:72px;width:100%;background:#fff;padding:18px 22px;box-shadow:var(--panel-shadow);z-index:1400;border-top:4px solid var(--primary);flex-wrap:wrap}
.mega-menu.active, .gss-mega.active{display:flex}
.mega-col, .gss-mega-col{flex:1;min-width:180px;padding:8px}

/* ================= HERO SLIDER ================= */
.hero-slider, #gss-hero{position:relative;width:100%;height:var(--hero-h);overflow:hidden;border-radius:10px;margin:18px 0;background:#111}
.hero-slider .slide, .gss-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .8s ease,transform .6s ease;transform:scale(1.02)}
.hero-slider .slide.active, .gss-slide.active{opacity:1;transform:scale(1)}
.hero-slide .overlay, .gss-slide .overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.45));z-index:1}
.hero-slide .content, .gss-slide .content{position:relative;z-index:2;color:#fff;padding:40px;max-width:720px}
.hero-eyebrow, .gss-eyebrow{font-weight:700;margin-bottom:8px}
.hero-title, .gss-title{font-size:40px;font-weight:900;margin-bottom:8px;line-height:1.02}
.hero-sub, .gss-sub{font-size:16px;margin-bottom:16px}
.hero-cta, .gss-cta{display:flex;gap:10px}
.hero-btn, .gss-btn-hero{padding:10px 20px;border-radius:30px;background:linear-gradient(90deg,#36b3ff,#8a2be2);color:#fff;font-weight:800;text-decoration:none}
.hero-arrow, .gss-hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;z-index:20;background:rgba(0,0,0,0.45);color:#fff}
.hero-arrow.prev, .gss-hero-arrow.prev{left:12px}
.hero-arrow.next, .gss-hero-arrow.next{right:12px}
.hero-dots, .gss-hero-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:21}
.hero-dot, .gss-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.35);cursor:pointer}
.hero-dot.active, .gss-dot.active{background:#fff}

/* hero placeholder classes */
.hero-slide__bg--placeholder, .hero-slide__bg--loaded{transition:all .6s ease}

/* ================= CTA CATEGORIES ================= */
.cta-categories, .cta-categories{background:#0073e6;padding:14px;border-radius:8px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cta-item{width:calc(14.28% - 8px);text-align:center;cursor:pointer}
.cta-item img{width:100%;height:70px;object-fit:cover;border-radius:8px;margin-bottom:6px}
.cta-item span{display:block;color:#fff;font-weight:600}

/* ================= TRENDING (Amazon/Ebay style) ================= */
.trending-wrap, .gss-trending-wrap{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}
.trend-card, .gss-trend-card{width:calc((100% - 36px)/4);min-width:200px;border-radius:10px;overflow:hidden;background:#fff;border:1px solid #eee;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.trend-media, .gss-trend-media{width:100%;height:var(--trend-h);object-fit:cover;background:#f5f5f5}
.trend-body, .gss-trend-body{padding:10px}
.trend-title, .gss-trend-title{font-weight:800;margin-bottom:6px}
.trend-sub, .gss-trend-sub{font-size:13px;color:#666;margin-bottom:8px}

/* ================= TOP PRODUCTS ================= */
.top-products{padding:12px}
.product-grid{display:flex;flex-wrap:wrap;gap:12px}
.product-card{width:calc(25% - 12px);border:1px solid #eee;border-radius:8px;padding:8px;text-align:center;background:#fff;transition:all .3s ease}
.product-card img{width:100%;height:150px;object-fit:cover;border-radius:6px;margin-bottom:8px}
.product-title{font-size:14px;margin-bottom:6px}
.product-price{color:green;font-weight:700;margin-bottom:8px}
.add-to-cart{background:#0073e6;color:#fff;padding:8px 12px;border-radius:20px;cursor:pointer;display:inline-block}

/* ================= MODALS (generic) ================= */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1400;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .35s ease}
.modal-overlay.show{display:flex;opacity:1}
.modal{background:#fff;width:100%;max-width:520px;border-radius:12px;padding:22px;position:relative;box-shadow:0 10px 40px rgba(0,0,0,0.15)}
.modal .close-modal{position:absolute;right:12px;top:10px;font-size:22px;cursor:pointer}
.modal h2{margin:0 0 12px;font-size:22px}
.modal form{display:flex;flex-direction:column;gap:10px}
.modal input, .modal select, .modal button{padding:12px;border-radius:8px;border:1px solid #ddd}
.modal button{border:none;background:var(--primary);color:#fff;font-weight:800;cursor:pointer}
.modal .social-btns{display:flex;gap:12px;margin-top:12px}
.modal .social-btns a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:700;color:#fff;border-radius:6px;padding:10px;text-decoration:none;transition:all .3s ease}
.modal .social-btns a img{height:18px}
.modal .social-btns a.google{background:#4285F4}
.modal .social-btns a.facebook{background:#1877F2}
.modal .social-btns a.apple{background:#000}

/* responsive */
@media(max-width:1200px){ .trend-card, .gss-trend-card{width:calc((100% - 24px)/3)} .product-card{width:calc(33.333% - 12px)} }
@media(max-width:900px){ .trend-card, .gss-trend-card{width:calc((100% - 12px)/2)} .product-card{width:calc(50% - 12px)} .search-box{max-width:100%} }
@media(max-width:480px){ :root{--hero-h:220px} .hero-title{font-size:22px} .search-box input, .gss-search input{width:100%} .trend-card{width:100%} .product-card{width:100%} .mobile-hamburger{display:flex} .mobile-menu-overlay{display:flex} .all-categories-btn{padding:8px} }
</style>

<!-- ================= ANNOUNCEMENT ================= -->
<!-- ================= ANNOUNCEMENT BAR ================= -->
<div id="announcement-bar" role="region" aria-label="Announcements">
  <div class="announcement-slider">
    🎉 Limited Time Offer: Get 20% OFF on some special category products today! 🛒 &nbsp;&nbsp;
    🚚 Free Shipping on orders over $100 – Shop now! &nbsp;&nbsp;
    🔥 Flash Sale: Up to 10% OFF on selected items! &nbsp;&nbsp;
    🎁 Buy 1 Get 1 coupon gift card code on all accessories – Today only! &nbsp;&nbsp;
    💳 Exclusive Discount: inbox WhatsApp or contact support to get the discount code! &nbsp;&nbsp;
    🛍️ New Arrivals just dropped – Grab them before they’re gone! &nbsp;&nbsp;
    🕒 Hurry! Sale ends in 24 hours – Don’t miss out! &nbsp;&nbsp;
    ⭐ Special Offer: Free gift with every purchase above $100. &nbsp;&nbsp;
    🎯 Mega Deals: Up to 25% off on fashion & lifestyle products. &nbsp;&nbsp;
    📦 Weekend Sale: Extra 15% OFF on all categories – Limited Stock! &nbsp;&nbsp;
    ⚡ Hot Picks: Trending products with massive discounts inside!
  </div>
</div>

<!-- ================= SUB HEADER (Top actions) ================= -->
<section class="sub-header" role="navigation" aria-label="Top sub header">
  <div class="sub-left">
    <button class="sub-btn btn-join" id="joinNowBtn">📝 Join Now</button>
    <button class="sub-btn btn-sign" id="signInBtn">🔒 Sign In</button>

    <div class="sub-dropdown">
      <button class="sub-link" id="topDealsBtn">🏷️ Top Deals</button>
      <div class="dropdown-panel">
        <a class="dropdown-item" href="/collections/deals">Today's Deals</a>
        <a class="dropdown-item" href="/collections/flash-sales">Flash Sales</a>
        <a class="dropdown-item" href="/collections/clearance">Clearance</a>
      </div>
    </div>

    <div class="sub-dropdown">
      <button class="sub-link">🎁 My Store</button>
      <div class="dropdown-panel">
        <a class="dropdown-item" href="/account">Account</a>
        <a class="dropdown-item" href="/orders">My Orders</a>
        <a class="dropdown-item" href="/wishlists">Wishlist</a>
      </div>
    </div>

    <button class="sub-btn" id="helpSupportBtn">❓ Help & Support</button>
    <button class="sub-btn" id="liveContactBtn">💬 Live Contact</button>
  </div>

  <div class="sub-right">
    <div class="sub-dropdown">
      <button class="sub-link">💲 View $ / EN</button>
      <div class="dropdown-panel">
        <a class="dropdown-item" href="#">USD - $</a>
        <a class="dropdown-item" href="#">BDT - ৳</a>
        <a class="dropdown-item" href="#">Change Language</a>
      </div>
    </div>

    <div class="sub-dropdown">
      <button class="sub-link">📍 Order Tracker</button>
      <div class="dropdown-panel" role="dialog">
        <form class="order-tracker-form" id="orderTrackerForm" onsubmit="return false;">
          <input type="text" id="orderIdInput" placeholder="Enter Order ID">
          <button type="submit" id="trackOrderBtn">Track</button>
        </form>
        <div id="orderTrackerResult" style="margin-top:8px;font-weight:600;display:none"></div>
      </div>
    </div>

    <button class="sub-link" id="mobileMenuToggle">☰ Menu</button>
    <div class="mobile-hamburger" id="mobileHamburger" aria-hidden="true"><span></span><span></span><span></span></div>
  </div>
</section>

<!-- Mobile Menu (overlay) -->
<div class="mobile-menu-overlay" id="mobileOverlay" aria-hidden="true">
  <div class="mobile-menu-inner">
    <div class="close-mobile" id="closeMobile">✕</div>
    <nav class="mobile-menu-nav">
      <a href="/collections/deals">Top Deals</a>
      <a href="/collections/brands">Brand Outlet</a>
      <a href="/pages/gift-cards">Gift Card</a>
      <a href="/pages/help">Help & Support</a>
      <a href="/account">My Account</a>
      <a href="/search">Search</a>
      <a href="#" id="mobileJoinBtn">Join Now</a>
      <a href="#" id="mobileSignBtn">Sign In</a>
    </nav>
  </div>
</div>

{% comment %}
  Shoparo.Store — Amazon Style Main Header (Height 58px)
{% endcomment %}

<header class="shoparo-header">
  <div class="header-bar">
    <!-- Left: Logo -->
    <div class="header-left">
      <a href="/" class="logo" aria-label="Shoparo">
        <img src="{{ 'shoparo-logo.svg' | asset_url }}" alt="Shoparo Logo">
      </a>

      <!-- Deliver to -->
      <div class="deliver-to">
        <i class="icon-location"></i>
        <div class="deliver-text">
          <span>Deliver to</span>
          <strong id="user-country">Loading…</strong>
        </div>
      </div>
    </div>

    <!-- Center: Search -->
    <div class="header-search">
      <div class="category-select">
        <button id="allCategoriesBtn">
          All Categories
        </button>
      </div>
      <input type="text" placeholder="Search products, categories or brands" id="searchInput">
      <button class="search-btn"><i class="icon-search"></i></button>
    </div>

    <!-- Right: Language + Account + Orders + Cart -->
    <div class="header-right">
      <div class="language-switch">
        <select id="langSelect">
          <option>EN</option>
          <option>BN</option>
        </select>
      </div>

      <div class="account-menu" id="accountBtn">
        <span class="small">Hello, Join & Sign In</span>
        <strong>My SAS Account</strong>
      </div>

      <div class="order-menu" id="orderBtn">
        <span class="small">Returns</span>
        <strong>& Orders</strong>
      </div>

      <div class="cart-menu">
        <i class="icon-cart"></i>
        <span class="cart-text">Cart</span>
        <span class="cart-count">{{ cart.item_count }}</span>
      </div>
    </div>
  </div>
</header>


<!-- ================= MEGA MENU ================= -->
<nav class="mega-menu" id="megaMenu" aria-label="All categories">
  {% assign main_categories = "Women's Clothing,Men's Clothing,Pet Supplies,Home & Garden,Health & Beauty,Baby Kids & Toys,Jewelry & Watches,Bags & Shoes,Home Improvement,Consumer Electronics,Sport & Outdoor" | split: "," %}
  {% for title in main_categories %}
    {% assign handle = title | handle %}
    {% assign col = collections[handle] %}
    <div class="mega-col">
      <h4 style="font-weight:800">{{ title }}</h4>
      <ul style="list-style:none;padding:0;margin:0">
        {% if col and col.products_count > 0 %}
          {% for product in col.products limit:5 %}
            <li style="display:flex;gap:8px;align-items:center;padding:6px 0">
              {% if product.featured_image %}
                <img src="{{ product.featured_image | img_url: '100x100' }}" alt="{{ product.title }}" style="width:56px;height:56px;border-radius:6px;object-fit:cover">
              {% else %}
                <img src="https://via.placeholder.com/100" alt="{{ product.title }}" style="width:56px;height:56px;border-radius:6px;object-fit:cover">
              {% endif %}
              <a href="{{ product.url }}" style="font-weight:700;color:#111">{{ product.title | truncate:36 }}</a>
            </li>
          {% endfor %}
        {% else %}
          <li>No items</li>
        {% endif %}
      </ul>
    </div>
  {% endfor %}
</nav>

<!-- ================= HERO SLIDER ================= -->
<section class="hero-slider" id="heroSlider" aria-label="Hero slider" data-autoplay-speed="5500">
  <div class="slide active" data-bg="https://images.unsplash.com/photo-1541099649105-f69ad21f3246?q=80&w=2000&auto=format&fit=crop&s=placeholder">
    <div class="overlay"></div>
    <div class="content">
      <div class="hero-eyebrow">Welcome</div>
      <h1 class="hero-title">Smart Shopping with Trusted Sellers</h1>
      <p class="hero-sub">Top brands, secure payment, fast delivery — shop with confidence.</p>
      <div class="hero-cta"><a class="hero-btn" href="/collections/frontpage">Shop Now</a></div>
    </div>
  </div>

  <div class="slide" data-bg="https://images.unsplash.com/photo-1512496015851-a90fb38ba796?q=80&w=2000&auto=format&fit=crop&s=placeholder">
    <div class="overlay"></div>
    <div class="content">
      <div class="hero-eyebrow">Hot Tech</div>
      <h1 class="hero-title">Latest Electronics & Gadgets</h1>
      <p class="hero-sub">Grab the best deals on mobile, audio & accessories.</p>
      <div class="hero-cta"><a class="hero-btn" href="/collections/electronics">Explore</a></div>
    </div>
  </div>

  <div class="slide" data-bg="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?q=80&w=2000&auto=format&fit=crop&s=placeholder">
    <div class="overlay"></div>
    <div class="content">
      <div class="hero-eyebrow">Home & Living</div>
      <h1 class="hero-title">Make Your Home Smarter</h1>
      <p class="hero-sub">Quality decor, kitchen & garden essentials.</p>
      <div class="hero-cta"><a class="hero-btn" href="/collections/home-garden">Shop Home</a></div>
    </div>
  </div>

  <div class="hero-arrow prev" id="heroPrev" aria-label="Previous">‹</div>
  <div class="hero-arrow next" id="heroNext" aria-label="Next">›</div>
  <div class="hero-dots" id="heroDots" role="tablist" aria-label="Slide indicators"></div>
</section>

<!-- ================= CTA CATEGORIES ================= -->
<section class="cta-categories" aria-label="Top categories">
  <div class="cta-item"><img src="https://via.placeholder.com/300x200?text=New+Product" alt=""><span>New Product</span></div>
  <div class="cta-item"><img src="https://via.placeholder.com/300x200?text=Trending" alt=""><span>Trending</span></div>
  <div class="cta-item"><img src="https://via.placeholder.com/300x200?text=Deals" alt=""><span>Special Deals</span></div>
</section>

<!-- ================= TRENDING ON GSS ================= -->
<section class="trending-wrap" aria-label="Trending on GSS">
  <h3 style="font-size:20px;margin-bottom:10px;font-weight:800">Trending on GSS</h3>

  <div class="trend-card">
    <img class="trend-media" src="https://via.placeholder.com/880x600?text=Fashion+Picks" alt="">
    <div class="trend-body">
      <div class="trend-title">Fashion Picks</div>
      <div class="trend-sub">Top trending clothing & accessories</div>
      <div style="display:flex;justify-content:space-between;align-items:center">
        <a href="/collections/fashion" style="font-weight:800;color:var(--primary)">Shop Fashion →</a>
        <div style="font-weight:700;color:#666">Up to 40% off</div>
      </div>
    </div>
  </div>

  <div class="trend-card">
    <img class="trend-media" src="https://via.placeholder.com/880x600?text=Electronics" alt="">
    <div class="trend-body">
      <div class="trend-title">Electronics Deals</div>
      <div class="trend-sub">Hot gadgets & accessories</div>
      <div style="display:flex;justify-content:space-between;align-items:center">
        <a href="/collections/electronics" style="font-weight:800;color:var(--primary)">Explore →</a>
        <div style="font-weight:700;color:#666">Free shipping $100+</div>
      </div>
    </div>
  </div>

  <div class="trend-card">
    <img class="trend-media" src="https://via.placeholder.com/880x600?text=Home+%26+Garden" alt="">
    <div class="trend-body">
      <div class="trend-title">Home & Garden</div>
      <div class="trend-sub">Make your home cozy & smart</div>
      <div style="display:flex;justify-content:space-between;align-items:center">
        <a href="/collections/home-garden" style="font-weight:800;color:var(--primary)">Shop Home →</a>
        <div style="font-weight:700;color:#666">Best sellers</div>
      </div>
    </div>
  </div>

  <div class="trend-card">
    <img class="trend-media" src="https://via.placeholder.com/880x600?text=Beauty+%26+Health" alt="">
    <div class="trend-body">
      <div class="trend-title">Beauty & Health</div>
      <div class="trend-sub">Skincare & wellness picks</div>
      <div style="display:flex;justify-content:space-between;align-items:center">
        <a href="/collections/beauty" style="font-weight:800;color:var(--primary)">Discover →</a>
        <div style="font-weight:700;color:#666">Top rated</div>
      </div>
    </div>
  </div>
</section>

<!-- ================= TOP PRODUCTS (Frontpage sample) ================= -->
<section class="top-products" aria-label="Top products">
  <h3>Top Products</h3>
  <div class="product-grid">
    {% assign products = collections.frontpage.products | slice:0,8 %}
    {% for product in products %}
      <div class="product-card" data-product-handle="{{ product.handle }}">
        {% if product.featured_image %}
          <img src="{{ product.featured_image | img_url: '400x400' }}" alt="{{ product.title }}">
        {% else %}
          <img src="https://via.placeholder.com/400x400?text=No+Image" alt="{{ product.title }}">
        {% endif %}
        <div class="product-title">{{ product.title | truncate:40 }}</div>
        <div class="product-price">{{ product.price | money }}</div>
        <div class="add-to-cart">Add to Cart</div>
      </div>
    {% endfor %}
  </div>
</section>

<!-- ================= MODALS: Join / Sign / Help / Live / Order Tracker ================= -->
<div id="joinNowPage" class="modal-overlay" role="dialog" aria-hidden="true">
  <div class="modal">
    <div class="close-modal" id="joinClose" aria-label="Close">✕</div>
    <h2>Create an account</h2>
    <form id="joinForm" action="/account" method="post">
      <input type="hidden" name="form_type" value="create_customer">
      <input type="hidden" name="utf8" value="✓">
      <div style="display:flex;gap:8px">
        <input name="customer[first_name]" placeholder="First name" style="flex:1">
        <input name="customer[last_name]" placeholder="Last name" style="flex:1">
      </div>
      <input name="customer[email]" type="email" placeholder="Email">
      <input name="customer[phone]" type="text" placeholder="Phone">
      <input name="customer[password]" type="password" placeholder="Password">
      <button type="submit">Join Now</button>
    </form>
    <div class="social-btns">
      <a class="google" href="/auth/google"><img src="https://cdn-icons-png.flaticon.com/512/2991/2991148.png" alt=""> Google</a>
      <a class="facebook" href="/auth/facebook"><img src="https://cdn-icons-png.flaticon.com/512/124/124010.png" alt=""> Facebook</a>
      <a class="apple" href="/auth/apple"><img src="https://cdn-icons-png.flaticon.com/512/179/179309.png" alt=""> Apple</a>
    </div>
  </div>
</div>

<div id="signInPage" class="modal-overlay" role="dialog" aria-hidden="true">
  <div class="modal">
    <div class="close-modal" id="signClose" aria-label="Close">✕</div>
    <h2>Sign In</h2>
    <form id="signForm" action="/account/login" method="post">
      <input type="hidden" name="form_type" value="customer_login">
      <input type="hidden" name="utf8" value="✓">
      <input name="customer[email]" type="email" placeholder="Email">
      <input name="customer[password]" type="password" placeholder="Password">
      <button type="submit">Sign In</button>
    </form>
    <div class="social-btns">
      <a class="google" href="/auth/google"><img src="https://cdn-icons-png.flaticon.com/512/2991/2991148.png" alt=""> Google</a>
      <a class="facebook" href="/auth/facebook"><img src="https://cdn-icons-png.flaticon.com/512/124/124010.png" alt=""> Facebook</a>
      <a class="apple" href="/auth/apple"><img src="https://cdn-icons-png.flaticon.com/512/179/179309.png" alt=""> Apple</a>
    </div>
  </div>
</div>

<div id="helpSupportModal" class="modal-overlay" role="dialog" aria-hidden="true">
  <div class="modal">
    <div class="close-modal" data-close-help aria-label="Close">✕</div>
    <h2>Help & Support</h2>
    <p>Visit our Help Center or contact support.</p>
    <a href="/pages/help" class="dropdown-item">Visit Help Center</a>
    <a href="/contact" class="dropdown-item">Contact Us</a>
  </div>
</div>

<div id="liveContactModal" class="modal-overlay" role="dialog" aria-hidden="true">
  <div class="modal">
    <div class="close-modal" data-close-live aria-label="Close">✕</div>
    <h2>Live Contact</h2>
    <p>Start a live chat or request a call-back.</p>
    <div style="display:flex;gap:8px">
      <button class="sub-btn">Start Chat</button>
      <button class="sub-btn">Request Call</button>
    </div>
  </div>
</div>

<!-- ================= INLINE JS ================= -->
<script>
/* ========================= GSS HEADER JS – All interactions ========================= */
(function(){
  if(window._gssMasterInit) return; window._gssMasterInit = true;

  // Helpers
  const $ = (s,ctx=document)=> ctx.querySelector(s);
  const $$ = (s,ctx=document)=> Array.from((ctx||document).querySelectorAll(s));

/* ================= ANNOUNCEMENT SCROLL ================= */
(function(){
  const slider = document.querySelector('.announcement-slider');
  if (!slider) return;

  let pos = 0;
  const speed = 0.6; // control text scroll speed

  function tick() {
    pos += speed;
    if (pos > slider.scrollWidth / 2) pos = 0;
    slider.style.transform = `translateX(-${pos}px)`;
    requestAnimationFrame(tick);
  }

  requestAnimationFrame(tick);
})();


  /* Dropdown toggles */
  $$('.sub-dropdown, .gss-dropdown').forEach(drop=>{
    const btn = drop.querySelector('button');
    const panel = drop.querySelector('.dropdown-panel, .gss-panel');
    if(!btn || !panel) return;
    btn.addEventListener('click', e=>{
      e.stopPropagation();
      panel.classList.toggle('show');
      btn.setAttribute('aria-expanded', panel.classList.contains('show'));
    });

  });
  document.addEventListener('click', e=>{
    $$('.dropdown-panel.show, .gss-panel.show').forEach(p=>p.classList.remove('show'));
  });
  // Auto-detect country via IP (free API)
fetch("https://ipapi.co/json/")
  .then(res => res.json())
  .then(data => {
    document.getElementById('user-country').textContent =
      data && data.country_name ? data.country_name : 'Your Country';
  })
  .catch(() => (document.getElementById('user-country').textContent = 'Your Country'));

// Dropdown / Modal example (existing join, sign, etc.)
document.getElementById('accountBtn')?.addEventListener('click', () => {
  document.getElementById('signInPage').style.display = 'flex';
});
document.getElementById('orderBtn')?.addEventListener('click', () => {
  alert('Redirecting to Orders page…');
});

document.addEventListener('DOMContentLoaded', () => {
  const btn = document.getElementById('allCategoriesBtn');
  const menu = document.querySelector('.mega-menu');
  if (btn && menu) {
    btn.addEventListener('click', () => {
      menu.classList.toggle('open');
    });
  }
});
  /* Mobile menu */
  const mobileOverlay = document.getElementById('mobileOverlay');
  const mobileToggle = document.getElementById('mobileMenuToggle') || document.getElementById('mobileHamburger');
  const mobileClose = document.getElementById('closeMobile');
  (mobileToggle && mobileOverlay) && mobileToggle.addEventListener('click', e=>{ e.preventDefault(); mobileOverlay.style.display='flex'; mobileOverlay.setAttribute('aria-hidden','false'); });
  mobileClose && mobileClose.addEventListener('click', ()=>{ mobileOverlay.style.display='none'; mobileOverlay.setAttribute('aria-hidden','true'); });

  mobileOverlay && mobileOverlay.addEventListener('click', e=>{ if(e.target === mobileOverlay){ mobileOverlay.style.display='none'; mobileOverlay.setAttribute('aria-hidden','true'); } });

  /* Modal open/close */
  function showModal(el){ if(!el) return; el.classList.add('show'); el.style.display='flex'; el.setAttribute('aria-hidden','false'); }
  function hideModal(el){ if(!el) return; el.classList.remove('show'); el.style.display='none'; el.setAttribute('aria-hidden','true'); }

  $('#joinNowBtn') && $('#joinNowBtn').addEventListener('click', ()=> showModal(document.getElementById('joinNowPage')));
  $('#signInBtn') && $('#signInBtn').addEventListener('click', ()=> showModal(document.getElementById('signInPage')));
  $('#helpSupportBtn') && $('#helpSupportBtn').addEventListener('click', ()=> showModal(document.getElementById('helpSupportModal')));
  $('#liveContactBtn') && $('#liveContactBtn').addEventListener('click', ()=> showModal(document.getElementById('liveContactModal')));

  $$('.modal-overlay .close-modal').forEach(btn => btn.addEventListener('click', function(){ this.closest('.modal-overlay').style.display='none'; }));

  $$('.modal-overlay').forEach(w => w.addEventListener('click', function(e){ if(e.target === this) this.style.display='none'; }));

  /* Order tracker */
  const orderForm = document.getElementById('orderTrackerForm');
  if(orderForm){
    orderForm.addEventListener('submit', function(e){
      e.preventDefault();
      const id = document.getElementById('orderIdInput').value.trim();
      const resEl = document.getElementById('orderTrackerResult');
      if(!id){ resEl.style.display='block'; resEl.textContent = 'Please enter Order ID.'; return; }
      resEl.style.display='block'; resEl.textContent = 'Searching for Order: ' + id + '...';
      setTimeout(()=> resEl.textContent = 'Order ' + id + ' — Status: In Transit (Demo)', 900);
    });
  }

  /* Mega menu (Shop By) */
  const allCatBtn = document.getElementById('allCategoriesBtn');
  const megaMenu = document.getElementById('megaMenu');
  if(allCatBtn && megaMenu){
    allCatBtn.addEventListener('click', e=>{
      e.stopPropagation();
      megaMenu.classList.toggle('active');
      allCatBtn.setAttribute('aria-expanded', megaMenu.classList.contains('active'));
    });
    document.addEventListener('click', e=>{
      if(!megaMenu.contains(e.target) && !allCatBtn.contains(e.target)) megaMenu.classList.remove('active');
    });
  }

  /* Search redirect (supports pasted URLs) */
  const searchInput = document.getElementById('searchInput');
  const searchBtn = document.getElementById('searchBtn');
  const searchRedirect = ()=>{ const q = (searchInput && searchInput.value) ? searchInput.value.trim() : ''; if(!q) return; if(q.startsWith('http')) { window.location.href = q; return; } window.location.href = '/search?q=' + encodeURIComponent(q); };
  searchBtn && searchBtn.addEventListener('click', searchRedirect);
  searchInput && searchInput.addEventListener('keypress', e=>{ if(e.key==='Enter'){ e.preventDefault(); searchRedirect(); } });

  /* Cart count - fetch /cart.js */
  const cartCountEl = document.getElementById('cartCount');
  async function refreshCartCount(){
    try{
      const res = await fetch('/cart.js');
      if(!res.ok) return;
      const cart = await res.json();
      if(cartCountEl) cartCountEl.textContent = cart.item_count || 0;
    }catch(e){ console.warn('cart fetch failed', e); }
  }
  refreshCartCount();

  /* Hero slider (vanilla, lazy bg) */
  (function(){
    const root = document.getElementById('heroSlider') || document.querySelector('.hero-slider');
    if(!root) return;
    const slides = Array.from(root.querySelectorAll('.slide, .gss-slide'));
    const prev = root.querySelector('#heroPrev, .hero-arrow.prev');
    const next = root.querySelector('#heroNext, .hero-arrow.next');
    const dotsWrap = root.querySelector('#heroDots, .hero-dots');
    const speed = parseInt(root.dataset.autoplaySpeed || 5500, 10) || 6000;

    let current = 0, timer = null;

    // build dots
    slides.forEach((s,i)=>{
      const d = document.createElement('button');
      d.className = 'hero-dot' + (i===0 ? ' active' : '');
      d.setAttribute('aria-label', 'Slide ' + (i+1));
      d.addEventListener('click', ()=>{ goTo(i); resetAuto(); });
      dotsWrap && dotsWrap.appendChild(d);
    });

    function show(i){
      slides.forEach((s,idx)=>{ if(idx===i){ s.classList.add('active'); s.setAttribute('aria-hidden','false'); } else { s.classList.remove('active'); s.setAttribute('aria-hidden','true'); } });
      if(dotsWrap) Array.from(dotsWrap.children).forEach((d,idx)=> d.classList.toggle('active', idx===i));
      current = i;
    }

    function lazyLoad(i){
      const s = slides[i];
      if(!s) return;
      const bg = s.getAttribute('data-bg');
      if(bg && !s.style.backgroundImage){
        const img = new Image();
        img.src = bg;
        img.onload = ()=>{ s.style.backgroundImage = `url('${bg}')`; s.removeAttribute('data-bg'); };
        img.onerror = ()=>{ s.style.backgroundImage = `url('${bg}')`; s.removeAttribute('data-bg'); };
      }
    }

    function goTo(i){
      const idx = (i + slides.length) % slides.length;
      lazyLoad(idx);
      show(idx);
    }
    function nextSlide(){ goTo(current + 1); }

    // Preload first slide only quickly then lazy load others
    lazyLoad(0);
    show(0);

    function startAuto(){ stopAuto(); timer = setInterval(nextSlide, speed); }
    function stopAuto(){ if(timer) clearInterval(timer); timer = null; }
    function resetAuto(){ stopAuto(); startAuto(); }

    next && next.addEventListener('click', ()=> { nextSlide(); resetAuto(); });
    prev && prev.addEventListener('click', ()=> { goTo(current - 1); resetAuto(); });

    root.addEventListener('mouseenter', ()=> stopAuto());
    root.addEventListener('mouseleave', ()=> startAuto());

    // touch
    let startX = 0;
    root.addEventListener('touchstart', e=> startX = e.touches[0].clientX, {passive:true});
    root.addEventListener('touchend', e=>{
      const endX = e.changedTouches[0].clientX;
      if(Math.abs(startX - endX) > 60){
        if(startX > endX) nextSlide(); else goTo(current - 1);
        resetAuto();
      }
    }, {passive:true});

    startAuto();
  })();

  /* ESC to close */
  document.addEventListener('keydown', function(e){
    if(e.key === 'Escape'){
      $$('.dropdown-panel.show, .gss-panel.show').forEach(p=>p.classList.remove('show'));
      $$('.modal-overlay.show').forEach(m=>{ m.classList.remove('show'); m.style.display='none'; });
      document.getElementById('megaMenu') && document.getElementById('megaMenu').classList.remove('active');
    }
  });

  console.log('GSS master header initialized');
})();
</script>

<!-- ================= END MASTER HEADER ================= -->