:root{
      --green:#16a34a;--green-dark:#166534;--green-light:#dcfce7;
      --dark:#111827;--gray:#6b7280;--light-gray:#f3f4f6;
      --border:#e5e7eb;--white:#fff;
      --shadow:0 4px 24px rgba(22,163,74,.10);
      --radius:14px;--transition:.22s ease;
    }
    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
    body{overflow-x:hidden;background:#f8fafb;color:var(--dark)}
    .container{max-width:1400px;margin:0 auto;padding:0 24px;width:100%}

    /* ── Topbar ── */
    .topbar{background:var(--green);color:#fff;font-size:13px;padding:7px 0;z-index:102}
    .topbar-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
    .topbar-right{display:flex;gap:18px}
    .topbar-right a{color:#fff;text-decoration:none;opacity:.9}
    .topbar-right a:hover{opacity:1}

    /* ── Header ── */
    .header{
      background:var(--white);border-bottom:1px solid var(--border);
      padding:16px 0;position:sticky;top:0;z-index:101;
      box-shadow:0 2px 16px rgba(0,0,0,.06)
    }
    .header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
    .logo-icon img{display:block;max-width:100%;height:auto}

    /* ── Search ── */
    .search-bar{
      flex:1;max-width:500px;position:relative;display:flex;
      border:2px solid var(--green);border-radius:50px;
      overflow:visible;background:#fff
    }
    .search-bar-inner{display:flex;width:100%;border-radius:50px;overflow:hidden}
    .search-bar input{
      flex:1;border:none;padding:12px 18px;font-size:14px;
      outline:none;background:transparent
    }
    .search-btn{
      background:var(--green);border:none;padding:0 22px;
      font-size:16px;cursor:pointer;color:#fff;
      transition:background var(--transition)
    }
    .search-btn:hover{background:var(--green-dark)}
    .search-results{
      position:absolute;top:calc(100% + 6px);left:0;right:0;
      background:#fff;border:1px solid var(--border);border-radius:12px;
      max-height:420px;overflow-y:auto;z-index:9999;display:none;
      box-shadow:0 8px 24px rgba(0,0,0,.10)
    }
    .search-item{
      display:flex;gap:12px;padding:10px 14px;text-decoration:none;
      color:var(--dark);border-bottom:1px solid #f1f1f1;align-items:center;
      transition:background var(--transition)
    }
    .search-item:last-child{border-bottom:none}
    .search-item:hover{background:#f8fafc}
    .search-item img{width:52px;height:52px;object-fit:cover;border-radius:8px;flex-shrink:0}
    .search-name{font-size:14px;font-weight:600;line-height:1.3}
    .search-price{font-size:13px;color:var(--green);margin-top:4px}
    .no-result{padding:14px;color:#777;font-size:14px;text-align:center}

    /* ── Header actions ── */
    .header-actions{display:flex;gap:12px;flex-shrink:0}
    .action-btn{
      display:flex;flex-direction:column;align-items:center;
      gap:2px;padding:8px 16px;border-radius:10px;
      position:relative;text-decoration:none;color:var(--dark);
      transition:background var(--transition)
    }
    .action-btn:hover{background:var(--light-gray)}
    .action-btn .label{font-size:11px;color:var(--gray)}
    .badge{
      position:absolute;top:4px;right:10px;
      background:var(--green);color:#fff;font-size:10px;
      border-radius:50%;width:16px;height:16px;
      display:flex;align-items:center;justify-content:center;font-weight:700
    }

    /* ── Navbar ── */
    .navbar{
      background:var(--green);color:#fff;
      position:sticky;top:0;z-index:100;
      box-shadow:0 3px 10px rgba(0,0,0,.05)
    }
    .navbar-inner{display:flex;align-items:center;width:100%}
    .nav-left{position:relative}

    /* Hamburger button */
    .hamburger-btn{
      background:var(--green-dark);color:#fff;border:none;
      padding:12px 18px;font-size:20px;font-weight:600;cursor:pointer;
      
      display:flex;align-items:center;gap:8px;height:100%;white-space:nowrap;
      transition:background var(--transition)
    }
    .hamburger-btn:hover{background:rgba(0,0,0,.25)}
    .hamburger-btn .btn-text{font-size:17px}

    /* Hamburger full-category panel */
    .cats-menu{
      position:absolute;top:100%;left:0;
      background:#fff;border:1px solid var(--border);
      border-radius:0 0 var(--radius) var(--radius);
      min-width:260px;display:none;flex-direction:column;
      box-shadow:var(--shadow);z-index:200;
      max-height:400px;overflow-y:auto
    }
    .cats-menu.open{display:flex}
    .cats-menu a{
      padding:12px 20px;color:var(--dark);font-size:13.5px;
      display:flex;align-items:center;gap:10px;
      border-bottom:1px solid #f0f0f0;text-decoration:none;
      transition:background var(--transition),color var(--transition)
    }
    .cats-menu a:hover{background:var(--green-light);color:var(--green-dark)}

    /* ── Scrollable nav wrapper ── */
    .nav-links-wrapper{
      flex:1;overflow-x:auto;overflow-y:visible;
      -webkit-overflow-scrolling:touch;scrollbar-width:none;position:relative
    }
    .nav-links-wrapper::-webkit-scrollbar{display:none}
    .nav-links{
      display:flex;align-items:center;
      gap:4px;white-space:nowrap;min-width:min-content
    }

    /* ── Nav items ── */
    .nav-item{position:relative;display:inline-flex;align-items:center}
    .nav-link{
      color:#fff;padding:14px 16px;font-size:13.5px;font-weight:500;
      border-radius:6px;text-decoration:none;
      display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
      transition:background var(--transition)
    }
    .nav-link:hover,
    .nav-item.open > .nav-link{background:rgba(255,255,255,.18)}
    .nav-links > a.nav-link:first-child{background:rgba(255,255,255,.1)}
    .nav-caret{
      font-size:.6rem;opacity:.8;margin-left:2px;
      display:inline-block;transition:transform .2s
    }
    .nav-item.open .nav-caret{transform:rotate(180deg)}

    /* ── Dropdown panel ── */
    .nav-dropdown{
      display:none;
      position:fixed;top:0;left:0; /* repositioned by JS */
      min-width:210px;max-height:70vh;overflow-y:auto;
      background:#fff;border:1px solid var(--border);
      border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.13);
      padding:6px 0;list-style:none;z-index:9999;
      scrollbar-width:thin;scrollbar-color:#d1d5db transparent
    }
    .nav-dropdown::-webkit-scrollbar{width:4px}
    .nav-dropdown::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:2px}
    .nav-item.open > .nav-dropdown{display:block}
    .dropdown-header a{
      display:block;padding:9px 16px;font-weight:700;font-size:.98rem;
      text-transform:uppercase;letter-spacing:.06em;color:#374151;text-decoration:none
    }
    .dropdown-header a:hover{color:var(--green)}
    .dropdown-divider{height:1px;background:#f3f4f6;margin:4px 10px}
    .dropdown-item{
      display:flex;align-items:center;gap:8px;
      padding:9px 16px;font-size:.875rem;color:#4b5563;
      text-decoration:none;transition:background .15s,color .15s
    }
    .dropdown-item:hover{background:#f0fdf4;color:var(--green)}

    /* Scroll-fade indicator */
    .scroll-indicator{
      position:absolute;right:0;top:0;bottom:0;width:40px;
      background:linear-gradient(90deg,transparent,var(--green));
      pointer-events:none;opacity:0;transition:opacity .3s
    }
    .nav-links-wrapper.scrollable .scroll-indicator{opacity:1}

    /* ── Responsive ── */
    @media(max-width:992px){
      .container{padding:0 16px}
      .search-bar{max-width:400px}
      .hamburger-btn .btn-text{display:none}
      .hamburger-btn{padding:12px 16px}
    }
    @media(max-width:768px){
      .topbar-inner{flex-direction:column;text-align:center}
      .topbar-right{justify-content:center;flex-wrap:wrap}
      .header-inner{flex-direction:row;flex-wrap:wrap}
      .logo{order:1}.header-actions{order:2}
      .search-bar{order:3;width:100%;max-width:100%;margin-top:12px}
      .action-btn .label{font-size:13px}
      .action-btn{padding:6px 12px}
      .badge{right:6px;top:2px;width:14px;height:14px;font-size:13px}
      .hamburger-btn{padding:10px 14px}
      .nav-link{padding:12px 14px;font-size:13px}
      .nav-dropdown{min-width:180px;max-height:55vh}
    }
    @media(max-width:480px){
      .header-actions{gap:6px}
      .action-btn{padding:4px 8px}
      .logo-icon img{max-width:140px}
      .hamburger-btn{padding:8px 12px;font-size:13px}
      .nav-link{padding:10px 12px;font-size:13px}
    }