/* ==========================================================================
   HeaderOne Component Styles
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@700&display=swap');

        /* ── Global header font ── */
        .gh-header * { font-family: 'Inter', sans-serif; box-sizing: border-box; }

        /* ─────────────────────────────────────────────
           TOP BAR  — deep forest green + gold shimmer
        ───────────────────────────────────────────── */
     .gh-top-bar {
  background:
    linear-gradient(90deg, transparent, rgba(201,168,76,0.07), transparent) no-repeat,
    linear-gradient(90deg, #0B3D2E 0%, #0F5132 50%, #0B3D2E 100%);
  background-size: 60% 100%, 100% 100%;
  background-position: -150% 0, 0 0;
  animation: ghShimmer 4s ease-in-out infinite;
  padding: 8px 0;
  border-bottom: 1px solid rgba(201,168,76,0.25);
  position: relative;
  z-index: 1001;   /* above the sticky wrapper (1000) */
}
@keyframes ghShimmer {
  0%   { background-position: -150% 0, 0 0; }
  100% { background-position: 250% 0, 0 0; }
}
        .gh-top-bar::before {
          content: '';
          position: absolute;
          top: 0; left: -100%;
          width: 60%; height: 100%;
          background: linear-gradient(90deg, transparent, rgba(201,168,76,0.07), transparent);
          animation: ghShimmer 4s ease-in-out infinite;
        }
        @keyframes ghShimmer { 0%{left:-100%} 100%{left:200%} }

        .gh-top-badge {
          display: inline-flex; align-items: center; gap: 6px;
          background: rgba(201,168,76,0.12);
          border: 1px solid rgba(201,168,76,0.30);
          border-radius: 999px;
          padding: 3px 12px;
          font-size: 12px; font-weight: 500; color: #F0C060;
          transition: background 0.2s;
        }
        .gh-top-badge:hover { background: rgba(201,168,76,0.22); text-decoration: none; }
        .gh-top-link {
          color: rgba(255,255,255,0.82); font-size: 12.5px; font-weight: 500;
          transition: color 0.2s; text-decoration: none; display: flex; align-items: center; gap: 5px;
        }
        .gh-top-link:hover { color: #F0C060; text-decoration: none; }
        .gh-top-divider { width: 1px; height: 14px; background: rgba(255,255,255,0.18); margin: 0 10px; }

        /* user dropdown */
        .gh-user-chip {
          display: flex; align-items: center; gap: 6px; cursor: pointer;
          background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
          border-radius: 999px; padding: 4px 12px 4px 8px;
          font-size: 12.5px; color: #fff; transition: all 0.2s;
        }
        .gh-user-chip:hover { background: rgba(255,255,255,0.14); border-color: rgba(201,168,76,0.4); }

        /* ─────────────────────────────────────────────
        /* ─────────────────────────────────────────────
           LOGO
        ───────────────────────────────────────────── */
        .gh-logo-wrap {
          display: flex; align-items: center; gap: 10px;
          text-decoration: none;
          padding: 7px 16px 7px 10px;
          border-radius: 14px;
          background: linear-gradient(135deg, #0B3D2E 0%, #0F5132 60%, #166534 100%);
          border: 1.5px solid rgba(201,168,76,0.32);
          box-shadow: 0 3px 14px rgba(11,61,46,0.20), inset 0 1px 0 rgba(255,255,255,0.06);
          transition: transform 0.22s ease, box-shadow 0.22s ease;
          position: relative; overflow: hidden;
        }
        .gh-logo-wrap::before {
          content: ''; position: absolute; top: 0; left: -80%;
          width: 60%; height: 100%;
          background: linear-gradient(90deg, transparent, rgba(201,168,76,0.10), transparent);
          transition: left 0.5s ease;
        }
        .gh-logo-wrap:hover { transform: translateY(-2px); box-shadow: 0 7px 24px rgba(11,61,46,0.30); text-decoration: none; }
        .gh-logo-wrap:hover::before { left: 140%; }

        .gh-logo-icon {
          width: 36px; height: 36px;
          background: rgba(201,168,76,0.14); border: 1.5px solid rgba(201,168,76,0.38);
          border-radius: 9px; display: flex; align-items: center; justify-content: center;
          font-size: 19px; color: #F0C060; flex-shrink: 0;
        }
        .gh-logo-text-wrap { display: flex; flex-direction: column; line-height: 1; }
        .gh-logo-name {
          font-family: 'Playfair Display', serif;
          font-size: 20px; font-weight: 700; letter-spacing: 0.2px;
          background: linear-gradient(135deg, #F0C060 0%, #C9A84C 100%);
          -webkit-background-clip: text; -webkit-text-fill-color: transparent;
          background-clip: text;
        }
        .gh-logo-name span {
          font-family: 'Inter', sans-serif; font-weight: 400; font-size: 17px;
          background: linear-gradient(135deg, #F0C060 0%, #C9A84C 100%);
          -webkit-background-clip: text; -webkit-text-fill-color: transparent;
          background-clip: text; opacity: 0.85;
        }
        .gh-logo-tagline {
          font-size: 9px; font-weight: 500; letter-spacing: 1.4px;
          color: rgba(240,192,96,0.60); text-transform: uppercase; margin-top: 3px;
        }

        /* ─────────────────────────────────────────────
           MIDDLE HEADER — white with subtle shadow
        ───────────────────────────────────────────── */
        .gh-mid-header {
          background: #fff;
          padding: 14px 0;
          box-shadow: 0 2px 0 rgba(15,81,50,0.06);
          position: relative;
        }

        /* ── Search bar wrapper ── */
        .gh-search-bar {
          display: flex;
          align-items: center;
          border: 2px solid #E5E7EB;
          border-radius: 999px;
          background: #fff;
          transition: border-color 0.25s, box-shadow 0.25s;
          height: 46px;
          width: 100%;
          max-width: 520px;
        }
        .gh-search-bar:focus-within {
          border-color: #0F5132;
          box-shadow: 0 0 0 4px rgba(15,81,50,0.10);
        }

        /* ── Search input ── */
        .gh-search-input {
          border: none !important; outline: none !important; box-shadow: none !important;
          flex: 1; padding: 0 48px 0 14px; height: 42px;
          font-size: 14px; color: #111827; background: transparent;
          min-width: 0;
        }
        .gh-search-input::placeholder { color: #9CA3AF; font-size: 13.5px; }

        /* ── Search submit button ── */
        .gh-search-btn {
          position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
          width: 34px; height: 34px; border-radius: 50%;
          background: linear-gradient(135deg, #0F5132, #16a34a);
          border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
          color: #fff; font-size: 15px; transition: transform 0.2s, box-shadow 0.2s;
          box-shadow: 0 2px 8px rgba(15,81,50,0.28); flex-shrink: 0;
        }
        .gh-search-btn:hover { transform: translateY(-50%) scale(1.1); box-shadow: 0 4px 14px rgba(15,81,50,0.38); }

        /* location chip */
        .gh-location-chip {
          display: flex; align-items: center; gap: 8px;
          border: 1.5px solid #E5E7EB; border-radius: 999px;
          padding: 6px 14px; cursor: pointer; background: #FAFAFA;
          transition: all 0.2s; white-space: nowrap; margin-left: 10px;
        }
        .gh-location-chip:hover { border-color: #0F5132; background: #F0FDF4; }

        /* icon action buttons */
        .gh-action-btn {
          position: relative; width: 42px; height: 42px; border-radius: 50%;
          display: flex; align-items: center; justify-content: center;
          color: #374151; font-size: 22px; transition: all 0.22s; cursor: pointer;
          border: 1.5px solid transparent; text-decoration: none;
        }
        .gh-action-btn:hover { background: #F0FDF4; border-color: #BBF7D0; color: #0F5132; transform: translateY(-2px); }
        .gh-badge {
          position: absolute; top: -3px; right: -3px;
          min-width: 17px; height: 17px; border-radius: 999px;
          background: linear-gradient(135deg, #C9A84C, #F0C060);
          color: #1a1a1a; font-size: 9.5px; font-weight: 700;
          display: flex; align-items: center; justify-content: center;
          border: 2px solid #fff; padding: 0 3px;
        }

        /* ─────────────────────────────────────────────
           BOTTOM NAV  — clean white with green accents
        ───────────────────────────────────────────── */
        .gh-bottom-nav {
          background: #fff;
          border-top: 1.5px solid #F3F4F6;
          border-bottom: 1.5px solid #F3F4F6;
          position: relative;
        }

        .gh-cat-trigger {
          display: flex; align-items: center; gap: 8px;
          background: linear-gradient(135deg, #0F5132, #166534);
          color: #fff; border: none; cursor: pointer;
          padding: 10px 20px; border-radius: 8px;
          font-size: 13.5px; font-weight: 600;
          transition: all 0.22s; flex-shrink: 0;
          box-shadow: 0 2px 8px rgba(15,81,50,0.20);
        }
        .gh-cat-trigger:hover { background: linear-gradient(135deg, #0B3D2E, #0F5132); box-shadow: 0 4px 14px rgba(15,81,50,0.30); transform: translateY(-1px); }

        /* nav links */
        .gh-nav-link {
          position: relative; display: flex; align-items: center; gap: 5px;
          padding: 14px 13px; font-size: 13.5px; font-weight: 600;
          color: #374151; text-decoration: none; white-space: nowrap;
          transition: color 0.2s;
        }
        .gh-nav-link::after {
          content: ''; position: absolute; bottom: 0; left: 50%; right: 50%;
          height: 2.5px; background: linear-gradient(90deg, #0F5132, #16a34a);
          border-radius: 2px 2px 0 0;
          transition: left 0.22s ease, right 0.22s ease;
        }
        .gh-nav-link:hover { color: #0F5132; text-decoration: none; }
        .gh-nav-link:hover::after { left: 12px; right: 12px; }

        /* phone CTA */
        .gh-phone-cta {
          display: flex; align-items: center; gap: 8px;
          padding: 10px 18px; border-radius: 8px;
          background: #F0FDF4; border: 1.5px solid #BBF7D0;
          color: #0F5132; font-size: 13px; font-weight: 600;
          text-decoration: none; transition: all 0.22s; white-space: nowrap;
        }
        .gh-phone-cta:hover { background: #DCFCE7; border-color: #86EFAC; color: #0B3D2E; transform: translateY(-1px); text-decoration: none; }

        /* profile dropdown */
        .gh-profile-dropdown {
          position: absolute; top: calc(100% + 8px); right: 0;
          background: #fff; border: 1px solid #E5E7EB;
          border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.12);
          min-width: 200px; overflow: hidden; z-index: 9999;
          animation: ghDropIn 0.18s ease;
        }
        @keyframes ghDropIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
        .gh-profile-item {
          display: flex; align-items: center; gap: 10px;
          padding: 11px 16px; font-size: 13.5px; color: #374151;
          text-decoration: none; transition: background 0.15s; cursor: pointer;
          border: none; width: 100%; background: transparent; text-align: left;
        }
        .gh-profile-item:hover { background: #F0FDF4; color: #0F5132; text-decoration: none; }
        .gh-profile-item + .gh-profile-item { border-top: 1px solid #F3F4F6; }

        /* search dropdown redesign */
        .gh-search-dropdown {
          position: absolute; top: 100%; left: 0; right: 0;
          background: #fff; border: 1.5px solid #E5E7EB;
          border-radius: 0 0 16px 16px;
          box-shadow: 0 12px 40px rgba(0,0,0,0.12);
          z-index: 9999; max-height: 420px; overflow-y: auto;
        }
        .gh-search-result {
          display: flex; align-items: center; gap: 12px;
          padding: 10px 16px; cursor: pointer; border-bottom: 1px solid #F9FAFB;
          transition: background 0.15s;
        }
        .gh-search-result:hover { background: #F0FDF4; }
        .gh-search-result-img {
          width: 46px; height: 46px; border-radius: 10px; overflow: hidden;
          background: #F0FDF4; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
          border: 1px solid #E5E7EB;
        }

        /* category submenu */
        .submenus-submenu__list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
        .submenus-submenu__list li { list-style-type: none !important; background: #fff !important; padding: 0 !important; margin: 0 !important; position: static !important; }
        .submenus-submenu__list li::marker, .submenus-submenu__list li::before, .submenus-submenu__list li::after { display: none !important; content: none !important; }
        .submenus-submenu__list a::before, .submenus-submenu__list a::after { display: none !important; content: none !important; }
        .submenus-submenu__list a { color: #374151 !important; display: flex !important; align-items: center; gap: 10px; padding: 11px 16px !important; border-bottom: 1px solid #F3F4F6; transition: all 0.2s; background: #fff !important; font-size: 13.5px; }
        .submenus-submenu__list a:hover { color: #0F5132 !important; background: #F0FDF4 !important; padding-left: 22px !important; }

        /* Fixed header drop shadow */
        .gh-fixed { box-shadow: 0 4px 20px rgba(0,0,0,0.10); }

        /* Scroll-hide on mobile */
        ul::-webkit-scrollbar { display: none; }

ul::-webkit-scrollbar { display: none; }

/* Top bar – tablet */
@media (max-width: 767px) {
  .gh-top-bar .container > div {
    justify-content: center !important;
  }
  .gh-top-bar .container > div > div {
    gap: 8px !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  .gh-top-divider { display: none; }
}

.gh-top-badge,
.gh-top-link,
.gh-user-chip { white-space: nowrap; flex-shrink: 0; }

.gh-user-chip span {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 767px) {
  .gh-top-bar .container > div { justify-content: center !important; }
  .gh-top-divider { margin: 0 4px; }
}

@media (max-width: 575px) {
  .gh-top-bar { padding: 6px 0; }
  .gh-top-badge { padding: 3px 10px; font-size: 11px; }
  .gh-top-link,
  .gh-user-chip { font-size: 11.5px; }
  .gh-user-chip span { max-width: 80px; }
  /* hide Help Center + its adjacent divider so everything fits on one line */
  a.gh-top-link,
  .gh-top-badge + .gh-top-divider { display: none; }
  .gh-profile-dropdown { min-width: 170px; right: 0; }
}
.gh-top-bar,
.gh-top-bar * {
  word-break: normal !important;
  overflow-wrap: normal !important;
}
.gh-top-badge,
.gh-top-link,
.gh-user-chip,
.gh-user-chip span {
  white-space: nowrap !important;
  flex-shrink: 0;
}
.gh-user-chip span {
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 575px) {
  .gh-top-bar a.gh-top-link,
  .gh-top-badge + .gh-top-divider { display: none; }
  .gh-top-badge { font-size: 11px; padding: 3px 10px; }
  .gh-user-chip { font-size: 11.5px; }
  .gh-top-bar .container > div { justify-content: center !important; }
}
/* Compact customer header on phones */
@media (max-width: 991px) {
  .gh-mid-header { padding: 8px 0; }
  .gh-header-main-row { gap: 8px !important; }
  .gh-logo-wrap { gap: 7px; padding: 5px 8px; border-radius: 10px; }
  .gh-logo-icon { width: 30px; height: 30px; font-size: 16px; }
  .gh-logo-name { font-size: 16px; }
  .gh-logo-name span { font-size: 14px; }
  .gh-logo-tagline { display: none; }
  .gh-mobile-actions { gap: 2px !important; flex-shrink: 0; }
  .gh-mobile-actions .gh-action-btn { width: 34px; height: 36px; font-size: 19px; }
  .gh-mobile-actions > button:last-child { font-size: 24px !important; margin-left: 0 !important; padding: 0 2px; }
}

@media (max-width: 359px) {
  .gh-logo-wrap { gap: 5px; padding: 4px 6px; }
  .gh-logo-icon { width: 27px; height: 27px; }
  .gh-logo-name { font-size: 14px; }
  .gh-logo-name span { font-size: 12px; }
  .gh-mobile-actions .gh-action-btn { width: 30px; font-size: 17px; }
}

/* Keep mobile header labels on one line and reserve room for icon actions. */
@media (max-width: 767px) {
  .gh-top-bar .container > div {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }
  .gh-top-bar .container > div > div {
    flex-wrap: nowrap !important;
    justify-content: flex-end;
    gap: 6px !important;
    min-width: 0;
  }
  .gh-top-bar .container > div > div:first-child { display: none !important; }
  .gh-top-badge,
  .gh-top-link,
  .gh-user-chip { white-space: nowrap !important; }
  .gh-top-badge { flex: 0 0 auto; }
  .gh-user-chip { max-width: 140px; }
  .gh-user-chip span { display: block; max-width: 72px; white-space: nowrap !important; }
  .gh-logo-name { white-space: nowrap; }
  .gh-header-main-row { flex-wrap: nowrap !important; }
}

@media (max-width: 575px) {
  .gh-top-bar a.gh-top-link { display: none !important; }
  .gh-top-bar .container > div { justify-content: center !important; }
}

/* Keep the header stationary; the animated shimmer looked like marquee motion. */
.gh-top-bar {
  animation: none !important;
  background: linear-gradient(90deg, #0B3D2E 0%, #0F5132 50%, #0B3D2E 100%) !important;
  background-position: center !important;
}
.gh-top-bar::before {
  display: none !important;
  animation: none !important;
}

/* Let the profile menu extend over the middle header instead of being clipped. */
.gh-top-bar {
  overflow: visible !important;
  position: relative;
  z-index: 2000;
}
.gh-profile-dropdown {
  z-index: 2002 !important;
}