户外露营装备商城首页

你是一个资深前端工程师。请帮我写一个露营装备商城首页，要求如下：
技术约束：只输出一个 .html 文件，不依赖任何外部框架和库（无 React/Vue/Bootstrap），CSS 与 JS 全部内联写在同一个文件中；使用语义化 HTML5 标签；响应式布局，适配手机、平板、桌面；代码有中文注释，结构清晰。
商城信息：名称【XX 露营】，品类【帐篷/灯具/炉具占位】，活动【满减占位】。
页面区块（从上到下）：导航栏（含购物车图标）→ 首屏 Banner（营地大图+活动标语）→ 品类分类（图标 4 类）→ 商品卡片（图+名+价格，8 个占位）→ 新手装备清单（推荐组合）→ 页脚。
交互要求：导航栏滚动时吸顶并加阴影；移动端汉堡菜单可展开收起；卡片悬停有轻微上浮阴影。加购按钮点击数量+1 并更新购物车角标（前端状态即可）。
视觉风格：自然硬朗（军绿+沙色）、粗犷字体标题。
输出要求：直接输出完整可运行的代码，不要解释思路，不要分段