feat(mall): pin home category menu beside hero carousel

Home hero becomes a 450px flex row with a pinned 240x450 category rail
(ShellCategoryMenu `pinned` mode) left of the 960px center-cropped
carousel; hovering a top-level category expands the mega-menu over the
carousel. The header no longer collapses on scroll, and its category
dropdown is now hover-only on non-home pages.

OpenSpec change: openspec/changes/pin-home-category-menu

BREAKING CHANGE: the header logo/search/cart bar no longer auto-hides
past 200px of scroll, and the home page no longer shows the header
category dropdown (it is pinned in the hero row instead).

openspec/changes/pin-home-category-menu/specs/frontend-mall/spec.md

@@ -0,0 +1,33 @@
+# Spec Delta
+
+## MODIFIED Requirements
+
+### Requirement: Mock PC home page
+The mall home page SHALL render a hero row composed of a pinned 240px category sidebar on the left and a hero carousel filling the remainder of the 1200px grid, both 450px tall and occupying layout space (not overlaid). The sidebar SHALL list all top-level categories with up to three child links each; hovering a top-level category SHALL expand the mega-menu panel to the right over the carousel. Banner images SHALL render at fixed 450px height, center-cropped horizontally to the narrower carousel width. Below the hero, the page SHALL render a six-item quick-link strip with promotion tiles and bilingual product floors with a left advert and product-card grid.
+
+#### Scenario: shopper lands on home
+- **WHEN** `/` loads in mock mode
+- **THEN** the category sidebar is visible to the left of the carousel without any hover or click, the carousel renders center-cropped banners at 450px height, and the quick links, promotions and every non-empty product floor render fixed mock content
+
+#### Scenario: sidebar stays while scrolling
+- **WHEN** a shopper scrolls the home page beyond 200px
+- **THEN** the category sidebar remains rendered in the hero row and does not auto-hide
+
+#### Scenario: expand a category
+- **WHEN** a shopper hovers a top-level category in the pinned sidebar
+- **THEN** the mega-menu panel expands to the right, overlaying the carousel with that category's child and grandchild links
+
+### Requirement: B2B2C mall-style PC storefront shell
+The mall SHALL render a buyer-facing desktop shell modeled on a classic B2B2C PC mall: a 30px utility bar, logo/search/cart header, dark primary navigation with a hover category mega-menu, a 1200px content grid, and a value-proposition footer. The header SHALL remain fully visible while scrolling; no part of the shell SHALL auto-hide based on scroll position. The category mega-menu SHALL appear as a hover dropdown under the navigation "All Categories" entry on every page except the home page, where it is instead pinned in the hero row. The visual language SHALL use #ca151e for brand/price/active states, #f5f5f5 section backgrounds, gray hairline borders, compact controls, and product-card hover lift/shadow. The implementation SHALL use Nuxt-native semantic components and SHALL NOT depend on Element Plus.
+
+#### Scenario: shopper opens any mall page
+- **WHEN** a shopper navigates to a buyer-facing route
+- **THEN** the shared desktop shell wraps the route content and its nav/search/cart controls are usable
+
+#### Scenario: header persists while scrolling
+- **WHEN** a shopper scrolls any mall page
+- **THEN** the logo/search/cart header bar remains visible and is never collapsed or hidden by scroll position
+
+#### Scenario: hover categories on a non-home page
+- **WHEN** a shopper hovers "All Categories" in the navigation on a page other than `/`
+- **THEN** the category mega-menu dropdown appears below the navigation and hides again on mouse leave