Refresh storefront design with full-bleed hero and new type system

Co-authored-by: Cursor <cursoragent@cursor.com>

app/templates/product.html

@@ -5,15 +5,15 @@
 <section class="page-section product-page">
   <a class="back-link" href="/#catalog">← К каталогу</a>
   <div class="product-layout">
-    <div class="product-hero-media gradient-{{ product.image_gradient }}">
-      <div class="product-media tall"></div>
+    <div class="product-stage tone-{{ product.image_gradient }}">
+      <span class="product-mark xl">{{ product.title[:1] }}</span>
     </div>
     <div class="product-info">
       <p class="product-tag">{{ product.delivery_note }}</p>
       <h1>{{ product.title }}</h1>
       <p class="lead">{{ product.short_description }}</p>
-      <p>{{ product.description }}</p>
-      <p class="stock-line">В наличии: {{ stock }} шт.</p>
+      <p class="body-copy">{{ product.description }}</p>
+      <p class="stock-line">В наличии: <strong>{{ stock }}</strong> шт.</p>
       <div class="buy-row">
         <span class="price big">{{ product.price | rub }}</span>
         <form method="post" action="/cart/add/{{ product.id }}" class="inline-form">