<style>
/* ── Envymarket Header ──────────────────────────────────── */
.envy-header {
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 1050;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.envy-topbar {
  padding: 12px 0;
  border-bottom: 1px solid #e8e8e8;
}
.envy-topbar-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 32px;
  max-width: 1400px;
  margin: 0 auto;
}
/* Logo */
.envy-logo {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  flex-shrink: 0;
}
.envy-logo-img {
  max-height: 38px;
  width: auto;
  display: block;
}
.envy-logo-text {
  font-size: 22px;
  font-weight: 800;
  color: #1a1a2e;
  letter-spacing: -0.5px;
  text-decoration: none;
  line-height: 1.1;
}
.envy-logo-tagline {
  font-size: 9px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  margin-top: 3px;
}
/* Search bar */
.envy-search-wrap {
  flex: 1;
  max-width: 520px;
  margin: 0 auto;
}
.envy-search-box {
  display: flex;
  align-items: center;
  width: 100%;
  border: 2px solid #1a1a2e;
  border-radius: 50px;
  overflow: hidden;
  background: #fff;
}
.envy-search-dept {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  height: 42px;
  color: #555;
  font-size: 13px;
  font-weight: 500;
  border-right: 1px solid #ddd;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  background: #f8f8f8;
  border-top: none;
  border-bottom: none;
  border-left: none;
}
.envy-search-dept svg { width: 10px; height: 10px; fill: #666; }
.envy-dept-drop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  min-width: 220px;
  padding: 8px 0;
  z-index: 300;
  display: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.envy-dept-drop.open { display: block; }
.envy-dept-drop a {
  display: block;
  padding: 10px 16px;
  color: #555;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s;
}
.envy-dept-drop a:hover { background: #f5f5f5; }
.envy-search-form {
  display: flex;
  flex: 1;
  align-items: center;
  margin: 0;
}
.envy-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #333;
  font-size: 14px;
  padding: 0 14px;
  height: 42px;
}
.envy-search-input::placeholder { color: #999; }
.envy-search-btn {
  background: #1a1a2e;
  border: none;
  color: #fff;
  padding: 0 20px;
  height: 42px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.envy-search-btn:hover { background: #2d2d4a; }
.envy-search-btn svg { width: 16px; height: 16px; }
/* Topbar right */
.envy-topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.envy-topbar-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #555;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}
.envy-topbar-link:hover { color: #1a1a2e; }
.envy-topbar-link svg { width: 18px; height: 18px; }
/* Auth buttons */
.envy-auth-btns {
  display: flex;
  align-items: center;
  gap: 10px;
}
.envy-signin {
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: #555;
  border: 1px solid #ddd;
  transition: all 0.2s;
}
.envy-signin:hover { border-color: #1a1a2e; color: #1a1a2e; }
.envy-signup {
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  background: #1a1a2e;
  color: #fff;
  transition: background 0.2s;
}
.envy-signup:hover { background: #2d2d4a; color: #fff; }
/* Cart */
.envy-cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #f5f5f5;
  color: #555;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.envy-cart-btn:hover { background: #1a1a2e; color: #fff; }
.envy-cart-btn svg { width: 18px; height: 18px; }
.envy-cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* User dropdown */
.envy-user-wrap { position: relative; }
.envy-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  background: #f5f5f5;
  border-radius: 50px;
  color: #333;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
}
.envy-user-btn:hover { background: #e8e8e8; }
.envy-user-btn img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}
.envy-user-drop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  min-width: 200px;
  padding: 8px 0;
  z-index: 200;
  display: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.envy-user-wrap:hover .envy-user-drop { display: block; }
.envy-user-drop a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: #555;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s;
}
.envy-user-drop a:hover { background: #f5f5f5; }
.envy-user-drop svg { width: 16px; height: 16px; stroke: #666; fill: none; }
.envy-drop-divider { height: 1px; background: #eee; margin: 6px 0; }
/* Nav bar */
.envy-navbar {
  background: #1a1a2e;
}
.envy-navbar-inner {
  display: flex;
  align-items: center;
  padding: 0 32px;
  max-width: 1400px;
  margin: 0 auto;
  gap: 8px;
}
/* Browse Categories */
.envy-cat-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1a1a2e;
  color: #fff;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  border-right: 1px solid rgba(255,255,255,0.1);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}
.envy-cat-btn:hover { background: #2d2d4a; }
.envy-cat-btn svg { width: 16px; height: 12px; }
.envy-cat-wrap { position: relative; }
.envy-cat-drop {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  min-width: 280px;
  padding: 12px 0;
  z-index: 200;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.envy-cat-drop.open { display: block; }
.envy-cat-drop-title {
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.envy-cat-drop a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: #333;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s;
}
.envy-cat-drop a:hover { background: #f5f5f5; }
.envy-cat-drop a svg { width: 18px; height: 18px; stroke: #666; fill: none; }
/* Nav links */
.envy-nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.envy-nav-links > li > a {
  display: block;
  padding: 14px 18px;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
}
.envy-nav-links > li > a:hover {
  color: #fff;
  background: rgba(255,255,255,0.05);
}
/* Dropdown */
.envy-nav-drop {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  min-width: 200px;
  padding: 8px 0;
  z-index: 100;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.envy-nav-links > li { position: relative; }
.envy-nav-links > li:hover .envy-nav-drop { display: block; }
.envy-nav-drop a {
  display: block;
  padding: 10px 18px;
  color: #555;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s;
}
.envy-nav-drop a:hover { background: #f5f5f5; }
/* Vendor button */
.envy-vendor-btn {
  margin-left: auto;
  padding: 10px 22px;
  background: #22c55e;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 50px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}
.envy-vendor-btn:hover { background: #16a34a; color: #fff; }
/* Promo bar */
.envy-promo-bar {
  background: #8cc63f;
  text-align: center;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #111;
  line-height: 1.4;
}
.envy-promo-bar a {
  color: #111;
  text-decoration: underline;
  font-weight: 700;
}
/* Mobile-only topbar */
.envy-mobile-topbar {
  display: none;
  background: #222;
  align-items: center;
  padding: 0 12px;
  height: 54px;
  gap: 10px;
}
.envy-mob-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #3a3a3a;
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
}
.envy-mob-icon-btn svg { width: 20px; height: 20px; }
.envy-mobile-topbar-logo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.envy-mobile-topbar-logo img {
  max-height: 30px;
  width: auto;
}
.envy-mobile-topbar-logo span {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
}
.envy-mobile-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  position: relative;
}
.envy-mob-cart-wrap {
  position: relative;
}
.envy-mob-cart-wrap .envy-cart-badge {
  top: -4px;
  right: -4px;
}
/* Mobile toggler */
.envy-mob-toggler {
  display: none;
  background: transparent;
  border: none;
  padding: 10px;
  cursor: pointer;
  margin-left: auto;
}
/* Mobile styles */
@media (max-width: 991px) {
  .envy-nav-links { display: none; }
  .envy-vendor-btn { display: none; }
  .envy-mob-toggler { display: flex; }
  .envy-search-wrap { max-width: 280px; }
}
@media (max-width: 768px) {
  .envy-promo-bar { display: block; }
  .envy-mobile-topbar { display: flex; }
  .envy-topbar { display: none; }
  .envy-navbar { display: none; }
  .envy-topbar-inner {
    padding: 0 16px;
    gap: 12px;
  }
  .envy-search-wrap { display: none; }
  .envy-topbar-link span { display: none; }
  .envy-auth-btns { display: none; }
  .envy-logo-tagline { display: none; }
  .envy-navbar-inner {
    padding: 10px 12px;
    gap: 8px;
  }
  .envy-cat-btn {
    padding: 10px 12px;
    font-size: 12px;
    gap: 8px;
  }
  .envy-cat-btn svg { width: 16px; height: 12px; }
  .envy-cat-btn span { display: none; }
  .envy-search-mob {
    flex: 1;
    min-width: 0;
  }
  .envy-search-mob form {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 50px;
    overflow: hidden;
  }
  .envy-search-mob input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #333;
    font-size: 13px;
    padding: 8px 12px;
  }
  .envy-search-mob button {
    background: transparent;
    border: none;
    color: #888;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  .envy-search-mob button svg { width: 16px; height: 16px; }
}
/* Mobile menu */
.envy-mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 100vh;
  background: #111111;
  z-index: 9999;
  overflow-y: auto;
  box-shadow: 4px 0 20px rgba(0,0,0,0.5);
}
.envy-mobile-menu.open { display: block; }
.envy-mobile-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.7);
  z-index: 9998;
}
.envy-mobile-overlay.open { display: block; }
.envy-mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}
.envy-mobile-menu-title {
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: #22c55e;
  width: calc(100% - 52px);
}
.envy-mobile-menu-close {
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.envy-mobile-menu-content {
  padding: 0;
}
.envy-mobile-link {
  display: block;
  padding: 16px 20px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.envy-mobile-link:hover { background: rgba(255,255,255,0.05); }
.envy-mobile-dropdown {
  display: block;
  cursor: pointer;
  position: relative;
}
.envy-mobile-dropdown .envy-mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.envy-mobile-dropdown-icon {
  font-size: 18px;
  color: rgba(255,255,255,0.5);
  transition: transform 0.2s;
}
.envy-mobile-dropdown.open .envy-mobile-dropdown-icon {
  transform: rotate(180deg);
}
.envy-mobile-dropdown-content {
  display: none;
  padding-left: 20px;
  background: rgba(0,0,0,0.3);
}
.envy-mobile-dropdown.open .envy-mobile-dropdown-content {
  display: block;
}
.envy-mobile-dropdown-content a {
  display: block;
  padding: 12px 20px;
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.envy-mobile-dropdown-content a:hover { color: #fff; }
</style>

<header class="envy-header">

  {{-- ── Promo bar (mobile) ── --}}
  <div class="envy-promo-bar" style="display:none;">
    Digital assets &amp; creative tools &mdash; <a href="{{ url('/shop') }}">Browse now</a>
  </div>

  {{-- ── Mobile-only top bar ── --}}
  <div class="envy-mobile-topbar">
    {{-- Hamburger --}}
    <button class="envy-mob-icon-btn" id="envy-mob-toggle2" aria-label="Menu">
      <svg viewBox="0 0 24 16" fill="none"><rect width="24" height="2" rx="1" fill="#fff"/><rect y="7" width="24" height="2" rx="1" fill="#fff"/><rect y="14" width="24" height="2" rx="1" fill="#fff"/></svg>
    </button>

    {{-- Logo --}}
    <a class="envy-mobile-topbar-logo" href="{{ URL::to('/') }}">
      @if($allsettings->site_logo != '')
        <img src="{{ url('/') }}/public/storage/settings/{{ $allsettings->site_logo }}" alt="{{ $allsettings->site_title }}" />
      @else
        <span>{{ $allsettings->site_title }}</span>
      @endif
    </a>

    {{-- Right icons --}}
    <div class="envy-mobile-topbar-right">
      {{-- Cart --}}
      <div class="envy-mob-cart-wrap">
        <a class="envy-mob-icon-btn" href="{{ url('/cart') }}" title="Cart">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
          @if($cartcount != 0)
          <span class="envy-cart-badge">{{ $cartcount }}</span>
          @endif
        </a>
      </div>
      {{-- User / Login --}}
      @if(Auth::check())
      <a class="envy-mob-icon-btn" href="{{ URL::to('/profile-settings') }}" title="Account">
        @if(Auth::user()->user_photo != '')
        <img src="{{ url('/') }}/public/storage/users/{{ Auth::user()->user_photo }}" alt="{{ Auth::user()->name }}" style="width:24px;height:24px;border-radius:50%;object-fit:cover;" />
        @else
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        @endif
      </a>
      @else
      <a class="envy-mob-icon-btn" href="{{ url('/login') }}" title="Sign In">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
      </a>
      @endif
    </div>
  </div>

  <!-- ── Top bar ── -->
  <div class="envy-topbar">
    <div class="envy-topbar-inner">

      {{-- Logo --}}
      <a class="envy-logo" href="{{ URL::to('/') }}">
        @if($allsettings->site_logo != '')
          <img class="envy-logo-img" src="{{ url('/') }}/public/storage/settings/{{ $allsettings->site_logo }}" alt="{{ $allsettings->site_title }}" />
        @else
          <span class="envy-logo-text">{{ $allsettings->site_title }}</span>
          <span class="envy-logo-tagline">Create Your Dream Website</span>
        @endif
      </a>

      {{-- Search bar (desktop) --}}
      <div class="envy-search-wrap" style="position:relative;">
        <div class="envy-search-box">
          <div class="envy-search-dept-wrap" style="position:relative;">
          <button class="envy-search-dept" type="button" id="envy-dept-btn">
            All Categories
            <svg viewBox="0 0 10 6"><path d="M0 0l5 6 5-6z"/></svg>
          </button>
          <div class="envy-dept-drop" id="envy-dept-drop">
            <a href="{{ route('shop') }}">All Categories</a>
            @if(count($categories['menu']) > 0)
              @foreach($categories['menu'] as $menu)
            <a href="{{ URL::to('/shop/category/') }}/{{ $menu->category_slug }}">{{ $menu->category_name }}</a>
              @endforeach
            @endif
          </div>
          </div>
          <form class="envy-search-form" action="{{ route('shop') }}" method="post" enctype="multipart/form-data">
            {{ csrf_field() }}
            <input class="envy-search-input" type="text" name="product_item" placeholder="Search for anything...">
            <button class="envy-search-btn" type="submit">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
              Search
            </button>
          </form>
        </div>
      </div>

      {{-- Right section --}}
      <div class="envy-topbar-right">

        {{-- Compare --}}
        <a class="envy-topbar-link" href="{{ URL::to('/compare') }}">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"/></svg>
          <span>Compare</span>
        </a>

        {{-- Wishlist --}}
        <a class="envy-topbar-link" href="{{ URL::to('/favourites') }}">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
          <span>Wishlist</span>
        </a>

        {{-- Cart --}}
        <a class="envy-cart-btn" href="{{ url('/cart') }}" title="Cart">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
          @if($cartcount != 0)
          <span class="envy-cart-badge">{{ $cartcount }}</span>
          @endif
        </a>

        {{-- Guest: Sign In & Sign Up --}}
        @if(Auth::guest())
        <div class="envy-auth-btns">
          <a class="envy-signin" href="{{ url('/login') }}">Sign In</a>
          <a class="envy-signup" href="{{ url('/register') }}">Sign Up</a>
        </div>
        @endif

        {{-- Logged in: User dropdown --}}
        @if(Auth::check())
        <div class="envy-user-wrap">
          <a class="envy-user-btn" href="javascript:void(0)">
            @if(Auth::user()->user_photo != '')
            <img src="{{ url('/') }}/public/storage/users/{{ Auth::user()->user_photo }}" alt="{{ Auth::user()->name }}" />
            @else
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
            @endif
            {{ Auth::user()->name }}
          </a>
          <div class="envy-user-drop">
            @if(Auth::user()->user_type == 'admin')
            <a href="{{ url('/admin') }}" target="_blank"><svg viewBox="0 0 24 24" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>Admin Panel</a>
            <div class="envy-drop-divider"></div>
            <a href="{{ url('/logout') }}"><svg viewBox="0 0 24 24" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>Logout</a>
            @endif
            @if(Auth::user()->user_type == 'vendor')
            <a href="{{ URL::to('/user') }}/{{ Auth::user()->username }}"><svg viewBox="0 0 24 24" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>Profile</a>
            <a href="{{ URL::to('/profile-settings') }}"><svg viewBox="0 0 24 24" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>Settings</a>
            <a href="{{ URL::to('/purchases') }}"><svg viewBox="0 0 24 24" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>Purchase</a>
            <a href="{{ URL::to('/favourites') }}"><svg viewBox="0 0 24 24" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>Favourites</a>
            <a href="{{ URL::to('/sales') }}"><svg viewBox="0 0 24 24" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>Sales</a>
            <a href="{{ URL::to('/manage-item') }}"><svg viewBox="0 0 24 24" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Manage Items</a>
            <div class="envy-drop-divider"></div>
            <a href="{{ url('/logout') }}"><svg viewBox="0 0 24 24" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>Logout</a>
            @endif
            @if(Auth::user()->user_type == 'customer')
            <a href="{{ URL::to('/user') }}/{{ Auth::user()->username }}"><svg viewBox="0 0 24 24" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>Profile</a>
            <a href="{{ URL::to('/profile-settings') }}"><svg viewBox="0 0 24 24" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>Settings</a>
            <a href="{{ URL::to('/purchases') }}"><svg viewBox="0 0 24 24" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>Purchase</a>
            <a href="{{ URL::to('/favourites') }}"><svg viewBox="0 0 24 24" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>Favourites</a>
            <div class="envy-drop-divider"></div>
            <a href="{{ url('/logout') }}"><svg viewBox="0 0 24 24" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>Logout</a>
            @endif
          </div>
        </div>
        @endif

        {{-- Mobile toggler --}}
        <button class="envy-mob-toggler" id="envy-mob-toggle" aria-label="Menu">
          <svg width="24" height="16" viewBox="0 0 24 16" fill="none"><rect width="24" height="2" rx="1" fill="#555"/><rect y="7" width="24" height="2" rx="1" fill="#555"/><rect y="14" width="24" height="2" rx="1" fill="#555"/></svg>
        </button>

      </div>
    </div>
  </div>

  {{-- Navigation bar --}}
  <div class="envy-navbar">
    <div class="envy-navbar-inner">

      {{-- Browse Categories --}}
      <div class="envy-cat-wrap">
        <button class="envy-cat-btn" type="button" id="envy-cat-btn">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
          <span>Browse Categories</span>
        </button>
        <div class="envy-cat-drop" id="envy-cat-drop">
          <div class="envy-cat-drop-title">Categories</div>
          @if(count($categories['menu']) > 0)
            @foreach($categories['menu'] as $menu)
          <a href="{{ URL::to('/shop/category/') }}/{{ $menu->category_slug }}">
            <svg viewBox="0 0 24 24" stroke-width="2"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>
            {{ $menu->category_name }}
          </a>
            @endforeach
          @endif
          <a href="{{ url('/shop') }}" style="border-top: 1px solid #eee; margin-top: 8px; padding-top: 14px;">
            <svg viewBox="0 0 24 24" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
            View All Categories
          </a>
        </div>
      </div>

      {{-- Nav links --}}
      <ul class="envy-nav-links">
        <li><a href="{{ URL::to('/') }}">Home</a></li>
        <li>
          <a href="javascript:void(0)">Pages</a>
          <div class="envy-nav-drop">
            <a href="{{ url('/featured-items') }}">Featured Items</a>
            <a href="{{ url('/free-items') }}">Free Items</a>
            <a href="{{ url('/new-releases') }}">New Releases</a>
            <a href="{{ url('/popular-items') }}">Popular Items</a>
            <a href="{{ url('/top-authors') }}">Top Authors</a>
            @if(count($allpages['pages']) != 0)
            <div class="envy-drop-divider"></div>
            @foreach($allpages['pages'] as $pages)
            <a href="{{ URL::to('/') }}/{{ $pages->page_slug }}">{{ $pages->page_title }}</a>
            @endforeach
            @endif
          </div>
        </li>
        <li><a href="{{ URL::to('/user-reviews') }}">Reviews</a></li>
        <li><a href="{{ URL::to('/collections') }}">Collections</a></li>
        <li><a href="{{ URL::to('/about') }}">About</a></li>
        @if($allsettings->site_blog_display == 1)
        <li><a href="{{ URL::to('/blog') }}">Blog</a></li>
        @endif
      </ul>

      {{-- Mobile search --}}
      <div class="envy-search-mob" style="display:none;">
        <form action="{{ route('shop') }}" method="post" enctype="multipart/form-data">
          {{ csrf_field() }}
          <input type="text" name="product_item" placeholder="Search...">
          <button type="submit">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
          </button>
        </form>
      </div>

      {{-- Become a Vendor --}}
      <a class="envy-vendor-btn" href="{{ url('/start-selling') }}">Become a Vendor</a>

    </div>
  </div>

  {{-- Mobile overlay --}}
  <div class="envy-mobile-overlay" id="envy-mob-overlay"></div>

  {{-- Mobile menu --}}
  <div class="envy-mobile-menu" id="envy-mob-menu">
    <div class="envy-mobile-menu-header">
      <span class="envy-mobile-menu-title">Web Themes & Templates</span>
      <button class="envy-mobile-menu-close" id="envy-mob-close">&times;</button>
    </div>
    <div class="envy-mobile-menu-content">
      <form action="{{ route('shop') }}" method="post" enctype="multipart/form-data" style="padding:16px 20px;border-bottom:1px solid rgba(255,255,255,0.1);">
        {{ csrf_field() }}
        <div style="display:flex;align-items:center;background:#fff;border-radius:8px;padding:0 12px;">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
          <input type="text" name="product_item" placeholder="Search..." style="flex:1;background:transparent;border:none;outline:none;color:#333;font-size:14px;padding:12px;" />
        </div>
      </form>

      <a href="{{ URL::to('/') }}" class="envy-mobile-link">Home</a>
      <a href="{{ url('/featured-items') }}" class="envy-mobile-link">Pages</a>
      <a href="{{ URL::to('/user-reviews') }}" class="envy-mobile-link">Reviews</a>
      <a href="{{ URL::to('/collections') }}" class="envy-mobile-link">Collections</a>
      <a href="{{ URL::to('/about') }}" class="envy-mobile-link">About</a>
      @if($allsettings->site_blog_display == 1)
      <a href="{{ URL::to('/blog') }}" class="envy-mobile-link">Blog</a>
      @endif
      <a href="{{ url('/start-selling') }}" class="envy-mobile-link">Become a Vendor</a>
    </div>
  </div>

</header>

<script>
(function(){
  var tog = document.getElementById('envy-mob-toggle');
  var menu = document.getElementById('envy-mob-menu');
  var overlay = document.getElementById('envy-mob-overlay');
  var closeBtn = document.getElementById('envy-mob-close');

  function openMenu(){
    menu.classList.add('open');
    overlay.classList.add('open');
    document.body.style.overflow = 'hidden';
  }

  function closeMenu(){
    menu.classList.remove('open');
    overlay.classList.remove('open');
    document.body.style.overflow = '';
  }

  if(tog && menu){
    tog.addEventListener('click', openMenu);
  }
  var tog2 = document.getElementById('envy-mob-toggle2');
  if(tog2 && menu){
    tog2.addEventListener('click', openMenu);
  }
  if(closeBtn){
    closeBtn.addEventListener('click', closeMenu);
  }
  if(overlay){
    overlay.addEventListener('click', closeMenu);
  }
  // Mobile search toggle
  function toggleMobileSearch(){
    var searchMob = document.querySelector('.envy-search-mob');
    if(searchMob){
      searchMob.style.display = window.innerWidth <= 768 ? 'flex' : 'none';
    }
  }
  toggleMobileSearch();
  window.addEventListener('resize', toggleMobileSearch);
  // All Categories dropdown
  var deptBtn = document.getElementById('envy-dept-btn');
  var deptDrop = document.getElementById('envy-dept-drop');
  if(deptBtn && deptDrop){
    deptBtn.addEventListener('click', function(e){
      e.stopPropagation();
      deptDrop.classList.toggle('open');
    });
    document.addEventListener('click', function(e){
      if(!deptDrop.contains(e.target) && e.target !== deptBtn){
        deptDrop.classList.remove('open');
      }
    });
  }
  // Browse Categories dropdown
  var catBtn = document.getElementById('envy-cat-btn');
  var catDrop = document.getElementById('envy-cat-drop');
  if(catBtn && catDrop){
    catBtn.addEventListener('click', function(e){
      e.stopPropagation();
      catDrop.classList.toggle('open');
    });
    document.addEventListener('click', function(e){
      if(!catDrop.contains(e.target) && e.target !== catBtn){
        catDrop.classList.remove('open');
      }
    });
  }
})();
</script>
