function ShopPage({ onAddToCart, onViewDetail }) {
  return (
    <div style={{ fontFamily:"'DM Sans', sans-serif", paddingTop:64, minHeight:'100vh', background:'#FAF6EE' }}>
      {/* Header */}
      <div style={{ background:'#111', padding:'60px 32px 48px', borderBottom:'3px solid #F5C400' }}>
        <div style={{ maxWidth:1280, margin:'0 auto' }}>
          <p style={{ color:'#F5C400', fontWeight:800, fontSize:12, letterSpacing:3, margin:'0 0 8px' }}>CLEANFATS STORE</p>
          <h1 style={{ fontFamily:"'Black Han Sans', Impact, sans-serif", fontSize:72, color:'#fff', margin:0, letterSpacing:-1 }}>ALL PRODUCTS</h1>
        </div>
      </div>

      {/* Grid */}
      <div style={{ maxWidth:800, margin:'0 auto', padding:'64px 32px' }}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(260px, 1fr))', gap:28 }}>
          {PRODUCTS.map(p => <ProductCard key={p.id} product={p} onAddToCart={onAddToCart} onViewDetail={onViewDetail}/>)}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ShopPage });