The Accessory Shop is the hero-facing economy hub where players spend hard-earned GP from completed quests and battles on equipment, accessories, and wallet capacity upgrades.

The shop system is composed of an atomic component hierarchy:

• View Page (AccessoryShop.vue):
  • Manages shelf inventory data loading from ShopsDb and AccessoriesDb.
  • Integrates user store wallet tracking and ATM modal interactions.
  • Controls active shelf filtering and pagination.
• Stage Organism (ShopClerkStage.vue):
  • Upper scenic viewport (250px-300px) framing the authentic shop background pixel art (wrecked-ship.webp, pegasus-ranch.webp, etc.).
  • Retro dialogue box with shopkeeper name tag, dynamic greetings, charisma discount badges, and shop hours closed cues.
• Wallet Ware Molecule (ShopWalletWare.vue):
  • Featured item at the head of the shelves offering the shop-specific wallet capacity upgrade (Majora's Mask style).
  • Handles locked level gating, purchase confirmations, and real-time wallet capacity increases.
• Item Card Molecule (ShopItemCard.vue):
  • 2-column responsive inventory grid cards with glassmorphic styling.
  • Displays high-resolution accessory photos or duotone icons, Apple Kid typography, and embedded price tags with shortage indicators.
• Item Inspection Modal Organism (ShopItemModal.vue):
  • Reusable inspection sheet showing full item artwork, description, 3-column wallet economics breakdown (WALLET, PRICE, AFTER/SHORT), and tactile Buy/Cancel actions.

• Wallet Tracking: Current balance is surfaced in the header toolbar (🪙 {{ wallet }} GP) with instant ATM access.
• Charisma Discounts: Automatically calculated from hero stats via shopDiscountLabel and shopPrice.
• Operating Hours: Checked in real-time via isShopOpen(shopRecord.hours, now). When doors are shut, the clerk explains opening hours and purchases are prevented.
• Purchase Ledger: Transactions are verified via PurchaseService.buyItem(), deducting GP (savings first, then wallet) and logging a pending item delivery for the Game Master.