Merge pull request 'feature/v2-design' (#2) from feature/v2-design into dev

Reviewed-on: #2

.claude/launch.json

@@ -0,0 +1,18 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "11ty dev server (live reload)",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev", "--", "--port=8088"],
+      "port": 8088,
+      "autoPort": false
+    },
+    {
+      "name": "Python HTTP Server (_site)",
+      "runtimeExecutable": "python3",
+      "runtimeArgs": ["-m", "http.server", "8081", "--directory", "/Users/lexx/Projects/2026/dp-trade-UI-kit/_site"],
+      "port": 8081
+    }
+  ]
+}

.claude/settings.local.json

@@ -0,0 +1,16 @@
+{
+  "permissions": {
+    "allow": [
+      "mcp__Claude_Preview__preview_start",
+      "Bash(npm run *)",
+      "Bash(curl -sLo logo-dp-trade.png \"https://wine-dp-trade.ru/wp-content/uploads/2024/11/logo-500x107.png\")",
+      "Bash(curl -sLo hero-main.jpg \"https://images.unsplash.com/photo-1560493676-04071c5f467b?auto=format&fit=crop&w=1800&q=82\")",
+      "Bash(curl -sLo vineyard-hills.jpg \"https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?auto=format&fit=crop&w=1800&q=82\")",
+      "Bash(curl -sLo news-catena.jpg \"https://images.unsplash.com/photo-1556760544-74068565f05c?auto=format&fit=crop&w=900&q=80\")",
+      "Bash(curl -sLo news-italy.jpg \"https://images.unsplash.com/photo-1528823872057-9c018a7a7553?auto=format&fit=crop&w=900&q=80\")",
+      "Bash(awk '{print $5, $9}')",
+      "Bash(curl -sLo /Users/lexx/Projects/2026/dp-trade-UI-kit/src/js/analytics.js \"https://metrika.in20.ru/js/pa-LKQHOT3En5k9NYpn80cYX.js\")",
+      "Bash(python3 -c \"import json,sys; d=json.load\\(sys.stdin\\); print\\(json.dumps\\(d.get\\('scripts',{}\\),indent=2\\)\\); print\\('deps:',list\\(d.get\\('dependencies',{}\\).keys\\(\\)\\)\\); print\\('devDeps:',list\\(d.get\\('devDependencies',{}\\).keys\\(\\)\\)\\)\")"
+    ]
+  }
+}

.eleventy.js

@@ -0,0 +1,16 @@
+export default function (eleventyConfig) {
+  eleventyConfig.addPassthroughCopy("src/css");
+  eleventyConfig.addPassthroughCopy("src/assets");
+  eleventyConfig.addPassthroughCopy("src/js");
+  eleventyConfig.addPassthroughCopy("src/fonts");
+
+  return {
+    dir: {
+      input: "src",
+      output: "_site",
+      includes: "_includes",
+    },
+    templateFormats: ["njk", "html"],
+    htmlTemplateEngine: "njk",
+  };
+}

.gitignore

@@ -1,4 +1,8 @@
 .DS_Store
 node_modules/
 dist/
+_site/
 .env
+
+# Корневые HTML-файлы — артефакты до миграции на 11ty, источник правды — src/*.njk
+/*.html

.nova/Publishing/REG.RU hosting.json

@@ -0,0 +1,8 @@
+{
+  "identifier" : "39856AD9-BD44-4500-B03F-EDFAE2A870CB",
+  "localPath" : "_site",
+  "remotePath" : "\/www\/wine-proto.vodkainmyblood.com",
+  "remoteURL" : "wine-proto.vodkainmyblood.com",
+  "server" : "REG.RU hosting",
+  "usesPublishing" : true
+}

CLAUDE.md

@@ -0,0 +1,144 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+Перед началом работы над любой задачей сложнее одного шага
+составь todo-список и показывай его прогресс по ходу выполнения.
+Для задач с неочевидным подходом сначала предложи план и дождись подтверждения.
+
+## Project
+
+Static HTML/CSS UI-kit and page prototypes for **DP Trade** — a B2B wine wholesale catalog (wine-dp-trade.ru). The output of this project is handed off to **WordPress/Elementor** for production deployment. See `docs/elementor-token-handoff.md` for the full Elementor migration guide.
+
+Design audit and V2 requirements are documented in `docs/design-audit-followup.md`.
+
+## Commands
+
+```bash
+# Dev server (11ty with live reload) — port 8088 per .claude/launch.json
+npm run dev
+
+# Production build → _site/
+npm run build
+```
+
+Dev server config is saved in `.claude/launch.json` for use with `preview_start`. The named config is `"11ty dev server (live reload)"` on port 8088.
+
+No test or lint tooling exists — the only npm scripts are `dev` and `build`, and the sole dependency is `@11ty/eleventy`. `npm run dev` runs `eleventy --serve`; the port is not hardcoded in the script and comes from `.claude/launch.json` (8088). Eleventy config lives in `.eleventy.js` (ESM `export default`).
+
+## Architecture
+
+### CSS layer (single dependency direction)
+
+```
+src/css/tokens.css   ← design tokens only (colors, fonts, spacing, radius, shadows)
+        ↓
+src/css/site.css     ← all page styles (references ../assets/images/ for backgrounds)
+src/css/ui-kit.css   ← design system showcase, standalone
+src/css/v2.css       ← V2 design overrides, loaded on every page after site.css
+```
+
+Never put visual styles in `tokens.css`. Never import `site.css` into `ui-kit.css`.
+
+### 11ty template structure (`src/`)
+
+```
+src/
+  _includes/
+    layouts/
+      base.njk      ← HTML shell: <head>, CSS links, analytics, design-switcher.js
+      default.njk   ← base + header + footer (used by all site pages)
+      ui-kit.njk    ← base only, no header/footer
+    partials/
+      header.njk    ← mega-menu nav — edit here, propagates to all pages
+      footer.njk    ← footer — edit here, propagates to all pages
+  css/              ← passthrough → _site/css/
+  js/               ← passthrough → _site/js/
+  assets/           ← passthrough → _site/assets/
+  fonts/            ← passthrough → _site/fonts/ (all WOFF2, local, no CDN)
+  *.njk             ← one file per page
+```
+
+### Pages
+
+| Permalink | Source |
+|---|---|
+| `/` | `index.njk` |
+| `/catalog.html` | `catalog.njk` |
+| `/product.html` | `product.njk` |
+| `/about.html` | `about.njk` |
+| `/contacts.html` | `contacts.njk` |
+| `/contacts-auth.html` | `contacts-auth.njk` |
+| `/news-villa-raiano.html` | `news-villa-raiano.njk` |
+| `/news-villa-raiano-v2.html` | `news-villa-raiano-v2.njk` |
+| `/article-guidelines.html` | `article-guidelines.njk` |
+| `/bottle-cards.html` | `bottle-cards.njk` |
+| `/product-card-white.html` | `product-card-white.njk` |
+| `/ui-kit.html` | `ui-kit.njk` (layout: ui-kit, css: ui-kit) |
+
+Pages with `bodyClass: compact-type`: catalog, about, contacts, article-guidelines.
+
+### Page front matter
+
+```yaml
+---
+title: "DP Trade — Catalog"
+layout: layouts/default   # or "layouts/ui-kit" for the design system page
+bodyClass: compact-type   # omit if not needed
+permalink: /catalog.html  # keeps flat output, preserves relative CSS paths
+---
+```
+
+### CSS paths
+
+All CSS, JS, and image paths in `base.njk` are **relative**. CSS background-images in `site.css` reference `../assets/images/` (relative to `_site/css/`). HTML templates reference `assets/images/` (relative to `_site/` root). This works with the 11ty dev server and when opening `_site/` via `file://`.
+
+All images and fonts are local — no external CDN dependencies.
+
+### Design tokens (V1 baseline)
+
+Key CSS custom properties in `src/css/tokens.css`:
+
+- Colors: `--color-primary-wine-100` (#4b0f24), `--color-accent-gold` (#b9965b), `--color-accent-blue` (#1f3476)
+- Fonts: `--font-heading` (Montserrat 800), `--font-body` (Inter), `--font-heading-classic` (Playfair Display)
+- Container: `--container: 1240px`
+
+When adding tokens, add to `tokens.css` and mirror to `docs/elementor-token-handoff.md` (Section 6).
+
+### V2 design system
+
+V2 is a progressive enhancement overlay triggered by `data-design-version="v2"` on `<html>`. Preference is stored in `localStorage` (`dp-design-version`). The toggle button (`design-toggle__btn`) appears in the main nav and UI-kit sidebar.
+
+**How V2 works:**
+- `src/css/tokens.css` — overrides under `:root[data-design-version="v2"]`: burgundy `#7D021D`, warm bg `#FFFDFA`, card bg `#F5F0E8`, Cormorant Garamond + Manrope fonts
+- `src/css/v2.css` — scoped rules under `[data-design-version="v2"]` removing uppercase, reducing weights, styling breadcrumbs, outlined CTAs, editorial typography
+- `src/js/design-switcher.js` — applies the attribute on load and on toggle; also injects split phone/email fields and form success state on contacts page
+
+Breadcrumbs on `product.html` are static markup tagged `data-v2-only="breadcrumbs"` — hidden in V1 via CSS, no JS needed.
+
+### Responsive breakpoints
+
+Defined at the bottom of `src/css/site.css`:
+
+- `@media (max-width: 1080px)` — tablet
+- `@media (max-width: 720px)` — mobile
+
+### JS utilities
+
+| File | Purpose |
+|---|---|
+| `src/js/design-switcher.js` | V1/V2 toggle, localStorage persistence, V2 DOM enhancements |
+| `src/js/inspector.js` | Click-to-inspect overlay: shows computed styles and resolved design tokens (`--color-*`, `--font-*`, etc.) for any element. Toggle with Alt+I. |
+| `src/js/analytics.js` | Privacy-friendly Plausible analytics (local copy) |
+
+## Key files
+
+| File | Purpose |
+|---|---|
+| `src/css/tokens.css` | Single source of truth for all design values |
+| `src/css/v2.css` | V2 editorial design overrides |
+| `docs/design-audit-followup.md` | Designer audit breakdown and V2 implementation plan |
+| `docs/elementor-token-handoff.md` | Migration guide to WordPress/Elementor |
+| `.claude/launch.json` | Dev server config for preview_start |
+| `src/_includes/partials/header.njk` | Mega-menu navigation |
+| `src/_includes/partials/footer.njk` | Site footer |

README.md

@@ -1,23 +1,77 @@
 # DP Trade — Site UI Kit
 
-Единый HTML/CSS проект для сайта и дизайн-системы DP Trade.
+Единый 11ty-проект для сайта, UI-kit и дизайн-системы DP Trade.
+
+## Текущее состояние
+
+- Источник правды: `src/`.
+- Сборка: Eleventy пишет результат в `_site/`.
+- Активная дизайнерская доработка: переключаемая версия `V2`, подключенная поверх базового `site.css` через `src/css/v2.css`.
+- `V1` сохранен как исходная версия для сравнения.
+- `V2` включает обновленную премиальную палитру, Cormorant Garamond + Manrope, легкие Cormorant `400/500`, переработанные карточки, mega-menu, footer, контакты и часть product/about-паттернов.
+- Подробный аудит и статусы: `docs/design-audit-followup.md`.
 
 ## Структура
 
-- `index.html` — главная страница с меню, hero, карточками и футером.
+- `src/*.njk` — исходные страницы.
-- `catalog.html` — пример страницы каталога.
+- `src/_includes/layouts/` — базовые layout-шаблоны.
-- `product.html` — пример страницы продукта.
+- `src/_includes/partials/` — header/footer.
-- `ui-kit.html` — живая витрина дизайн-системы.
+- `src/css/tokens.css` — шрифты, цвета, базовые дизайн-токены.
-- `css/tokens.css` — дизайн-токены: цвета, шрифты, отступы, радиусы, тени.
+- `src/css/site.css` — базовая V1-верстка сайта.
-- `css/site.css` — общие стили сайта: header, menu, footer, cards, layouts.
+- `src/css/v2.css` — V2-оверрайды по дизайнерскому аудиту.
-- `css/ui-kit.css` — стили страницы UI-kit.
+- `src/css/ui-kit.css` — стили витрины UI-kit.
-- `components/menu.html` — HTML-фрагмент меню.
+- `src/js/design-switcher.js` — переключение `V1/V2` через `localStorage`.
-- `components/footer.html` — HTML-фрагмент футера.
+- `src/js/inspector.js` — вспомогательный инспектор.
-- `assets/images` и `assets/icons` — место для локальных изображений и иконок.
+- `src/fonts/` — шрифты, которые попадают в сборку.
+- `src/assets/` — изображения и локальные медиа.
+- `_site/` — результат сборки, не коммитится.
+- `docs/` — проектные документы, аудит, handoff.
+
+## Как смотреть
+
+```bash
+npm run build
+npm run dev
+```
+
+После `npm run dev` Eleventy поднимет локальный сервер. Для статической проверки можно открыть файлы из `_site/`.
+
+Переключатель `V1/V2` есть в header и на странице `ui-kit.html`. Выбранная версия сохраняется в `localStorage` под ключом `dp-design-version`.
+
+## Основные страницы
+
+- `index.html` — главная: hero, producers, news, recommendations.
+- `catalog.html` — пример каталога.
+- `product.html` — пример страницы продукта, включая V2-only breadcrumbs.
+- `product-card-white.html` — варианты карточек на белом фоне.
+- `bottle-cards.html` — лаборатория карточек бутылок.
+- `about.html` — страница о компании.
+- `contacts.html` — контакты и форма.
+- `contacts-auth.html` — вариант контактов с auth-gate.
+- `news-villa-raiano.html` и `news-villa-raiano-v2.html` — редакционные страницы.
+- `article-guidelines.html` — гайд по статьям.
+- `ui-kit.html` — витрина дизайн-системы.
+
+## Что уже решено
+
+- Внедрен 11ty pipeline с passthrough для `src/css`, `src/js`, `src/fonts`, `src/assets`.
+- Добавлена V2-версия дизайна без удаления V1.
+- Подключены настоящие Cormorant Garamond `400/500` (`CormorantGaramond-Regular.woff2`, `CormorantGaramond-Medium.woff2`).
+- В V2 обновлены основные токены: бордовый `#7D021D`, теплый фон `#FFFDFA`, карточный фон `#F5F0E8`, Cormorant Garamond + Manrope.
+- В V2 облегчены Cormorant-заголовки, карточки товара, section headings, footer и mega-menu.
+- В V2 добавлены breadcrumbs для product, split contact fields и success-state формы.
+- Последняя проверенная сборка: `npm run build`.
+
+## Что осталось
+
+- Визуально проверить `V2` на desktop/tablet/mobile: `index`, `catalog`, `product`, `about`, `contacts`, `ui-kit`.
+- Довести product content model: расширенное описание, реальные характеристики, финальная композиция price/CTA.
+- Решить, нужно ли переносить V2-токены непосредственно в `src/css/ui-kit.css`, или достаточно текущего `v2.css` override.
+- Дооформить production-сценарии: catalog pagination, 404, cookie/privacy, реальные form validation states, auth routes.
 
 ## Правило организации
 
-В проекте должен быть один Git-репозиторий на уровне этой папки. Отдельные компоненты сайта живут внутри `components/`, а не как самостоятельные соседние проекты.
+В проекте должен быть один Git-репозиторий на уровне этой папки. Исходники живут в `src/`; корневые HTML-файлы и `_site/` считаются артефактами сборки/миграции, а не источником правды.
 
 ## Naming
 
@@ -34,7 +88,3 @@ Button / Primary / Default
 Card / Product / Hover
 Nav / Header / Desktop
 ```
-
-## Как смотреть
-
-Открой `index.html` или `ui-kit.html` напрямую в браузере. Сервер для текущей версии не нужен.

assets/js/components.js

@@ -0,0 +1,13 @@
+(function () {
+  async function load(id, url) {
+    var el = document.getElementById(id);
+    if (!el) return;
+    var r = await fetch(url);
+    if (!r.ok) return;
+    el.outerHTML = await r.text();
+  }
+  document.addEventListener('DOMContentLoaded', function () {
+    load('site-header', 'components/menu.html');
+    load('site-footer', 'components/footer.html');
+  });
+})();

catalog.html

@@ -1,50 +0,0 @@
-<!doctype html>
-<html lang="ru">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>DP Trade — Catalog</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@500;600;700;800&display=swap" rel="stylesheet" />
-    <link rel="stylesheet" href="css/site.css" />
-  </head>
-  <body class="compact-type">
-    <main class="section catalog-section">
-      <div class="container">
-        <div class="section-heading">
-          <p class="eyebrow">Catalog</p>
-          <h2>Каталог вина</h2>
-        </div>
-        <div class="catalog-layout">
-          <aside class="filters-panel">
-            <h3>Фильтры</h3>
-            <label class="checkbox"><input type="checkbox" checked /> Bordeaux</label>
-            <label class="checkbox"><input type="checkbox" /> Tuscany</label>
-            <label class="checkbox"><input type="checkbox" /> Rioja</label>
-            <label class="checkbox"><input type="checkbox" /> Mosel</label>
-            <a class="button button--primary" href="#">Применить</a>
-            <a class="button button--secondary" href="index.html">На главную</a>
-          </aside>
-          <section class="product-grid product-grid--compact">
-            <article class="product-card">
-              <div class="product-media"><span class="bottle"></span></div>
-              <div><span class="muted-caps">Bordeaux</span><h3>Chateau Laroque Grand Cru</h3><p>France · Red dry · 2019</p></div>
-              <div class="product-footer"><strong>3 890 ₽</strong><a class="button button--primary button--sm" href="product.html">Подробнее</a></div>
-            </article>
-            <article class="product-card">
-              <div class="product-media product-media--amber"><span class="bottle"></span></div>
-              <div><span class="muted-caps">Tuscany</span><h3>Brunello di Montalcino</h3><p>Italy · Red dry · 2018</p></div>
-              <div class="product-footer"><strong>4 240 ₽</strong><a class="button button--primary button--sm" href="product.html">Подробнее</a></div>
-            </article>
-            <article class="product-card">
-              <div class="product-media product-media--green"><span class="bottle"></span></div>
-              <div><span class="muted-caps">Mosel</span><h3>Riesling Kabinett</h3><p>Germany · White · 2021</p></div>
-              <div class="product-footer"><strong>2 150 ₽</strong><a class="button button--primary button--sm" href="product.html">Подробнее</a></div>
-            </article>
-          </section>
-        </div>
-      </div>
-    </main>
-  </body>
-</html>

components/footer.html

@@ -1,28 +1,13 @@
 <footer class="site-footer">
   <div class="container footer-container">
     <section class="footer-main">
-      <div class="footer-left">
+      <div class="footer-brand-block">
-        <div>
+        <a class="footer-brand" href="index.html" aria-label="DP Trade">
-          <a class="footer-brand" href="index.html" aria-label="DP Trade"><span>DP</span>.Trade</a>
+          <img src="https://wine-dp-trade.ru/wp-content/uploads/2024/11/logo-500x107.png" alt="DP Trade" width="156" height="33" />
+        </a>
         <p class="footer-brand-subtitle">Территория качественного вина</p>
       </div>
 
-        <div>
-          <span class="section-title">Мы в соцсетях</span>
-          <div class="social-links">
-            <a href="#" aria-label="Telegram">TG</a>
-            <a href="#" aria-label="VK">VK</a>
-          </div>
-        </div>
-
-        <article class="contacts-card">
-          <h2>Контакты</h2>
-          <a class="contact-link contact-phone" href="tel:+74959379460">+7 (495) 937-94-60</a>
-          <a class="contact-link" href="mailto:dptr@dp-trade.ru">dptr@dp-trade.ru</a>
-          <a class="button button--primary button--sm" href="#">Связаться с менеджером</a>
-        </article>
-      </div>
-
       <section class="footer-nav" aria-label="Навигация по разделам">
         <article class="nav-group">
           <h2>Каталог</h2>
@@ -48,12 +33,32 @@
         <article class="nav-group">
           <h2>Компания</h2>
           <ul>
-            <li><a href="#">О компании</a></li>
+            <li><a href="about.html">О компании</a></li>
-            <li><a href="#">Контакты</a></li>
+            <li><a href="contacts.html">Контакты</a></li>
+            <li><a href="contacts-auth.html">Контакты auth</a></li>
             <li><a href="#">Склады</a></li>
             <li><a href="#">Реквизиты</a></li>
           </ul>
         </article>
+      </section>
+
+      <article class="contacts-card">
+        <h2>Контакты</h2>
+        <a class="contact-link contact-phone" href="tel:+74959379460">+7 (495) 937-94-60</a>
+        <a class="contact-link" href="mailto:dptr@dp-trade.ru">dptr@dp-trade.ru</a>
+        <div class="social-links" aria-label="Социальные сети">
+          <a href="#" aria-label="Telegram">
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M21 4 3 11.2l6.3 2.2L18 7.7l-6.8 7.1.2 5.2 3-3.3 4.7 3.5L21 4Z" />
+            </svg>
+          </a>
+          <a href="#" aria-label="VK">
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M4 7h3l2 4.2c.5 1.1 1 1.6 1.3 1.6.2 0 .4-.3.4-1V7h3v3.7c0 .4.2.6.5.6.6 0 1.8-1.6 2.6-4.3H20c-.7 3-1.8 4.8-3 5.7 1.2.8 2.4 2.2 3.2 4.3h-3.4c-.8-1.5-1.8-2.7-2.5-2.7-.4 0-.6.3-.6.8V17h-1.5C8.8 17 6.2 13.9 4 7Z" />
+            </svg>
+          </a>
+        </div>
+      </article>
 
       <section class="footer-legal" aria-label="Правовая информация">
         <p>
@@ -64,6 +69,5 @@
         <p>© 2026 DP-Trade</p>
       </section>
     </section>
-    </section>
   </div>
 </footer>

components/head.js

@@ -0,0 +1,17 @@
+(function () {
+  var css = document.currentScript.getAttribute('data-css') || 'css/site.css';
+  document.currentScript.insertAdjacentHTML('beforebegin',
+    '<meta charset="UTF-8">' +
+    '<meta name="viewport" content="width=device-width, initial-scale=1.0">' +
+    '<link rel="preconnect" href="https://fonts.googleapis.com">' +
+    '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>' +
+    '<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700' +
+      '&family=Inter:wght@400;500;600;700;800' +
+      '&family=Manrope:wght@400;500;600;700;800' +
+      '&family=Montserrat:wght@500;600;700;800' +
+      '&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet">' +
+    '<link rel="stylesheet" href="' + css + '">' +
+    '<script async src="https://metrika.in20.ru/js/pa-LKQHOT3En5k9NYpn80cYX.js"><\/script>' +
+    '<script>window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};plausible.init()<\/script>'
+  );
+})();

css/tokens.css

@@ -1,3 +1,650 @@
+/* full family */
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/CormorantGaramond-Regular.woff2') format('woff2');
+}
+/* full family */
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/CormorantGaramond-Medium.woff2') format('woff2');
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/cormorant-garamond-600-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/cormorant-garamond-600-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/cormorant-garamond-600-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/cormorant-garamond-600-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/cormorant-garamond-600-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/cormorant-garamond-600-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/cormorant-garamond-600-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/cormorant-garamond-600-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/inter-400-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/inter-400-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/inter-400-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/inter-400-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/inter-400-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/inter-400-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/inter-400-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/inter-400-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/inter-400-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/inter-400-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/inter-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/inter-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2213, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/inter-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/inter-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/inter-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/manrope-400-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/manrope-400-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/manrope-400-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/manrope-400-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/manrope-400-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/manrope-400-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/manrope-400-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/manrope-400-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/manrope-400-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/manrope-400-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/manrope-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/manrope-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/manrope-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/manrope-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/manrope-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/manrope-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/manrope-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/manrope-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/manrope-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/manrope-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/playfair-display-600-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/playfair-display-600-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/playfair-display-600-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/playfair-display-600-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/playfair-display-600-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/playfair-display-600-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 :root {
   --color-primary-wine-100: #4b0f24;
   --color-primary-wine-80: #6d1c36;

css/ui-kit.css

@@ -1,3 +1,5 @@
+@import url("tokens.css");
+
 :root {
   --color-primary-wine-100: #4b0f24;
   --color-primary-wine-80: #6d1c36;
@@ -58,6 +60,7 @@ select {
   position: fixed;
   inset: 0 auto 0 0;
   width: 280px;
+  max-height: 100vh;
   padding: 24px;
   background: #f8fafc;
   border-right: 1px solid rgba(102, 96, 95, 0.18);
@@ -101,10 +104,39 @@ select {
 }
 
 .side-nav {
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 4px;
+  display: grid;
+  gap: 22px;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(75, 15, 36, 0.34) transparent;
+}
+
+.side-nav::-webkit-scrollbar {
+  width: 6px;
+}
+
+.side-nav::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: rgba(75, 15, 36, 0.28);
+}
+
+.side-nav__group {
   display: grid;
   gap: 8px;
 }
 
+.side-nav__group span {
+  padding: 0 12px;
+  color: var(--color-accent-gold);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
 .side-nav a {
   padding: 10px 12px;
   border-radius: var(--radius-sm);
@@ -254,6 +286,105 @@ h3 {
   font-size: 14px;
 }
 
+.icon-style-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.icon-style-card {
+  min-width: 0;
+  padding: 18px;
+  border: 1px solid rgba(102, 96, 95, 0.16);
+  border-radius: var(--radius-sm);
+  background: var(--color-white);
+  box-shadow: var(--shadow-soft);
+  display: grid;
+  gap: 14px;
+}
+
+.icon-demo-row {
+  min-height: 86px;
+  padding: 14px;
+  border-radius: var(--radius-sm);
+  background: #eef2f6;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.kit-icon {
+  color: var(--color-primary-wine-100);
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 auto;
+}
+
+.kit-icon svg {
+  width: 22px;
+  height: 22px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.75;
+}
+
+.kit-icon--line {
+  width: 44px;
+  height: 44px;
+}
+
+.kit-icon--soft,
+.kit-icon--filled {
+  width: 46px;
+  height: 46px;
+  border-radius: var(--radius-sm);
+}
+
+.kit-icon--soft {
+  border: 1px solid rgba(75, 15, 36, 0.14);
+  background: var(--color-white);
+}
+
+.kit-icon--filled {
+  background: var(--color-primary-wine-100);
+  color: var(--color-white);
+  box-shadow: 0 10px 22px rgba(75, 15, 36, 0.16);
+}
+
+.kit-icon--tiny {
+  width: 28px;
+  height: 28px;
+}
+
+.kit-icon--tiny svg {
+  width: 16px;
+  height: 16px;
+  stroke-width: 1.6;
+}
+
+.icon-style-card > span {
+  color: var(--color-accent-gold);
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.icon-style-card p {
+  margin: 0;
+  color: var(--color-gray-600);
+  font-size: 14px;
+  line-height: 1.45;
+}
+
+.icon-style-card code {
+  padding: 10px;
+  border-radius: var(--radius-sm);
+  background: #eef2f6;
+  white-space: normal;
+}
+
 .section {
   padding: 72px clamp(24px, 5vw, 72px);
   border-top: 1px solid rgba(102, 96, 95, 0.16);
@@ -269,10 +400,145 @@ h3 {
   margin-bottom: 40px;
 }
 
+.section-heading--split {
+  grid-template-columns: minmax(0, 0.58fr) minmax(280px, 0.42fr);
+  gap: 32px;
+  align-items: end;
+}
+
+.section-heading--split > p {
+  margin: 0;
+  color: var(--color-gray-600);
+  line-height: 1.6;
+}
+
 .subsection {
   margin-top: 40px;
 }
 
+.spec-grid {
+  margin-top: 18px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.spec-card {
+  min-width: 0;
+  padding: 16px;
+  border: 1px solid rgba(102, 96, 95, 0.16);
+  border-radius: var(--radius-sm);
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.spec-card span {
+  display: block;
+  margin-bottom: 8px;
+  color: var(--color-accent-gold);
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.spec-card p {
+  margin: 0;
+  color: var(--color-gray-600);
+  font-size: 14px;
+  line-height: 1.45;
+}
+
+.status-grid,
+.checklist-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.status-card,
+.production-rules article,
+.checklist-card {
+  min-width: 0;
+  padding: 20px;
+  border: 1px solid rgba(102, 96, 95, 0.16);
+  border-radius: var(--radius-sm);
+  background: var(--color-white);
+  box-shadow: var(--shadow-soft);
+}
+
+.status-card {
+  min-height: 190px;
+  display: grid;
+  align-content: space-between;
+  gap: 14px;
+}
+
+.status-card span,
+.production-rules span,
+.checklist-card span {
+  width: fit-content;
+  padding: 6px 9px;
+  border-radius: var(--radius-sm);
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.status-card--ready span {
+  background: rgba(31, 77, 58, 0.12);
+  color: #1f4d3a;
+}
+
+.status-card--review span {
+  background: rgba(185, 150, 91, 0.18);
+  color: #7c5f26;
+}
+
+.status-card--draft span {
+  background: rgba(102, 96, 95, 0.12);
+  color: var(--color-gray-600);
+}
+
+.status-card strong {
+  color: var(--color-neutral-black);
+  font-family: var(--font-heading);
+  font-size: 22px;
+  line-height: 1.12;
+  text-transform: uppercase;
+}
+
+.status-card p,
+.production-rules p {
+  margin: 0;
+  color: var(--color-gray-600);
+  line-height: 1.5;
+}
+
+.production-rules {
+  margin-top: 18px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.production-rules span,
+.checklist-card span {
+  margin-bottom: 14px;
+  display: inline-block;
+  background: rgba(75, 15, 36, 0.08);
+  color: var(--color-primary-wine-100);
+}
+
+.checklist-card ul {
+  margin: 0;
+  padding-left: 18px;
+  color: var(--color-gray-600);
+  line-height: 1.58;
+}
+
+.checklist-card li + li {
+  margin-top: 8px;
+}
+
 .swatch-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -417,6 +683,88 @@ code {
   background: #fff;
 }
 
+.shadow-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.shadow-card {
+  min-height: 220px;
+  padding: 18px;
+  border: 1px solid rgba(102, 96, 95, 0.14);
+  border-radius: var(--radius-sm);
+  background: var(--color-white);
+  display: grid;
+  align-content: space-between;
+  gap: 12px;
+}
+
+.shadow-card span {
+  color: var(--color-accent-gold);
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.shadow-card strong {
+  color: var(--color-neutral-black);
+  font-family: var(--font-heading);
+  font-size: 20px;
+  line-height: 1.1;
+  text-transform: uppercase;
+}
+
+.shadow-card p {
+  margin: 0;
+  color: var(--color-gray-600);
+  font-size: 14px;
+  line-height: 1.45;
+}
+
+.shadow-card code {
+  width: fit-content;
+  max-width: 100%;
+  padding: 7px 9px;
+  border-radius: var(--radius-sm);
+  background: #eef2f6;
+  color: var(--color-primary-wine-100);
+  font-size: 12px;
+  white-space: normal;
+}
+
+.shadow-card--none {
+  box-shadow: none;
+}
+
+.shadow-card--header {
+  box-shadow: 0 10px 28px rgba(22, 22, 22, 0.05);
+}
+
+.shadow-card--soft {
+  box-shadow: var(--shadow-soft);
+}
+
+.shadow-card--card {
+  box-shadow: 0 18px 46px rgba(18, 25, 38, 0.08);
+}
+
+.shadow-card--hover {
+  box-shadow: 0 22px 54px rgba(25, 37, 62, 0.13);
+}
+
+.shadow-card--lift {
+  box-shadow: var(--shadow-lift);
+}
+
+.shadow-card--editorial {
+  box-shadow: 0 22px 58px rgba(25, 37, 62, 0.12);
+}
+
+.shadow-card--focus {
+  box-shadow: 0 0 0 4px rgba(75, 15, 36, 0.08);
+}
+
 .product-grid {
   display: grid;
   gap: 20px;
@@ -466,6 +814,16 @@ code {
     var(--media-bg, #dde4ec);
 }
 
+.product-photo {
+  width: auto;
+  max-width: 132px;
+  height: 190px;
+  object-fit: contain;
+  object-position: center;
+  border: 0;
+  box-shadow: none;
+}
+
 .product-card--compact .product-media {
   min-height: 130px;
 }
@@ -539,6 +897,80 @@ code {
   font-size: 18px;
 }
 
+.image-bg-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.image-bg-card {
+  min-width: 0;
+  padding: 16px;
+  border: 1px solid rgba(102, 96, 95, 0.16);
+  border-radius: var(--radius-sm);
+  background: var(--color-white);
+  box-shadow: var(--shadow-soft);
+  display: grid;
+  gap: 12px;
+}
+
+.image-bg-preview {
+  min-height: 190px;
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  display: grid;
+  place-items: center;
+}
+
+.image-bg-preview img {
+  width: auto;
+  max-width: 120px;
+  height: 164px;
+  object-fit: contain;
+  border: 0;
+  box-shadow: none;
+}
+
+.product-image--gold {
+  background: linear-gradient(135deg, #b9965b 0%, #d7c18b 48%, #eef2f6 100%);
+}
+
+.product-image--wine {
+  background: linear-gradient(135deg, #6d1c36 0%, #9b5366 46%, #e6dce1 100%);
+}
+
+.product-image--green {
+  background: linear-gradient(135deg, #1f4d3a 0%, #88a28e 48%, #eef2e5 100%);
+}
+
+.image-bg-preview--neutral {
+  background: linear-gradient(135deg, #eef2f6 0%, #dde6ef 100%);
+}
+
+.image-bg-card span {
+  color: var(--color-accent-gold);
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.image-bg-card p {
+  margin: 0;
+  color: var(--color-gray-600);
+  font-size: 14px;
+  line-height: 1.45;
+}
+
+.image-bg-card code {
+  padding: 10px;
+  border-radius: var(--radius-sm);
+  background: #eef2f6;
+  color: var(--color-primary-wine-100);
+  font-size: 12px;
+  line-height: 1.45;
+  white-space: normal;
+}
+
 .header-demo {
   padding: 16px;
   border-radius: var(--radius-sm);
@@ -728,49 +1160,134 @@ tbody tr:hover {
   text-transform: uppercase;
 }
 
-.screen-preview {
+.template-spec-grid {
-  overflow: hidden;
+  margin-top: 24px;
-  border: 1px solid rgba(102, 96, 95, 0.18);
-  border-radius: var(--radius-sm);
-  background: var(--color-white);
-  box-shadow: var(--shadow-soft);
-}
-
-.screen-preview__bar {
-  height: 48px;
-  background: var(--color-primary-wine-100);
-}
-
-.screen-preview__hero {
-  min-height: 300px;
-  padding: 48px;
-  background:
-    linear-gradient(90deg, rgba(75, 15, 36, 0.84), rgba(75, 15, 36, 0.24)),
-    linear-gradient(135deg, #4b0f24, #b9965b);
-  color: var(--color-white);
-  display: grid;
-  align-content: center;
-  justify-items: start;
-}
-
-.screen-preview__hero h3 {
-  max-width: 520px;
-  margin: 8px 0 20px;
-  font-size: 48px;
-  text-transform: uppercase;
-}
-
-.screen-preview__content {
-  padding: 24px;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 16px;
 }
 
-.screen-preview__content span {
+.template-spec {
-  min-height: 110px;
+  min-width: 0;
+  padding: 20px;
+  border: 1px solid rgba(102, 96, 95, 0.16);
   border-radius: var(--radius-sm);
-  background: #e8edf3;
+  background: var(--color-white);
+  box-shadow: var(--shadow-soft);
+  display: grid;
+  gap: 10px;
+}
+
+.template-spec span {
+  color: var(--color-accent-gold);
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.template-spec h3 {
+  margin: 0;
+  font-size: 22px;
+  line-height: 1.12;
+  text-transform: uppercase;
+}
+
+.template-spec p {
+  margin: 0;
+  color: var(--color-gray-600);
+  font-size: 14px;
+  line-height: 1.48;
+}
+
+.template-spec a {
+  color: var(--color-primary-wine-100);
+  font-weight: 800;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.template-spec em {
+  margin-top: 4px;
+  color: var(--color-primary-wine-100);
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 800;
+}
+
+.screen-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+}
+
+.screen-card {
+  min-height: 230px;
+  padding: 20px;
+  border: 1px solid rgba(102, 96, 95, 0.16);
+  border-radius: var(--radius-sm);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.98)),
+    var(--screen-accent, #eef2f6);
+  box-shadow: var(--shadow-soft);
+  display: grid;
+  align-content: space-between;
+  gap: 18px;
+  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+}
+
+.screen-card:hover {
+  border-color: rgba(75, 15, 36, 0.28);
+  box-shadow: 0 22px 54px rgba(25, 37, 62, 0.13);
+  transform: translateY(-2px);
+}
+
+.screen-card span {
+  color: var(--color-accent-gold);
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.screen-card strong {
+  color: var(--color-neutral-black);
+  font-family: var(--font-heading);
+  font-size: 24px;
+  line-height: 1.1;
+  text-transform: uppercase;
+}
+
+.screen-card p {
+  margin: 0;
+  color: var(--color-gray-600);
+  line-height: 1.5;
+}
+
+.screen-card--home {
+  --screen-accent: linear-gradient(135deg, #4b0f24, #b9965b);
+}
+
+.screen-card--catalog {
+  --screen-accent: linear-gradient(135deg, #eef2f6, #d9dee6);
+}
+
+.screen-card--product,
+.screen-card--cards {
+  --screen-accent: linear-gradient(135deg, #6d1c36, #e6dce1);
+}
+
+.screen-card--news,
+.screen-card--guidelines {
+  --screen-accent: linear-gradient(135deg, #1f4d3a, #e8eadb);
+}
+
+.screen-card--about,
+.screen-card--contacts,
+.screen-card--auth {
+  --screen-accent: linear-gradient(135deg, #1f3476, #dde4ec);
+}
+
+.screen-qa-grid {
+  margin-top: 24px;
 }
 
 @media (max-width: 1100px) {
@@ -796,7 +1313,15 @@ tbody tr:hover {
   }
 
   .swatch-grid,
-  .template-grid {
+  .shadow-grid,
+  .image-bg-grid,
+  .icon-style-grid,
+  .status-grid,
+  .production-rules,
+  .checklist-grid,
+  .template-grid,
+  .template-spec-grid,
+  .screen-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
@@ -828,10 +1353,18 @@ tbody tr:hover {
   }
 
   .swatch-grid,
+  .shadow-grid,
+  .image-bg-grid,
+  .icon-style-grid,
+  .status-grid,
+  .production-rules,
+  .checklist-grid,
   .product-grid--3,
   .template-grid,
-  .screen-preview__content,
+  .template-spec-grid,
-  .token-grid {
+  .screen-grid,
+  .token-grid,
+  .spec-grid {
     grid-template-columns: 1fr;
   }
 
@@ -853,11 +1386,7 @@ tbody tr:hover {
     grid-column: auto;
   }
 
-  .screen-preview__hero {
+  .screen-card {
-    padding: 28px;
+    min-height: 190px;
-  }
-
-  .screen-preview__hero h3 {
-    font-size: 36px;
   }
 }

docs/design-audit-followup.md

@@ -0,0 +1,172 @@
+# DP Trade - разбор предложений дизайнера
+
+Источник: `/Users/lexx/Downloads/Аудит сайт дп-трейд.pdf`  
+Дата разбора: 2026-04-21
+
+## Короткий вывод
+
+Предложения дизайнера в основном подтверждаются текущей версткой. Главная системная проблема - сайт все еще построен на retail/B2B-визуальном языке: Montserrat/Inter, жирные uppercase-заголовки, холодный серо-голубой фон, конкурирующие синий и бордовый акценты, тяжелые CTA и градиентные карточки товара. Для премиального винного каталога нужно сместить систему к более спокойной editorial-подаче: Cormorant Garamond для заголовков и названий вин, Manrope для текста, теплый белый/кремовый фон, один основной бордовый акцент.
+
+Часть аудита уже не полностью совпадает с текущей реализацией: на главной CTA в hero присутствуют (`Смотреть каталог`, `Открыть UI-kit`), а заголовки в исходных HTML не набраны капсом руками. Но CSS принудительно включает uppercase и тяжелый вес, поэтому визуально замечание дизайнера остается актуальным.
+
+## Статус проекта - 2026-05-19
+
+Кодовая база сейчас находится в состоянии V1 + переключаемый V2. Источник правды - `src/`, сборка идет через Eleventy в `_site/`. Основные дизайнерские замечания закрыты в V2: обновлены токены, подключены легкие Cormorant `400/500`, снижена жирность Cormorant, переработаны карточки товара, section headings, mega-menu, footer, контакты и product breadcrumbs. V1 остается для сравнения и не считается финальным направлением.
+
+Открытые задачи: визуальный QA V2 на desktop/tablet/mobile, финальная продуктовая модель и расширенное описание товара, проверка плотных catalog list-cards, перенос V2-токенов в Elementor-документ/production handoff, production-блоки вроде pagination, 404, cookie/privacy и полноценной form validation.
+
+## Статус проверки кода - 2026-04-23
+
+Важно: исправления внедрены как переключаемая версия V2, а не как замена V1. В `src/_includes/layouts/base.njk` подключен `css/v2.css`, `src/js/design-switcher.js` переключает `data-design-version="v1|v2"` через `localStorage`, а переключатели есть в header и UI-kit. По умолчанию без сохраненного выбора открывается V1, поэтому статусы ниже означают "исправлено в V2".
+
+| Блок | Статус | Что найдено в коде |
+| --- | --- | --- |
+| Механика V2 | [done] исправлено | Добавлены `src/css/v2.css`, `src/js/design-switcher.js`, переключатели V1/V2 в `src/_includes/partials/header.njk` и `src/ui-kit.njk`. |
+| Системные токены | [done] исправлено в V2 | В `src/css/tokens.css` для `:root[data-design-version="v2"]` заданы `#7D021D`, `#FFFDFA`, `#F5F0E8`, Cormorant Garamond и Manrope. |
+| UI-kit токены | [partial] частично | `src/css/ui-kit.css` все еще содержит старые V1-токены, но V2-override подключается после него через `src/css/v2.css`. Для полной чистоты можно синхронизировать сам `ui-kit.css`. |
+| Типографика и uppercase | [done] исправлено в V2 | `src/css/v2.css` снимает uppercase с H1-H4, hero, карточек, page hero, формы и снижает веса заголовков. Caps оставлен для meta/eyebrow. |
+| Минимальный размер 8px | [done] исправлено в V2 | `.brand-logo small` поднят до 12px в `src/css/v2.css`. |
+| Палитра и синий телефон | [done] исправлено в V2 | В V2 синий акцент заменен на бордовый, `.phone-link` стал бордовым и легче по весу. |
+| Холодные фоны | [partial] частично | Главные конфликтные фоны (`news-section`, `muted-section`, contacts hero) переведены в теплую гамму в V2. В V1 и отдельных старых CSS-участках холодные цвета остаются. |
+| Карточки товара | [done] исправлено в V2 | Градиенты `.product-media*` заменены на `#F5F0E8`, название стало serif/normal case, footer перестроен вертикально, CTA стал outlined/full-width. |
+| Карточки каталога | [partial] частично | Заголовки списка облегчены и переведены в serif/normal case. Цена и плотная B2B-композиция в основном сохранены. |
+| Mega-menu | [done] исправлено в V2 | Заголовки снижены до 18px/normal case, изображения уменьшены, страны/апелласьоны разведены по иерархии, popular chips получили единый min-width. |
+| Главная | [done] исправлено в V2 | Hero H1 и H2 секций переведены в Cormorant/normal case, карточки рекомендаций и фон новостей обновлены. CTA уже был. |
+| Страница продукта | [partial] частично | Добавлены V2-only breadcrumbs, H1 облегчен, описание ограничено `66ch`. Расширенного описания пока нет, и вертикальную композицию метаданных/CTA стоит еще проверить визуально. |
+| "О нас" | [partial] частично | H1, article width, H2, feature-card, blockquote и muted-section исправлены в V2. Hero все еще использует темную фотографию и правую meta-карточку, хотя карточка стала мягче. |
+| "Контакты" | [partial] частично | Hero без фото, телефон уменьшен, форма облегчена, поле контакта разделяется JS на телефон/email, success-state добавлен. Юридический блок только опущен в конец левой колонки, но не вынесен ниже формы/в конец страницы. |
+| Проверка сборки | [done] проверено | `npm run build` успешно прошел 2026-05-19; Eleventy записал 12 файлов в `_site`. |
+
+## Новые замечания дизайнера - 2026-04-28
+
+Источник: скриншоты/комментарии от Виктории.
+
+| Блок | Статус | Что сделано |
+| --- | --- | --- |
+| Легкие Cormorant 400/500 | [done] подключено | Добавлены `CormorantGaramond-Regular.woff2` и `CormorantGaramond-Medium.woff2`; в `src/css/tokens.css` и `css/tokens.css` прописаны настоящие `@font-face` для весов `400` и `500`. |
+| Общая жирность Cormorant в V2 | [done] CSS-слой | В `src/css/v2.css` Cormorant-заголовки переведены с `500/600` на `400` там, где это карточки, секции, mega-menu, footer, page hero, article blocks. |
+| Карточки товара | [done] V2 | `.product-card h3` увеличен до 22px, вес снижен до 400, normal case сохранен. |
+| Заголовки секций | [done] V2 | `.section-heading h2` сделан тонким uppercase с Cormorant `400`, без дополнительной жирности. Hero H1 не затронут caps-правилом. |
+| Footer | [done] V2 | Заголовки колонок footer стали Cormorant 16px/400, без uppercase; подпункты остаются Manrope. Телефон в footer оставлен бордовым. |
+| Mega-menu | [done] V2 | Заголовок `Вина по географии` увеличен до 22px и облегчен до 400; меню, колонки и ссылки выровнены по левому краю; popular chips стали менее кнопочными и с левым текстом. |
+| Апелласьоны | [done] V2 | `.country-link` (`Франция`, `Италия`) перекрашен в бордо, вес снижен до 500; апелласьоны под ними остались normal case с левым отступом. |
+
+## Ключевые замечания
+
+### 1. Типографика
+
+- В `tokens.css` основными токенами стоят `Montserrat` для заголовков и `Inter` для body. Дизайнер предлагает заменить на `Cormorant Garamond` + `Manrope`, оба шрифта уже подключены.
+- В CSS много `font-weight: 800` и `text-transform: uppercase` для hero, H2, карточек, меню, контактов и карточек преимуществ. Это создает ощущение "крика" и снижает премиальность.
+- Важное уточнение: проблема не в текстах шаблонов, а в стилях. Например, `src/about.njk` содержит нормальный регистр, но `.page-hero h1` принудительно делает uppercase.
+- Минимальный размер текста должен быть не ниже 12px. Текущий 8px встречается в `.brand-logo small`; если этот элемент реально используется или вернется, его надо поднять до 12px.
+
+### 2. Цвет и палитра
+
+- Сейчас системные цвета: бордовый `#4b0f24`, фон `#f4f6f9`, синий акцент `#1f3476`. Дизайнер предлагает: основной бордовый `#7D021D`, теплый белый `#FFFDFA`, теплый карточный фон `#F5F0E8`, синий оставить только в логотипе.
+- Синий телефон в шапке конкурирует с бордовым CTA.
+- Холодные фоны `#f4f6f9`, `#eef2f6`, `#f8fafc` встречаются во многих секциях и выглядят чужими для винной темы.
+- Градиенты в карточках товара выглядят случайными и конкурируют с этикетками бутылок. Нужен единый нейтральный фон под товар.
+
+### 3. Карточка товара
+
+- На главной карточки рекомендаций используют разноцветные градиенты под бутылками.
+- Название товара в карточке визуально становится жирным uppercase через CSS. Рекомендация: normal case, Cormorant Garamond, 16-18px.
+- Цена и кнопка стоят в одной строке как равнозначные элементы. Лучше выстроить вертикальную иерархию: регион, название, мета, разделитель, цена, full-width outlined CTA.
+- Основной CTA сейчас темный залитый. Для карточек дизайнер предлагает более легкую outlined-кнопку на всю ширину.
+
+### 4. Mega-menu
+
+- Заголовки mega-menu слишком крупные и тяжелые: 26px, 800, uppercase.
+- Фото занимает целую колонку и перетягивает внимание с навигации. Лучше уменьшить изображение до декоративного акцента или вынести в промо-блок в конце меню.
+- В апелласьонах страна и регионы недостаточно различаются по иерархии. Страна должна быть золотой, 11px, caps; апелласьоны - 14px normal case с отступом.
+- Чипы популярных регионов имеют разную ширину. Лучше задать единый min-width или вытянуть в ровную горизонтальную строку.
+
+### 5. Главная
+
+- Hero сейчас уже содержит явные CTA, поэтому замечание из аудита про отсутствие CTA неактуально.
+- Остается актуальным: hero H1 слишком тяжелый из-за Montserrat, 800 и uppercase. Нужно перевести в Cormorant Garamond, normal case, более спокойный вес.
+- H2 в секциях тоже надо убрать из uppercase и снизить визуальный вес.
+
+### 6. Страница продукта
+
+- Нет хлебных крошек. Для каталога это важно для ориентации и SEO.
+- Описание продукта пока короткое, но для будущего длинного описания нужен текстовый блок с `max-width: 65-72ch`.
+- Есть большой разрыв между метаданными и кнопками из-за сетки и отступов. Нужно проверить вертикальную композицию после добавления breadcrumbs и описания.
+- H1 товара также наследует тяжелый uppercase.
+
+### 7. "О нас"
+
+- Hero-паттерн похож на остальные внутренние страницы: темная фотография, большой H1, белая карточка справа. Это снижает ощущение перехода между разделами.
+- H1 спокойнее сделать serif, 48-56px, normal case, без давления.
+- Правая карточка в hero сейчас работает как приклеенный светлый прямоугольник. Ее стоит смягчить: меньше кегль, обычный текст, меньше uppercase.
+- Основной текст ограничен `max-width: 860px`, дизайнер предлагает 600-640px или около 66ch.
+- Подзаголовки внутри статьи слишком крупные и uppercase.
+- Карточки 01-04 имеют жесткую высоту 210px и `align-content: space-between`, из-за чего контент искусственно растянут.
+- Цитата в CSS оформлена цветной левой границей и холодным фоном. Если блокquote используется в контенте, его лучше сделать через italic serif и тонкую нейтральную линию.
+- Финальный muted-section на холодном фоне надо перевести в теплый кремовый.
+
+### 8. "Контакты"
+
+- Для контактов полноэкранный/крупный hero с темной фотографией слишком тяжелый. Контакты должны быстрее показывать телефон, email и форму.
+- Телефон в карточке слишком крупный и тяжелый, выбивается из общей иерархии.
+- Юридическая информация стоит рядом с телефоном и email как равнозначная карточка. Ее лучше перенести ниже формы или в конец страницы мелким справочным блоком.
+- Заголовок формы крупный и uppercase, labels слишком жирные.
+- Поле "Телефон или email" неоднозначно. Лучше разделить на два поля или дать понятную подсказку.
+- Нет видимого success-state после отправки формы.
+
+## Расхождения с аудитом
+
+- CTA в hero главной уже есть: `src/index.njk` содержит две кнопки в первом экране. Значит пункт "отсутствует явный CTA" стоит закрыть как неактуальный или переформулировать в "сделать CTA визуально легче/элегантнее".
+- В исходных шаблонах многие заголовки набраны нормальным регистром. Капс появляется из CSS. Исправлять надо в основном CSS-токены и правила `text-transform`, а не тексты.
+- В аудите упоминается Playfair Display как почти неиспользуемый шрифт, но итоговая рекомендация дизайнера - Cormorant Garamond + Manrope. Лучше не распыляться на Playfair и зафиксировать одну пару.
+- В карточках каталога (`product-card--list`) названия уже без uppercase, но слишком тяжелые и крупные. Замечание про uppercase точнее относится к карточкам рекомендаций/общим `.product-card h3`.
+- Страница продукта пока очень короткая. Замечание про ширину описания надо учесть как требование к будущему расширенному описанию, а не как текущий критический баг.
+
+## План доработок
+
+### Этап 1. Системные токены и базовая типографика
+
+1. [done] V2: обновить `src/css/tokens.css`: `--font-heading` на Cormorant Garamond, `--font-body` на Manrope, основной бордовый на `#7D021D`, фон на теплый `#FFFDFA`, surface/card background на теплую белую/кремовую шкалу.
+2. [partial] Частично: синхронизировать те же токены в `src/css/ui-kit.css`, чтобы витрина UI-kit не расходилась с сайтом. V2-override работает, но базовый `ui-kit.css` остался на V1-токенах.
+3. [done] V2: убрать uppercase с H2-H4, product titles, news titles, page hero titles, form titles. Caps оставить только для eyebrow/meta labels.
+4. [done] V2: пересобрать шкалу весов: H1 может быть крупным, но не обязательно 800; H2-H4 сделать 500-600 или доступный локальный эквивалент с текущими файлами шрифтов.
+5. [done] V2: проверить минимальные размеры: не использовать текст ниже 12px.
+
+### Этап 2. Карточки и CTA
+
+1. [done] V2: заменить градиентные product media на единый теплый нейтральный фон `#F5F0E8`.
+2. [done] V2: перестроить карточку рекомендаций: region label, serif title 16-18px, gray meta 13px, разделитель, цена 22-24px, outlined full-width CTA.
+3. [done] V2: смягчить primary/secondary buttons: новый бордовый, меньше "B2B-тяжести", четкие hover/focus states.
+4. [partial] Частично: проверить карточки каталога отдельно: сохранить плотность B2B-списка, но снизить вес заголовков и цены.
+
+### Этап 3. Header и mega-menu
+
+1. [done] V2: убрать синий цвет телефона в шапке, оставить синий только внутри логотипа.
+2. [done] V2: уменьшить и облегчить заголовки mega-menu: 16-18px, normal case, semibold.
+3. [done] V2: переделать визуальную колонку mega-menu: уменьшить изображение или вынести его в небольшой промо-блок.
+4. [done] V2: настроить иерархию апелласьонов: страна как meta label, регионы с отступом и normal case.
+5. [done] V2: выровнять popular chips: единый min-width или одна строка с равномерным ритмом.
+
+### Этап 4. Страницы
+
+1. [done] V2: главная - обновить hero-типографику, H2 секций, карточки рекомендаций и холодные фоны новостей.
+2. [partial] Частично: продукт - добавить breadcrumbs, расширенный description-блок с `max-width: 65-72ch`, пересобрать вертикальную иерархию metadata/price/CTA.
+3. [partial] Частично: о нас - сделать hero спокойнее, смягчить правую карточку, сузить основной текст до 66ch, облегчить подзаголовки, убрать жесткую высоту feature-card, заменить холодный muted-section.
+4. [partial] Частично: контакты - сделать компактный hero без тяжелой фотографии, вывести телефон/email в первый экран, юридический текст перенести ниже, облегчить форму, разделить контактные поля или добавить подсказку, добавить success-state.
+
+### Этап 5. Проверка
+
+1. [done] Прогнать `npm run build`.
+2. [todo] Проверить страницы минимум на desktop и mobile: `index.html`, `catalog.html`, `product.html`, `about.html`, `contacts.html`, `ui-kit.html`.
+3. [todo] Отдельно проверить, что длинные русские заголовки и телефоны не ломают сетку.
+4. [partial] Частично: сверить UI-kit с сайтом: токены, кнопки, карточки, hero, формы.
+
+## Приоритет
+
+P0: токены, шрифты, uppercase, фон, основной бордовый. Без этого остальные правки будут точечными и визуально не соберутся.
+
+P1: карточки товара, CTA, header/mega-menu. Это самые заметные пользовательские интерфейсы и они прямо влияют на восприятие каталога.
+
+P2: страницы "О нас", "Контакты", "Продукт". Здесь много композиционных улучшений, но они лучше лягут после системной смены визуального языка.
+
+P3: финальная полировка UI-kit, состояния формы, hover/focus, адаптивные проверки.

index.html

@@ -1,351 +0,0 @@
-<!doctype html>
-<html lang="ru">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>DP Trade — Home</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Inter:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Montserrat:wght@500;600;700;800&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet" />
-    <link rel="stylesheet" href="css/site.css" />
-  </head>
-  <body>
-    <div class="site-shell">
-      <header class="site-header">
-        <div class="container header-top">
-          <a class="brand-logo" href="index.html" aria-label="DP Trade">
-            <img src="https://wine-dp-trade.ru/wp-content/uploads/2024/11/logo-500x107.png" alt="DP Trade" width="156" height="33" />
-          </a>
-          <form class="search-bar" action="#" role="search">
-            <button type="submit" aria-label="Поиск">⌕</button>
-            <input type="search" placeholder="Поиск по вину, региону, производителю" aria-label="Поиск" />
-          </form>
-          <div class="header-actions">
-            <a class="phone-link" href="tel:+74959379460">+7 (495) 937-94-60</a>
-            <a class="header-icon header-icon--air" href="#" aria-label="Аккаунт">
-              <svg viewBox="0 0 24 24" aria-hidden="true">
-                <path d="M12 12.2a4.1 4.1 0 1 0 0-8.2 4.1 4.1 0 0 0 0 8.2Z" />
-                <path d="M4.8 20.2c1.1-3.3 3.6-5 7.2-5s6.1 1.7 7.2 5" />
-              </svg>
-            </a>
-            <a class="header-icon header-icon--air" href="#" aria-label="Корзина">
-              <svg viewBox="0 0 24 24" aria-hidden="true">
-                <path d="M5 6h2l1.4 9.2h8.5L19 8H8" />
-                <path d="M9.4 19.2h.1M16.8 19.2h.1" />
-              </svg>
-            </a>
-          </div>
-        </div>
-        <nav class="container main-nav" aria-label="Основная навигация">
-          <a href="catalog.html">Каталог</a>
-          <div class="nav-item">
-            <button class="nav-trigger" type="button" aria-expanded="false">Регион <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
-            <section class="mega-menu" aria-label="Регион">
-              <div class="mega-intro">
-                <div>
-                  <p class="eyebrow">Регион</p>
-                  <h2>Вина по географии</h2>
-                </div>
-                <p>Быстрый вход в каталог через страну, апелласьон или популярный регион.</p>
-              </div>
-              <div class="menu-grid">
-                <article class="menu-column visual-column">
-                  <img src="https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?auto=format&fit=crop&w=900&q=80" alt="Виноградник на холмах" />
-                  <p>Выбирайте через знакомую страну или сразу через регион, если точно знаете, что ищете.</p>
-                </article>
-                <article class="menu-column">
-                  <p class="section-title">Страны</p>
-                  <a href="#">Старый Свет</a><a href="#">Франция</a><a href="#">Италия</a><a href="#">Испания</a><a href="#">Германия</a><a href="#">Новый Свет</a><a href="#">Чили</a><a href="#">Аргентина</a>
-                </article>
-                <article class="menu-column appellations">
-                  <p class="section-title">Апелласьоны</p>
-                  <div class="appellation-group"><a class="country-link" href="#">Франция</a><a href="#">Bordeaux</a><a href="#">Medoc</a><a href="#">Margaux</a><a href="#">Pauillac</a><a href="#">Saint-Emilion</a></div>
-                  <div class="appellation-group"><a class="country-link" href="#">Италия</a><a href="#">Toscana</a><a href="#">Chianti</a><a href="#">Brunello di Montalcino</a><a href="#">Piemonte</a></div>
-                </article>
-                <article class="menu-column">
-                  <p class="section-title">Популярные регионы</p>
-                  <div class="popular-list"><a href="#">Бордо</a><a href="#">Тоскана</a><a href="#">Пьемонт</a><a href="#">Риоха</a><a href="#">Напа Вэлли</a></div>
-                </article>
-              </div>
-            </section>
-          </div>
-          <div class="nav-item">
-            <button class="nav-trigger" type="button" aria-expanded="false">Вино <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
-            <section class="mega-menu" aria-label="Вино">
-              <div class="mega-intro">
-                <div>
-                  <p class="eyebrow">Вино</p>
-                  <h2>Каталог по типу и стилю</h2>
-                </div>
-                <p>Быстрый выбор вина по цвету, категории и уровню сладости.</p>
-              </div>
-              <div class="menu-grid">
-                <article class="menu-column visual-column">
-                  <img src="https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?auto=format&fit=crop&w=900&q=80" alt="Бокалы вина" />
-                  <p>Начните с типа вина или сразу переходите к стилю, если знаете нужный профиль.</p>
-                </article>
-                <article class="menu-column">
-                  <p class="section-title">По типу</p>
-                  <a href="#">Красное</a><a href="#">Белое</a><a href="#">Розовое</a><a href="#">Игристое</a><a href="#">Шампанское</a>
-                </article>
-                <article class="menu-column">
-                  <p class="section-title">По стилю</p>
-                  <a href="#">Сухие</a><a href="#">Полусухие</a><a href="#">Полусладкие</a><a href="#">Сладкие</a><a href="#">Брют</a><a href="#">Экстра брют</a>
-                </article>
-                <article class="menu-column">
-                  <p class="section-title">Популярное</p>
-                  <div class="popular-list"><a href="#">Новинки</a><a href="#">Хиты продаж</a><a href="#">Для ресторанов</a><a href="#">Премиум подборка</a></div>
-                </article>
-              </div>
-            </section>
-          </div>
-
-          <div class="nav-item">
-            <button class="nav-trigger" type="button" aria-expanded="false">Крепкий алкоголь <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
-            <section class="mega-menu" aria-label="Крепкий алкоголь">
-              <div class="mega-intro">
-                <div>
-                  <p class="eyebrow">Spirits</p>
-                  <h2>Крепкий алкоголь</h2>
-                </div>
-                <p>Подборка крепких напитков для баров, ресторанов и специализированной розницы.</p>
-              </div>
-              <div class="menu-grid">
-                <article class="menu-column visual-column">
-                  <img src="https://images.unsplash.com/photo-1527281400683-1aae777175f8?auto=format&fit=crop&w=900&q=80" alt="Крепкий алкоголь в бокале" />
-                  <p>Категории, выдержка и происхождение для быстрой навигации по ассортименту.</p>
-                </article>
-                <article class="menu-column">
-                  <p class="section-title">Категории</p>
-                  <a href="#">Виски</a><a href="#">Коньяк</a><a href="#">Арманьяк</a><a href="#">Ром</a><a href="#">Джин</a><a href="#">Водка</a><a href="#">Текила</a><a href="#">Ликеры</a>
-                </article>
-                <article class="menu-column">
-                  <p class="section-title">По стилю</p>
-                  <a href="#">Односолодовый</a><a href="#">Купажированный</a><a href="#">Выдержанный</a><a href="#">Пряный</a><a href="#">Дижестив</a><a href="#">Для коктейлей</a>
-                </article>
-                <article class="menu-column">
-                  <p class="section-title">Популярное</p>
-                  <div class="popular-list"><a href="#">Single Malt</a><a href="#">Cognac VSOP</a><a href="#">Premium Gin</a><a href="#">Bar Selection</a></div>
-                </article>
-              </div>
-            </section>
-          </div>
-
-          <div class="nav-item">
-            <button class="nav-trigger" type="button" aria-expanded="false">Производители <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
-            <section class="mega-menu" aria-label="Производители">
-              <div class="mega-intro">
-                <div>
-                  <p class="eyebrow">Производители</p>
-                  <h2>Дома, хозяйства и бренды</h2>
-                </div>
-                <p>Навигация по ключевым производителям, регионам и партнерским брендам DP Trade.</p>
-              </div>
-              <div class="menu-grid">
-                <article class="menu-column visual-column">
-                  <img src="https://images.unsplash.com/photo-1568213816046-0ee1c42bd559?auto=format&fit=crop&w=900&q=80" alt="Винодельня и бочки" />
-                  <p>Откройте ассортимент через знакомые хозяйства, винные дома и регионы производства.</p>
-                </article>
-                <article class="menu-column">
-                  <p class="section-title">По странам</p>
-                  <a href="#">Франция</a><a href="#">Италия</a><a href="#">Испания</a><a href="#">Германия</a><a href="#">Португалия</a><a href="#">Чили</a><a href="#">Аргентина</a>
-                </article>
-                <article class="menu-column">
-                  <p class="section-title">Избранные</p>
-                  <a href="#">Chateau Laroque</a><a href="#">Marchesi Antinori</a><a href="#">Torres</a><a href="#">Dr. Loosen</a><a href="#">Catena Zapata</a><a href="#">Penfolds</a>
-                </article>
-                <article class="menu-column">
-                  <p class="section-title">Форматы</p>
-                  <div class="popular-list"><a href="#">Семейные хозяйства</a><a href="#">Grand Cru</a><a href="#">Органика</a><a href="#">Эксклюзив DP Trade</a></div>
-                </article>
-              </div>
-            </section>
-          </div>
-          <a href="#">Поставки</a>
-          <a href="#">Новости</a>
-          <a href="ui-kit.html">UI-kit</a>
-        </nav>
-      </header>
-
-      <main>
-        <section class="hero">
-          <div class="container hero-copy">
-            <p class="eyebrow">DP Trade</p>
-            <h1>Премиальный каталог вина для торговли</h1>
-            <p>Регионы, производители, партии и коммерческие условия собраны в одном интерфейсе для быстрых закупочных решений.</p>
-            <div class="hero-actions">
-              <a class="button button--primary" href="catalog.html">Смотреть каталог</a>
-              <a class="button button--secondary" href="ui-kit.html">Открыть UI-kit</a>
-            </div>
-          </div>
-        </section>
-
-        <section class="section type-lab-section">
-          <div class="container">
-            <div class="section-heading section-heading--split">
-              <div>
-                <p class="eyebrow">Typography direction</p>
-                <h2>5 вариантов типографики</h2>
-              </div>
-              <p>
-                Выбранное направление — Premium Retail: сильная витрина, крупные уверенные заголовки
-                и читаемый интерфейс для каталога.
-              </p>
-            </div>
-
-            <div class="type-options type-options--five">
-              <article class="type-card type-card--editorial">
-                <div class="type-card__meta">
-                  <span>Option 01</span>
-                  <strong>Editorial Wine</strong>
-                </div>
-                <h3>Редкие вина для профессиональной торговли</h3>
-                <p>
-                  Cormorant Garamond для крупных заголовков и Manrope для интерфейса. Больше премиальности,
-                  культурного контекста и ощущения curated selection.
-                </p>
-                <div class="type-usage">
-                  <strong>Где использовать</strong>
-                  <span>Имиджевые hero, истории производителей, региональные editorial-блоки.</span>
-                </div>
-                <div class="type-scale">
-                  <span>H1 72/78</span>
-                  <span>Body 16/25</span>
-                  <span>Label 12/16</span>
-                </div>
-              </article>
-
-              <article class="type-card type-card--neo">
-                <div class="type-card__meta">
-                  <span>Option 02</span>
-                  <strong>Neo Trade</strong>
-                </div>
-                <h3>Каталог, который работает как торговый инструмент</h3>
-                <p>
-                  Manrope везде: современно, ровно, технологично. Хорошо подойдет, если сайт должен читаться
-                  как быстрый B2B-продукт.
-                </p>
-                <div class="type-usage">
-                  <strong>Где использовать</strong>
-                  <span>Личный кабинет, таблицы, фильтры, B2B-операции и плотные интерфейсы.</span>
-                </div>
-                <div class="type-scale">
-                  <span>H1 64/70</span>
-                  <span>Body 16/24</span>
-                  <span>Label 12/16</span>
-                </div>
-              </article>
-
-              <article class="type-card type-card--classic">
-                <div class="type-card__meta">
-                  <span>Option 03</span>
-                  <strong>Modern Classic</strong>
-                </div>
-                <h3>Вино, регионы и производители в ясной системе</h3>
-                <p>
-                  Playfair Display + Inter. Более классический premium retail, но с аккуратной цифровой
-                  читаемостью в карточках, фильтрах и таблицах.
-                </p>
-                <div class="type-usage">
-                  <strong>Где использовать</strong>
-                  <span>Промо-разделы, подборки, страницы брендов и спокойные premium-лендинги.</span>
-                </div>
-                <div class="type-scale">
-                  <span>H1 68/74</span>
-                  <span>Body 16/24</span>
-                  <span>Label 12/16</span>
-                </div>
-              </article>
-
-              <article class="type-card type-card--retail is-selected">
-                <div class="type-card__meta">
-                  <span>Option 04</span>
-                  <strong>Выбрано</strong>
-                </div>
-                <h3>Сильная витрина с акцентом на выбор</h3>
-                <p>
-                  Montserrat для заголовков и Inter для текста. Более собранный, коммерческий, уверенный
-                  вариант для каталога с большим количеством позиций.
-                </p>
-                <div class="type-usage">
-                  <strong>Где использовать</strong>
-                  <span>Главная, навигация, карточки, шаблоны страниц и основные marketing-блоки.</span>
-                </div>
-                <div class="type-scale">
-                  <span>H1 60/66</span>
-                  <span>Body 16/24</span>
-                  <span>Label 12/16</span>
-                </div>
-              </article>
-
-              <article class="type-card type-card--compact is-selected-soft">
-                <div class="type-card__meta">
-                  <span>Option 05</span>
-                  <strong>Compact Retail</strong>
-                </div>
-                <h3>Компактный каталог для быстрого выбора</h3>
-                <p>
-                  Montserrat + Inter, но с меньшим scale: заголовки спокойнее, карточки плотнее,
-                  больше товаров помещается в первый экран.
-                </p>
-                <div class="type-usage">
-                  <strong>Где использовать</strong>
-                  <span>Каталог, выдача поиска, фильтрованные списки и страницы с высокой плотностью товаров.</span>
-                </div>
-                <div class="type-scale">
-                  <span>H1 48/54</span>
-                  <span>Body 15/22</span>
-                  <span>Label 11/14</span>
-                </div>
-              </article>
-            </div>
-          </div>
-        </section>
-
-        <section class="section">
-          <div class="container">
-            <div class="section-heading">
-              <p class="eyebrow">Recommendations</p>
-              <h2>Рекомендации недели</h2>
-            </div>
-            <div class="product-grid">
-              <article class="product-card">
-                <div class="product-media"><span class="bottle"></span></div>
-                <div><span class="muted-caps">Bordeaux</span><h3>Chateau Laroque Grand Cru</h3><p>France · Red dry · 2019 · 0.75 L</p></div>
-                <div class="product-footer"><strong>3 890 ₽</strong><a class="button button--primary button--sm" href="product.html">Подробнее</a></div>
-              </article>
-              <article class="product-card">
-                <div class="product-media product-media--amber"><span class="bottle"></span></div>
-                <div><span class="muted-caps">Tuscany</span><h3>Brunello di Montalcino</h3><p>Italy · Red dry · 2018 · 0.75 L</p></div>
-                <div class="product-footer"><strong>4 240 ₽</strong><a class="button button--primary button--sm" href="product.html">Подробнее</a></div>
-              </article>
-              <article class="product-card">
-                <div class="product-media product-media--green"><span class="bottle"></span></div>
-                <div><span class="muted-caps">Mosel</span><h3>Riesling Kabinett</h3><p>Germany · White · 2021 · 0.75 L</p></div>
-                <div class="product-footer"><strong>2 150 ₽</strong><a class="button button--primary button--sm" href="product.html">Подробнее</a></div>
-              </article>
-            </div>
-          </div>
-        </section>
-      </main>
-
-      <footer class="site-footer">
-        <div class="container footer-container">
-          <section class="footer-main">
-            <div class="footer-left">
-              <div><a class="footer-brand" href="index.html" aria-label="DP Trade"><span>DP</span>.Trade</a><p class="footer-brand-subtitle">Территория качественного вина</p></div>
-              <div><span class="section-title">Мы в соцсетях</span><div class="social-links"><a href="#" aria-label="Telegram">TG</a><a href="#" aria-label="VK">VK</a></div></div>
-              <article class="contacts-card"><h2>Контакты</h2><a class="contact-link contact-phone" href="tel:+74959379460">+7 (495) 937-94-60</a><a class="contact-link" href="mailto:dptr@dp-trade.ru">dptr@dp-trade.ru</a><a class="button button--primary button--sm" href="#">Связаться с менеджером</a></article>
-            </div>
-            <section class="footer-nav" aria-label="Навигация по разделам">
-              <article class="nav-group"><h2>Каталог</h2><ul><li><a href="catalog.html">Вина по регионам</a></li><li><a href="#">Франция</a></li><li><a href="#">Италия</a></li><li><a href="#">Испания</a></li><li><a href="#">Новинки</a></li></ul></article>
-              <article class="nav-group"><h2>Клиентам</h2><ul><li><a href="#">Доставка</a></li><li><a href="#">Оплата</a></li><li><a href="#">Как купить</a></li><li><a href="#">Скачать каталог</a></li></ul></article>
-              <article class="nav-group"><h2>Компания</h2><ul><li><a href="#">О компании</a></li><li><a href="#">Контакты</a></li><li><a href="#">Склады</a></li><li><a href="#">Реквизиты</a></li></ul></article>
-              <section class="footer-legal" aria-label="Правовая информация"><p>Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления. Дистанционная продажа алкогольной продукции не осуществляется. <a href="#">Подробнее о правовой информации</a></p><p>© 2026 DP-Trade</p></section>
-            </section>
-          </section>
-        </div>
-      </footer>
-    </div>
-  </body>
-</html>

package.json

@@ -0,0 +1,13 @@
+{
+  "name": "dp-trade-ui-kit",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "eleventy --serve",
+    "build": "eleventy"
+  },
+  "devDependencies": {
+    "@11ty/eleventy": "^3.0.0"
+  },
+  "type": "module"
+}

src/_includes/layouts/base.njk

@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{ title }}</title>
+    <script>
+      (function () {
+        try {
+          var v = localStorage.getItem('dp-design-version') || 'v1';
+          document.documentElement.setAttribute('data-design-version', v);
+        } catch (e) {
+          document.documentElement.setAttribute('data-design-version', 'v1');
+        }
+      })();
+    </script>
+<link rel="stylesheet" href="css/{{ css | default('site') }}.css" />
+<link rel="stylesheet" href="css/v2.css" />
+    <!-- Privacy-friendly analytics by Plausible -->
+    <script async src="https://metrika.in20.ru/js/pa-LKQHOT3En5k9NYpn80cYX.js"></script>
+    <script>
+      window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
+      plausible.init()
+    </script>
+  </head>
+  <body{% if bodyClass %} class="{{ bodyClass }}"{% endif %}>
+    {{ content | safe }}
+    <script src="js/inspector.js"></script>
+    <script src="js/design-switcher.js" defer></script>
+  </body>
+</html>

src/_includes/layouts/default.njk

@@ -0,0 +1,8 @@
+---
+layout: layouts/base
+---
+<div class="site-shell">
+  {% include "partials/header.njk" %}
+  {{ content | safe }}
+  {% include "partials/footer.njk" %}
+</div>

src/_includes/layouts/ui-kit.njk

@@ -0,0 +1,5 @@
+---
+layout: layouts/base
+css: ui-kit
+---
+{{ content | safe }}

src/_includes/partials/footer.njk

@@ -0,0 +1,73 @@
+<footer class="site-footer">
+  <div class="container footer-container">
+    <section class="footer-main">
+      <div class="footer-brand-block">
+        <a class="footer-brand" href="index.html" aria-label="DP Trade">
+          <img src="assets/images/logo-dp-trade.png" alt="DP Trade" width="156" height="33" />
+        </a>
+        <p class="footer-brand-subtitle">Территория качественного вина</p>
+      </div>
+
+      <section class="footer-nav" aria-label="Навигация по разделам">
+        <article class="nav-group">
+          <h2>Каталог</h2>
+          <ul>
+            <li><a href="catalog.html">Вина по регионам</a></li>
+            <li><a href="#">Франция</a></li>
+            <li><a href="#">Италия</a></li>
+            <li><a href="#">Испания</a></li>
+            <li><a href="#">Новинки</a></li>
+          </ul>
+        </article>
+
+        <article class="nav-group">
+          <h2>Клиентам</h2>
+          <ul>
+            <li><a href="#">Доставка</a></li>
+            <li><a href="#">Оплата</a></li>
+            <li><a href="#">Как купить</a></li>
+            <li><a href="#">Скачать каталог</a></li>
+          </ul>
+        </article>
+
+        <article class="nav-group">
+          <h2>Компания</h2>
+          <ul>
+            <li><a href="about.html">О компании</a></li>
+            <li><a href="contacts.html">Контакты</a></li>
+            <li><a href="contacts-auth.html">Контакты auth</a></li>
+            <li><a href="#">Склады</a></li>
+            <li><a href="#">Реквизиты</a></li>
+          </ul>
+        </article>
+      </section>
+
+      <article class="contacts-card">
+        <h2>Контакты</h2>
+        <a class="contact-link contact-phone" href="tel:+74959379460">+7 (495) 937-94-60</a>
+        <a class="contact-link" href="mailto:dptr@dp-trade.ru">dptr@dp-trade.ru</a>
+        <div class="social-links" aria-label="Социальные сети">
+          <a href="#" aria-label="Telegram">
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M21 4 3 11.2l6.3 2.2L18 7.7l-6.8 7.1.2 5.2 3-3.3 4.7 3.5L21 4Z" />
+            </svg>
+          </a>
+          <a href="#" aria-label="VK">
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M4 7h3l2 4.2c.5 1.1 1 1.6 1.3 1.6.2 0 .4-.3.4-1V7h3v3.7c0 .4.2.6.5.6.6 0 1.8-1.6 2.6-4.3H20c-.7 3-1.8 4.8-3 5.7 1.2.8 2.4 2.2 3.2 4.3h-3.4c-.8-1.5-1.8-2.7-2.5-2.7-.4 0-.6.3-.6.8V17h-1.5C8.8 17 6.2 13.9 4 7Z" />
+            </svg>
+          </a>
+        </div>
+      </article>
+
+      <section class="footer-legal" aria-label="Правовая информация">
+        <p>
+          Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления.
+          Дистанционная продажа алкогольной продукции не осуществляется.
+          <a href="#">Подробнее о правовой информации</a>
+        </p>
+        <p>© 2026 DP-Trade</p>
+      </section>
+    </section>
+  </div>
+</footer>

src/_includes/partials/header.njk

@@ -0,0 +1,348 @@
+<header class="site-header">
+  <div class="container header-top">
+    <a class="brand-logo" href="index.html" aria-label="DP Trade">
+      <img src="assets/images/logo-dp-trade.png" alt="DP Trade" width="156" height="33">
+    </a>
+
+    <form class="search-bar" action="#" role="search">
+      <button type="submit" aria-label="Поиск">⌕</button>
+      <input type="search" placeholder="Поиск по вину, региону, производителю" aria-label="Поиск">
+    </form>
+
+    <div class="header-actions">
+      <a class="phone-link" href="tel:+74959379460">+7 (495) 937-94-60</a>
+      <a class="header-icon header-icon--air" href="#" aria-label="Аккаунт">
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M12 12.2a4.1 4.1 0 1 0 0-8.2 4.1 4.1 0 0 0 0 8.2Z" />
+          <path d="M4.8 20.2c1.1-3.3 3.6-5 7.2-5s6.1 1.7 7.2 5" />
+        </svg>
+      </a>
+      <a class="header-icon header-icon--air" href="#" aria-label="Корзина">
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M5 6h2l1.4 9.2h8.5L19 8H8" />
+          <path d="M9.4 19.2h.1M16.8 19.2h.1" />
+        </svg>
+      </a>
+    </div>
+  </div>
+
+  <nav class="container main-nav" aria-label="Основная навигация">
+    <a href="catalog.html">Каталог</a>
+
+    <div class="nav-item">
+      <button class="nav-trigger" type="button" aria-expanded="false">Регион <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
+
+      <section class="mega-menu" aria-label="Регион">
+        <div class="mega-intro">
+          <div>
+            <p class="eyebrow">Регион</p>
+            <h2>Вина по географии</h2>
+          </div>
+          <p>Быстрый вход в каталог через страну, апелласьон или популярный регион.</p>
+        </div>
+
+        <div class="menu-grid">
+          <article class="menu-column visual-column">
+            <img src="assets/images/vineyard-hills.jpg" alt="Виноградник на холмах">
+            <p>Выбирайте через знакомую страну или сразу через регион, если точно знаете, что ищете.</p>
+          </article>
+
+          <article class="menu-column">
+            <p class="section-title">Страны</p>
+            <a href="#">Старый Свет</a>
+            <a href="#">Франция</a>
+            <a href="#">Италия</a>
+            <a href="#">Испания</a>
+            <a href="#">Германия</a>
+            <a href="#">Новый Свет</a>
+            <a href="#">Чили</a>
+            <a href="#">Аргентина</a>
+          </article>
+
+          <article class="menu-column appellations">
+            <p class="section-title">Апелласьоны</p>
+            <div class="appellation-group">
+              <a class="country-link" href="#">Франция</a>
+              <a href="#">Bordeaux</a>
+              <a href="#">Medoc</a>
+              <a href="#">Margaux</a>
+              <a href="#">Pauillac</a>
+              <a href="#">Saint-Emilion</a>
+            </div>
+            <div class="appellation-group">
+              <a class="country-link" href="#">Италия</a>
+              <a href="#">Toscana</a>
+              <a href="#">Chianti</a>
+              <a href="#">Brunello di Montalcino</a>
+              <a href="#">Piemonte</a>
+            </div>
+          </article>
+
+          <article class="menu-column popular-column">
+            <p class="section-title">Популярные регионы</p>
+            <div class="popular-list">
+              <a href="#">Бордо</a>
+              <a href="#">Тоскана</a>
+              <a href="#">Пьемонт</a>
+              <a href="#">Риоха</a>
+              <a href="#">Напа Вэлли</a>
+            </div>
+          </article>
+        </div>
+      </section>
+    </div>
+
+    <div class="nav-item">
+      <button class="nav-trigger" type="button" aria-expanded="false">Вино <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
+
+      <section class="mega-menu" aria-label="Вино">
+        <div class="mega-intro">
+          <div>
+            <p class="eyebrow">Вино</p>
+            <h2>Каталог по типу и стилю</h2>
+          </div>
+          <p>Быстрый выбор вина по цвету, категории и уровню сладости.</p>
+        </div>
+
+        <div class="menu-grid">
+          <article class="menu-column visual-column">
+            <img src="assets/images/wine-glasses.jpg" alt="Бокалы вина">
+            <p>Начните с типа вина или сразу переходите к стилю, если знаете нужный профиль.</p>
+          </article>
+
+          <article class="menu-column">
+            <p class="section-title">По типу</p>
+            <a href="#">Красное</a>
+            <a href="#">Белое</a>
+            <a href="#">Розовое</a>
+            <a href="#">Игристое</a>
+            <a href="#">Шампанское</a>
+          </article>
+
+          <article class="menu-column">
+            <p class="section-title">По стилю</p>
+            <a href="#">Сухие</a>
+            <a href="#">Полусухие</a>
+            <a href="#">Полусладкие</a>
+            <a href="#">Сладкие</a>
+            <a href="#">Брют</a>
+            <a href="#">Экстра брют</a>
+          </article>
+
+          <article class="menu-column popular-column">
+            <p class="section-title">Популярное</p>
+            <div class="popular-list">
+              <a href="#">Новинки</a>
+              <a href="#">Хиты продаж</a>
+              <a href="#">Для ресторанов</a>
+              <a href="#">Премиум подборка</a>
+            </div>
+          </article>
+        </div>
+      </section>
+    </div>
+
+    <div class="nav-item">
+      <button class="nav-trigger" type="button" aria-expanded="false">Крепкий алкоголь <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
+
+      <section class="mega-menu" aria-label="Крепкий алкоголь">
+        <div class="mega-intro">
+          <div>
+            <p class="eyebrow">Spirits</p>
+            <h2>Крепкий алкоголь</h2>
+          </div>
+          <p>Подборка крепких напитков для баров, ресторанов и специализированной розницы.</p>
+        </div>
+
+        <div class="menu-grid">
+          <article class="menu-column visual-column">
+            <img src="assets/images/spirits-glass.jpg" alt="Крепкий алкоголь в бокале">
+            <p>Категории, выдержка и происхождение для быстрой навигации по ассортименту.</p>
+          </article>
+
+          <article class="menu-column">
+            <p class="section-title">Категории</p>
+            <a href="#">Виски</a>
+            <a href="#">Коньяк</a>
+            <a href="#">Арманьяк</a>
+            <a href="#">Ром</a>
+            <a href="#">Джин</a>
+            <a href="#">Водка</a>
+            <a href="#">Текила</a>
+            <a href="#">Ликеры</a>
+          </article>
+
+          <article class="menu-column">
+            <p class="section-title">По стилю</p>
+            <a href="#">Односолодовый</a>
+            <a href="#">Купажированный</a>
+            <a href="#">Выдержанный</a>
+            <a href="#">Пряный</a>
+            <a href="#">Дижестив</a>
+            <a href="#">Для коктейлей</a>
+          </article>
+
+          <article class="menu-column popular-column">
+            <p class="section-title">Популярное</p>
+            <div class="popular-list">
+              <a href="#">Single Malt</a>
+              <a href="#">Cognac VSOP</a>
+              <a href="#">Premium Gin</a>
+              <a href="#">Bar Selection</a>
+            </div>
+          </article>
+        </div>
+      </section>
+    </div>
+
+    <div class="nav-item">
+      <button class="nav-trigger" type="button" aria-expanded="false">Производители <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
+
+      <section class="mega-menu" aria-label="Производители">
+        <div class="mega-intro">
+          <div>
+            <p class="eyebrow">Производители</p>
+            <h2>Дома, хозяйства и бренды</h2>
+          </div>
+          <p>Навигация по ключевым производителям, регионам и партнерским брендам DP Trade.</p>
+        </div>
+
+        <div class="menu-grid">
+          <article class="menu-column visual-column">
+            <img src="assets/images/winery-barrels.jpg" alt="Винодельня и бочки">
+            <p>Откройте ассортимент через знакомые хозяйства, винные дома и регионы производства.</p>
+          </article>
+
+          <article class="menu-column">
+            <p class="section-title">По странам</p>
+            <a href="#">Франция</a>
+            <a href="#">Италия</a>
+            <a href="#">Испания</a>
+            <a href="#">Германия</a>
+            <a href="#">Португалия</a>
+            <a href="#">Чили</a>
+            <a href="#">Аргентина</a>
+          </article>
+
+          <article class="menu-column">
+            <p class="section-title">Избранные</p>
+            <a href="#">Chateau Laroque</a>
+            <a href="#">Marchesi Antinori</a>
+            <a href="#">Torres</a>
+            <a href="#">Dr. Loosen</a>
+            <a href="#">Catena Zapata</a>
+            <a href="#">Penfolds</a>
+          </article>
+
+          <article class="menu-column popular-column">
+            <p class="section-title">Форматы</p>
+            <div class="popular-list">
+              <a href="#">Семейные хозяйства</a>
+              <a href="#">Grand Cru</a>
+              <a href="#">Органика</a>
+              <a href="#">Эксклюзив DP Trade</a>
+            </div>
+          </article>
+        </div>
+      </section>
+    </div>
+    <a href="#">Поставки</a>
+    <div class="nav-item">
+      <button class="nav-trigger" type="button" aria-expanded="false">О компании <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
+
+      <section class="mega-menu" aria-label="О компании">
+        <div class="mega-intro">
+          <div>
+            <p class="eyebrow">DP Trade</p>
+            <h2>О компании и контакты</h2>
+          </div>
+          <p>Истории, статьи и прямые контакты для клиентов и партнёров.</p>
+        </div>
+
+        <div class="menu-grid">
+          <article class="menu-column visual-column">
+            <img src="assets/images/winery-barrels.jpg" alt="Винные бочки в погребе">
+            <p>Команда DP Trade работает с вином как с живым продуктом — от поставки до клиента.</p>
+          </article>
+
+          <article class="menu-column">
+            <p class="section-title">Компания</p>
+            <a href="about.html">О нас</a>
+            <a href="contacts.html">Контакты</a>
+            <a href="contacts-auth.html">Контакты для партнёров</a>
+          </article>
+
+          <article class="menu-column">
+            <p class="section-title">Новости и статьи</p>
+            <a href="news-villa-raiano.html">Villa Raiano — классика</a>
+            <a href="news-villa-raiano-v2.html">Villa Raiano — editorial</a>
+            <a href="article-guidelines.html">Редакционный гайд</a>
+          </article>
+
+          <article class="menu-column popular-column">
+            <p class="section-title">Быстрые ссылки</p>
+            <div class="popular-list">
+              <a href="#">Склады и логистика</a>
+              <a href="#">Реквизиты</a>
+              <a href="#">Карьера</a>
+              <a href="#">Пресса</a>
+            </div>
+          </article>
+        </div>
+      </section>
+    </div>
+    <div class="nav-item">
+      <button class="nav-trigger" type="button" aria-expanded="false">UI-kit <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
+      <section class="mega-menu" aria-label="UI-kit">
+        <div class="mega-intro">
+          <div>
+            <p class="eyebrow">Design system</p>
+            <h2>UI-kit и демо-страницы</h2>
+          </div>
+          <p>Быстрый доступ к живым страницам, компонентам, паттернам и токенам для разработки.</p>
+        </div>
+        <div class="menu-grid">
+          <article class="menu-column visual-column">
+            <img src="assets/images/wine-glasses.jpg" alt="Демонстрация винного каталога" />
+            <p>Все демо-страницы собраны в одном месте для проверки header, footer, карточек и каталожных сценариев.</p>
+          </article>
+          <article class="menu-column">
+            <p class="section-title">Demo pages</p>
+            <a href="index.html">Главная</a>
+            <a href="catalog.html">Каталог</a>
+            <a href="product.html">Карточка товара</a>
+            <a href="bottle-cards.html">Варианты карточек</a>
+            <a href="product-card-white.html">Карточка на белом</a>
+            <a href="news-villa-raiano.html">Новость</a>
+            <a href="news-villa-raiano-v2.html">Новость v2</a>
+            <a href="article-guidelines.html">Ред. гайд</a>
+            <a href="about.html">О компании</a>
+            <a href="contacts.html">Контакты</a>
+            <a href="contacts-auth.html">Контакты auth</a>
+          </article>
+          <article class="menu-column">
+            <p class="section-title">UI-kit sections</p>
+            <a href="ui-kit.html#foundations">Foundations</a>
+            <a href="ui-kit.html#components">Components</a>
+            <a href="ui-kit.html#patterns">Patterns</a>
+            <a href="ui-kit.html#templates">Templates</a>
+            <a href="ui-kit.html#screens">Screens</a>
+          </article>
+          <article class="menu-column">
+            <p class="section-title">Dev handoff</p>
+            <div class="popular-list">
+              <a href="ui-kit.html#tokens">Tokens</a>
+              <a href="ui-kit.html#components">States</a>
+              <a href="ui-kit.html#patterns">Layouts</a>
+              <a href="ui-kit.html">Full UI-kit</a>
+            </div>
+          </article>
+        </div>
+      </section>
+    </div>
+    <div class="design-toggle design-toggle--nav" role="group" aria-label="Версия дизайна">
+      <button type="button" class="design-toggle__btn" data-version="v1">V1</button>
+      <button type="button" class="design-toggle__btn" data-version="v2">V2</button>
+    </div>
+  </nav>
+</header>

src/about.njk

@@ -0,0 +1,46 @@
+---
+title: "DP Trade — О компании"
+layout: layouts/default
+permalink: /about.html
+bodyClass: compact-type
+---
+<main class="content-page">
+  <section class="page-hero page-hero--about">
+    <div class="container page-hero__inner">
+      <div>
+        <p class="eyebrow">О компании</p>
+        <h1>DP Trade — территория качественного вина</h1>
+        <p>Импорт, каталог, персональная работа с клиентами, собственные склады в регионах и доставка собственным транспортом.</p>
+      </div>
+      <aside class="page-hero__meta" aria-label="Кратко о компании">
+        <span>Since 1991</span>
+        <strong>Premium wine trade</strong>
+        <p>Портфель винных домов для ресторанов, розницы и профессиональных закупок.</p>
+      </aside>
+    </div>
+  </section>
+
+  <section class="section">
+    <div class="container about-grid">
+      <article class="article-body">
+        <p class="lead">DP Trade развивает профессиональный винный каталог, где регионы, производители, партии и коммерческие условия собраны в едином интерфейсе для быстрых закупочных решений.</p>
+        <p>Главная ценность сервиса — соединить сильный ассортимент с понятной навигацией: от страны и апелласьона до конкретного производителя, винтажа и карточки товара.</p>
+        <h2>Как устроен подход</h2>
+        <p>Компания делает акцент на удобном каталоге, персональном отношении, собственных складских возможностях и доставке собственным транспортом. Для B2B-клиентов это значит меньше ручных уточнений и быстрее путь от выбора до заказа.</p>
+      </article>
+      <div class="feature-grid feature-grid--about">
+        <article class="feature-card"><span>01</span><h3>Удобный каталог</h3><p>Фильтры по типу, региону, производителю, сорту, году, объему и стилю.</p></article>
+        <article class="feature-card"><span>02</span><h3>Персональный подход</h3><p>Быстрая коммуникация с менеджером и подборки под формат клиента.</p></article>
+        <article class="feature-card"><span>03</span><h3>Склады в регионах</h3><p>Инфраструктура для регулярных поставок и управления доступностью.</p></article>
+        <article class="feature-card"><span>04</span><h3>Собственная доставка</h3><p>Контроль логистики и аккуратная работа с профессиональными заказами.</p></article>
+      </div>
+    </div>
+  </section>
+
+  <section class="section muted-section">
+    <div class="container section-heading section-heading--split">
+      <div><p class="eyebrow">Portfolio</p><h2>Винные дома и регионы</h2></div>
+      <p>Страница показывает, как может выглядеть корпоративный раздел: спокойная подача, крупные тезисы и блок преимуществ без перегруза.</p>
+    </div>
+  </section>
+</main>

src/article-guidelines.njk

@@ -0,0 +1,112 @@
+---
+title: "DP Trade — Article Guidelines"
+layout: layouts/default
+permalink: /article-guidelines.html
+bodyClass: compact-type
+---
+<main class="content-page guidelines-page">
+  <section class="page-hero page-hero--guidelines">
+    <div class="container page-hero__inner">
+      <div>
+        <p class="eyebrow">Editorial guidelines</p>
+        <h1>Рекомендации по статьям DP Trade</h1>
+        <p>Требования к структуре материала, заголовкам, тексту и фотографиям для новостей, историй производителей и экспертных заметок.</p>
+      </div>
+      <aside class="page-hero__meta">
+        <span>Для редакции</span>
+        <strong>Article system</strong>
+        <p>Единые правила помогают статьям выглядеть как часть продукта, а не как случайные публикации.</p>
+      </aside>
+    </div>
+  </section>
+
+  <section class="section">
+    <div class="container guideline-grid">
+      <article class="guideline-card guideline-card--lead">
+        <span>01</span>
+        <h2>Структура статьи</h2>
+        <p>Каждый материал должен быстро отвечать на три вопроса: о ком/о чём статья, почему это важно для аудитории DP Trade и какое действие читатель может сделать дальше.</p>
+        <ul>
+          <li>Заголовок: конкретный, с именем производителя, региона или события.</li>
+          <li>Лид: 1-2 предложения, раскрывает главный повод.</li>
+          <li>Основной текст: 3-5 смысловых блоков с подзаголовками или визуальными паузами.</li>
+          <li>Финал: вывод, рекомендация, ссылка в каталог или повод обратиться к менеджеру.</li>
+        </ul>
+      </article>
+      <article class="guideline-card">
+        <span>02</span>
+        <h2>Заголовки</h2>
+        <p>Заголовок должен быть редакционным, но полезным: не только красивым, а ещё и объясняющим тему.</p>
+        <ul>
+          <li>Оптимально: 55-90 символов.</li>
+          <li>Использовать имена: Villa Raiano, Gaja, Bordeaux, Fiano.</li>
+          <li>Избегать пустых формул: «уникальная история», «легендарное событие» без факта.</li>
+          <li>Подзаголовки должны вести читателя по смыслу, а не повторять заголовок.</li>
+        </ul>
+      </article>
+      <article class="guideline-card">
+        <span>03</span>
+        <h2>Текст</h2>
+        <p>Стиль: профессиональный, спокойный, без рекламного нажима. Пишем для закупщиков, сомелье, ресторанов и розницы.</p>
+        <ul>
+          <li>Абзац: 350-650 знаков.</li>
+          <li>Лид: до 280 знаков.</li>
+          <li>Новость: 3 000-5 500 знаков.</li>
+          <li>История производителя: 5 000-8 000 знаков.</li>
+          <li>Цифры, годы, награды и сорта проверять отдельно.</li>
+        </ul>
+      </article>
+      <article class="guideline-card">
+        <span>04</span>
+        <h2>Фотографии</h2>
+        <p>Фотографии должны показывать реальный продукт, место, людей или процесс. Лучше меньше декоративности и больше конкретики.</p>
+        <ul>
+          <li>Hero: горизонтальное фото от 1600px по ширине.</li>
+          <li>Внутренние фото: от 1200px, без сильной компрессии.</li>
+          <li>Для карточек: предмет или бутылка должны быть читаемы на мобильном.</li>
+          <li>Не использовать тёмные, размытые, случайно обрезанные изображения.</li>
+          <li>Обязательно писать alt: кто/что изображено и где.</li>
+        </ul>
+      </article>
+      <article class="guideline-card">
+        <span>05</span>
+        <h2>Композиция</h2>
+        <p>Для длинной статьи нужны визуальные паузы: крупное фото после лида, цитата или факт-блок в середине и финальный акцент.</p>
+        <ul>
+          <li>Не ставить подряд больше 4 текстовых абзацев без паузы.</li>
+          <li>Цитаты использовать только если они усиливают материал.</li>
+          <li>Сайдбар может содержать факты: страна, регион, сорт, год, награда.</li>
+          <li>Финальный CTA должен быть связан с каталогом или менеджером.</li>
+        </ul>
+      </article>
+      <article class="guideline-card">
+        <span>06</span>
+        <h2>SEO и handoff</h2>
+        <p>Материал должен быть понятен поиску и разработке: один H1, последовательные H2, корректные alt и прозрачная структура блоков.</p>
+        <ul>
+          <li>Title: до 60 символов, включает бренд или тему.</li>
+          <li>Description: 140-160 символов.</li>
+          <li>URL: латиница, короткий slug.</li>
+          <li>Изображения называть по смыслу, а не `photo-final-2`.</li>
+          <li>В CMS хранить дату, автора/раздел, теги и связанные товары.</li>
+        </ul>
+      </article>
+    </div>
+  </section>
+
+  <section class="section muted-section">
+    <div class="container guideline-checklist">
+      <div>
+        <p class="eyebrow">Pre-publish checklist</p>
+        <h2>Проверка перед публикацией</h2>
+      </div>
+      <ul>
+        <li>Заголовок отражает конкретный повод и не звучит как реклама.</li>
+        <li>В лиде понятна ценность материала для профессиональной аудитории.</li>
+        <li>Все годы, имена, апелласьоны и награды проверены.</li>
+        <li>Есть минимум 2-4 качественные фотографии с alt-текстами.</li>
+        <li>Финал ведёт к каталогу, производителю, товару или контакту с менеджером.</li>
+      </ul>
+    </div>
+  </section>
+</main>

src/bottle-cards.njk

@@ -0,0 +1,232 @@
+---
+title: "DP Trade — Bottle Card Variants"
+layout: layouts/default
+permalink: /bottle-cards.html
+bodyClass: compact-type
+---
+<main class="section card-lab-section">
+  <div class="container">
+    <div class="card-lab-head">
+                <div>
+                  <p class="eyebrow">UI-kit / Product cards</p>
+        <h1>Варианты карточек бутылок</h1>
+      </div>
+      <p>Отдельная витрина для выбора направления карточки: крупные плитки, компактные версии и горизонтальный формат для B2B-каталога.</p>
+    </div>
+
+    <section class="card-variant-block" aria-labelledby="cards-grid-title">
+      <div class="card-variant-title">
+        <p class="eyebrow">Variant 01</p>
+        <h2 id="cards-grid-title">Акцентные карточки каталога</h2>
+      </div>
+      <div class="bottle-card-grid">
+        <article class="bottle-card bottle-card--bordeaux">
+          <div class="bottle-card__media">
+            <img class="bottle-card__photo" src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" />
+          </div>
+          <div class="bottle-card__body">
+            <p class="bottle-card__region">Bordeaux</p>
+            <h3>Chateau Laroque Grand Cru</h3>
+            <p>France · Red dry · 2019 · 0.75 L</p>
+          </div>
+          <div class="bottle-card__footer">
+            <strong>3 890 ₽</strong>
+            <a class="button button--primary button--sm" href="product.html">Подробнее</a>
+          </div>
+        </article>
+
+        <article class="bottle-card bottle-card--tuscany">
+          <div class="bottle-card__media">
+            <img class="bottle-card__photo" src="assets/images/00080768_1.png" alt="Brunello di Montalcino" />
+          </div>
+          <div class="bottle-card__body">
+            <p class="bottle-card__region">Tuscany</p>
+            <h3>Brunello di Montalcino</h3>
+            <p>Italy · Red dry · 2018 · 0.75 L</p>
+          </div>
+          <div class="bottle-card__footer">
+            <strong>4 240 ₽</strong>
+            <a class="button button--primary button--sm" href="product.html">Подробнее</a>
+          </div>
+        </article>
+
+        <article class="bottle-card bottle-card--mosel">
+          <div class="bottle-card__media">
+            <img class="bottle-card__photo" src="assets/images/00081726_1.png" alt="Riesling Kabinett" />
+          </div>
+          <div class="bottle-card__body">
+            <p class="bottle-card__region">Mosel</p>
+            <h3>Riesling Kabinett</h3>
+            <p>Germany · White · 2021 · 0.75 L</p>
+          </div>
+          <div class="bottle-card__footer">
+            <strong>2 150 ₽</strong>
+            <a class="button button--primary button--sm" href="product.html">Подробнее</a>
+          </div>
+        </article>
+      </div>
+    </section>
+
+    <section class="card-variant-block" aria-labelledby="cards-alt-title">
+      <div class="card-variant-title">
+        <p class="eyebrow">Variant 02-04</p>
+        <h2 id="cards-alt-title">Альтернативные форматы</h2>
+      </div>
+      <div class="bottle-card-mix">
+        <article class="bottle-card bottle-card--clean">
+          <div class="bottle-card__media">
+            <img class="bottle-card__photo" src="assets/images/00081538_1.png" alt="Oremus Case of Aszu" />
+          </div>
+          <div class="bottle-card__body">
+            <p class="bottle-card__region">Clean retail</p>
+            <h3>Oremus Case of Aszu 5 Puttonyos</h3>
+            <p>Hungary · White sweet · 2000 · 0.5 L</p>
+          </div>
+          <div class="bottle-card__footer">
+            <strong>19 240 ₽</strong>
+            <a class="button button--secondary button--sm" href="product.html">В избранное</a>
+          </div>
+        </article>
+
+        <article class="bottle-card bottle-card--compact">
+          <div class="bottle-card__media">
+            <img class="bottle-card__photo" src="assets/images/00080768_1.png" alt="Oremus Tokaji Aszu" />
+          </div>
+          <div class="bottle-card__body">
+            <p class="bottle-card__region">Compact</p>
+            <h3>Tokaji Aszu 5 Puttonyos</h3>
+            <p>Hungary · 12% · Furmint, Harslevelu</p>
+          </div>
+          <div class="bottle-card__footer">
+            <strong>19 240 ₽</strong>
+            <a class="button button--primary button--sm" href="product.html">Подробнее</a>
+          </div>
+        </article>
+
+        <article class="bottle-card bottle-card--horizontal">
+          <div class="bottle-card__media">
+            <img class="bottle-card__photo" src="assets/images/00081726_1.png" alt="Oremus Tokaji Late Harvest" />
+          </div>
+          <div class="bottle-card__content">
+            <div class="bottle-card__body">
+              <p class="bottle-card__region">B2B row card</p>
+              <h3>Oremus Tokaji Late Harvest</h3>
+              <p>Вино белое полусладкое · Венгрия · 11.5%</p>
+              <p class="bottle-card__details">Сорт: Фурминт, Зета, Харшлевелю</p>
+            </div>
+            <div class="bottle-card__footer">
+              <strong>4 980 ₽</strong>
+              <a class="button button--secondary button--sm" href="product.html">В избранное</a>
+            </div>
+          </div>
+        </article>
+      </div>
+    </section>
+
+    <section class="card-variant-block" aria-labelledby="catalog-card-title">
+      <div class="card-variant-title">
+        <p class="eyebrow">Catalog current</p>
+        <h2 id="catalog-card-title">Варианты текущей карточки каталога</h2>
+      </div>
+      <div class="catalog-card-variants">
+        <article class="catalog-card-sample">
+          <p class="catalog-card-sample__label">Default / как в каталоге</p>
+          <div class="product-card product-card--list">
+            <a class="product-image" href="product.html" aria-label="Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000">
+              <img src="assets/images/00081538_1.png" alt="Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000" />
+            </a>
+            <div class="product-info">
+              <h3>Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000</h3>
+              <p class="product-origin">Вино белое, Oremus, Венгрия</p>
+              <p>Вино Белое Сладкое<br />12 %</p>
+              <p>Сорт: Фурминт (70%), Харшлевелю (28%), Мускат (2%)</p>
+            </div>
+            <div class="product-buy">
+              <strong>19 240 ₽</strong>
+              <a class="button button--secondary" href="#">В избранное</a>
+            </div>
+          </div>
+        </article>
+
+        <article class="catalog-card-sample">
+          <p class="catalog-card-sample__label">Compact / меньше высота</p>
+          <div class="product-card product-card--list product-card--list-compact">
+            <a class="product-image" href="product.html" aria-label="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000">
+              <img src="assets/images/00080768_1.png" alt="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000" />
+            </a>
+            <div class="product-info">
+              <h3>Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000</h3>
+              <p class="product-origin">Вино белое, Oremus, Венгрия</p>
+              <p>Сладкое · 12% · Фурминт, Харшлевелю, Мускат</p>
+            </div>
+            <div class="product-buy">
+              <strong>19 240 ₽</strong>
+              <a class="button button--secondary" href="#">В избранное</a>
+            </div>
+          </div>
+        </article>
+
+        <article class="catalog-card-sample">
+          <p class="catalog-card-sample__label">Hover / активная строка</p>
+          <div class="product-card product-card--list product-card--list-hover">
+            <a class="product-image" href="product.html" aria-label="Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021">
+              <img src="assets/images/00081726_1.png" alt="Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021" />
+            </a>
+            <div class="product-info">
+              <h3>Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021</h3>
+              <p class="product-origin">Вино белое, Oremus, Венгрия</p>
+              <p>Вино Белое Полусладкое<br />11.5 %</p>
+              <p>Сорт: Фурминт, Зета, Харшлевелю</p>
+            </div>
+            <div class="product-buy">
+              <strong>4 980 ₽</strong>
+              <a class="button button--primary" href="#">Подробнее</a>
+            </div>
+          </div>
+        </article>
+
+        <article class="catalog-card-sample">
+          <p class="catalog-card-sample__label">Color image / цветной фон фото</p>
+          <div class="product-card product-card--list product-card--list-color">
+            <a class="product-image product-image--gold" href="product.html" aria-label="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000">
+              <img src="assets/images/00080768_1.png" alt="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000" />
+            </a>
+            <div class="product-info">
+              <h3>Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000</h3>
+              <p class="product-origin">Вино белое, Oremus, Венгрия</p>
+              <p>Вино Белое Сладкое<br />12 %</p>
+              <p>Сорт: Фурминт (70%), Харшлевелю (28%), Мускат (2%)</p>
+            </div>
+            <div class="product-buy">
+              <strong>19 240 ₽</strong>
+              <a class="button button--secondary" href="#">В избранное</a>
+            </div>
+          </div>
+        </article>
+
+        <article class="catalog-card-sample">
+          <p class="catalog-card-sample__label">B2B dense / больше данных</p>
+          <div class="product-card product-card--list product-card--list-b2b">
+            <a class="product-image" href="product.html" aria-label="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000">
+              <img src="assets/images/00081538_1.png" alt="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000" />
+            </a>
+            <div class="product-info">
+              <h3>Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000</h3>
+              <p class="product-origin">Венгрия · Tokaj · Oremus · 0.5 л · 12%</p>
+              <div class="product-params">
+                <span>Тип: белое сладкое</span>
+                <span>Сорт: Фурминт 70%</span>
+                <span>Упаковка: 6 шт.</span>
+                <span>Артикул: 00073820</span>
+              </div>
+            </div>
+            <div class="product-buy">
+              <strong>19 240 ₽</strong>
+              <a class="button button--secondary" href="#">В избранное</a>
+            </div>
+          </div>
+        </article>
+      </div>
+    </section>
+  </div>
+</main>

src/catalog.njk

@@ -0,0 +1,80 @@
+---
+title: "DP Trade — Catalog"
+layout: layouts/default
+permalink: /catalog.html
+bodyClass: compact-type
+---
+<main class="section catalog-section">
+      <div class="container">
+        <div class="catalog-head">
+          <div>
+            <p class="eyebrow">Catalog / Country</p>
+            <h1>Венгрия</h1>
+          </div>
+          <div class="catalog-actions" aria-label="Действия каталога">
+            <span>Всего найдено: 22</span>
+            <a class="button button--secondary" href="#">Все в избранное</a>
+            <a class="button button--secondary" href="#">Очистить избранное</a>
+          </div>
+        </div>
+
+        <div class="catalog-toolbar">
+          <span>Всего найдено: 22</span>
+          <select class="input catalog-sort" aria-label="Сортировка">
+            <option>Исходная сортировка</option>
+            <option>По цене</option>
+            <option>По названию</option>
+          </select>
+        </div>
+
+        <section class="product-list" aria-label="Список товаров">
+          <article class="product-card product-card--list">
+            <a class="product-image" href="product.html" aria-label="Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000">
+              <img src="assets/images/00081538_1.png" alt="Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000" />
+            </a>
+            <div class="product-info">
+              <h3>Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000</h3>
+              <p class="product-origin">Вино белое, Oremus, Венгрия</p>
+              <p>Вино Белое Сладкое<br />12 %</p>
+              <p>Сорт: Фурминт (70%), Харшлевелю (28%), Мускат (2%)</p>
+            </div>
+            <div class="product-buy">
+              <strong>19 240 ₽</strong>
+              <a class="button button--secondary" href="#">В избранное</a>
+            </div>
+          </article>
+
+          <article class="product-card product-card--list">
+            <a class="product-image" href="product.html" aria-label="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000">
+              <img src="assets/images/00080768_1.png" alt="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000" />
+            </a>
+            <div class="product-info">
+              <h3>Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000</h3>
+              <p class="product-origin">Вино белое, Oremus, Венгрия</p>
+              <p>Вино Белое Сладкое<br />12 %</p>
+              <p>Сорт: Фурминт (70%), Харшлевелю (28%), Мускат (2%)</p>
+            </div>
+            <div class="product-buy">
+              <strong>19 240 ₽</strong>
+              <a class="button button--secondary" href="#">В избранное</a>
+            </div>
+          </article>
+
+          <article class="product-card product-card--list">
+            <a class="product-image" href="product.html" aria-label="Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021">
+              <img src="assets/images/00081726_1.png" alt="Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021" />
+            </a>
+            <div class="product-info">
+              <h3>Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021</h3>
+              <p class="product-origin">Вино белое, Oremus, Венгрия</p>
+              <p>Вино Белое Полусладкое<br />11.5 %</p>
+              <p>Сорт: Фурминт, Зета, Харшлевелю</p>
+            </div>
+            <div class="product-buy">
+              <strong>4 980 ₽</strong>
+              <a class="button button--secondary" href="#">В избранное</a>
+            </div>
+          </article>
+        </section>
+      </div>
+    </main>

src/contacts-auth.njk

@@ -0,0 +1,61 @@
+---
+title: "DP Trade — Контакты / Auth Gate"
+layout: layouts/default
+permalink: /contacts-auth.html
+bodyClass: compact-type
+---
+<main class="content-page contacts-auth-page">
+  <section class="page-hero page-hero--contacts">
+    <div class="container page-hero__inner">
+      <div>
+        <p class="eyebrow">Контакты</p>
+        <h1>Связаться с DP Trade</h1>
+        <p>Контакты открыты для всех, но заявка менеджеру доступна только зарегистрированным или залогиненным пользователям.</p>
+      </div>
+      <aside class="page-hero__meta" aria-label="Основные контакты">
+        <span>Sales office</span>
+        <strong>+7 (495) 937-94-60</strong>
+        <p>dptr@dp-trade.ru</p>
+      </aside>
+    </div>
+  </section>
+
+  <section class="section">
+    <div class="container contacts-layout">
+      <div class="contact-stack">
+        <article class="contact-panel">
+          <span>Телефон</span>
+          <a href="tel:+74959379460">+7 (495) 937-94-60</a>
+          <p>Для консультаций по ассортименту, поставкам и условиям сотрудничества.</p>
+        </article>
+        <article class="contact-panel">
+          <span>Email</span>
+          <a href="mailto:dptr@dp-trade.ru">dptr@dp-trade.ru</a>
+          <p>Удобно для запросов прайса, карточек производителей и B2B-документов.</p>
+        </article>
+        <article class="contact-panel">
+          <span>Юридическая информация</span>
+          <p>Интернет-витрина размещает информацию об алкогольной продукции исключительно в ознакомительных целях. Дистанционная продажа алкогольной продукции не осуществляется.</p>
+        </article>
+      </div>
+<section class="contact-form contact-auth-gate" aria-labelledby="auth-gate-title">
+  <div class="auth-gate__badge">Требуется аккаунт</div>
+  <h2 id="auth-gate-title">Заявка доступна после входа</h2>
+  <p>Мы показываем телефон и email открыто, но форму заявки менеджеру оставляем внутри личного кабинета: так менеджер сразу видит компанию, историю запросов и коммерческий статус клиента.</p>
+  <div class="auth-gate__actions">
+    <a class="button button--primary" href="#">Войти</a>
+    <a class="button button--secondary" href="#">Зарегистрироваться</a>
+  </div>
+  <div class="auth-gate__note">
+    <strong>После входа откроется:</strong>
+    <span>форма заявки, автозаполнение контактов, привязка к компании и история обращений.</span>
+  </div>
+  <div class="locked-form-preview" aria-label="Предпросмотр заблокированной формы">
+    <label>Имя<input class="input" type="text" placeholder="Как к вам обращаться" disabled /></label>
+    <label>Телефон или email<input class="input" type="text" placeholder="Контакт для ответа" disabled /></label>
+    <label>Сообщение<textarea class="input" rows="4" placeholder="Напишите, что нужно подобрать" disabled></textarea></label>
+  </div>
+</section>
+    </div>
+  </section>
+</main>

src/contacts.njk

@@ -0,0 +1,50 @@
+---
+title: "DP Trade — Контакты"
+layout: layouts/default
+permalink: /contacts.html
+bodyClass: compact-type
+---
+<main class="content-page">
+  <section class="page-hero page-hero--contacts">
+    <div class="container page-hero__inner">
+      <div>
+        <p class="eyebrow">Контакты</p>
+        <h1>Связаться с DP Trade</h1>
+        <p>Для вопросов по каталогу, ассортименту, поставкам и работе с менеджером используйте телефон, почту или форму заявки.</p>
+      </div>
+      <aside class="page-hero__meta" aria-label="Основные контакты">
+        <span>Sales office</span>
+        <strong>+7 (495) 937-94-60</strong>
+        <p>dptr@dp-trade.ru</p>
+      </aside>
+    </div>
+  </section>
+
+  <section class="section">
+    <div class="container contacts-layout">
+      <div class="contact-stack">
+        <article class="contact-panel">
+          <span>Телефон</span>
+          <a href="tel:+74959379460">+7 (495) 937-94-60</a>
+          <p>Для консультаций по ассортименту, поставкам и условиям сотрудничества.</p>
+        </article>
+        <article class="contact-panel">
+          <span>Email</span>
+          <a href="mailto:dptr@dp-trade.ru">dptr@dp-trade.ru</a>
+          <p>Удобно для запросов прайса, карточек производителей и B2B-документов.</p>
+        </article>
+        <article class="contact-panel">
+          <span>Юридическая информация</span>
+          <p>Интернет-витрина размещает информацию об алкогольной продукции исключительно в ознакомительных целях. Дистанционная продажа алкогольной продукции не осуществляется.</p>
+        </article>
+      </div>
+      <form class="contact-form" action="#">
+        <h2>Заявка менеджеру</h2>
+        <label>Имя<input class="input" type="text" placeholder="Как к вам обращаться" /></label>
+        <label>Телефон или email<input class="input" type="text" placeholder="Контакт для ответа" /></label>
+        <label>Сообщение<textarea class="input" rows="5" placeholder="Напишите, что нужно подобрать"></textarea></label>
+        <button class="button button--primary" type="submit">Отправить заявку</button>
+      </form>
+    </div>
+  </section>
+</main>

src/css/tokens.css

@@ -0,0 +1,701 @@
+/* full family */
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/CormorantGaramond-Regular.woff2') format('woff2');
+}
+/* full family */
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/CormorantGaramond-Medium.woff2') format('woff2');
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/cormorant-garamond-600-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/cormorant-garamond-600-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/cormorant-garamond-600-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/cormorant-garamond-600-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/cormorant-garamond-600-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/cormorant-garamond-600-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/cormorant-garamond-600-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/cormorant-garamond-600-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/inter-400-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/inter-400-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/inter-400-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/inter-400-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/inter-400-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/inter-400-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/inter-400-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/inter-400-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/inter-400-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/inter-400-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/inter-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/inter-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2213, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/inter-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/inter-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/inter-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/manrope-400-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/manrope-400-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/manrope-400-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/manrope-400-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/manrope-400-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/manrope-400-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/manrope-400-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/manrope-400-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/manrope-400-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/manrope-400-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/manrope-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/manrope-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/manrope-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/manrope-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/manrope-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/manrope-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/manrope-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/manrope-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/manrope-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/manrope-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('../fonts/montserrat-500-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/playfair-display-600-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/playfair-display-600-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/playfair-display-600-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/playfair-display-600-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/playfair-display-600-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/playfair-display-600-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+:root {
+  --color-primary-wine-100: #4b0f24;
+  --color-primary-wine-80: #6d1c36;
+  --color-neutral-black: #161616;
+  --color-neutral-gray-700: #30343a;
+  --color-neutral-gray-600: #66605f;
+  --color-neutral-gray-300: #d9dee6;
+  --color-background-base: #f4f6f9;
+  --color-surface: #ffffff;
+  --color-surface-warm: #F5F0E8;
+  --color-accent-gold: #b9965b;
+  --color-accent-blue: #1f3476;
+
+  --font-heading: "Montserrat", "Inter", Arial, sans-serif;
+  --font-body: "Inter", Arial, sans-serif;
+  --font-heading-classic: "Playfair Display", Georgia, serif;
+  --font-body-classic: "Inter", Arial, sans-serif;
+  --font-heading-retail: "Montserrat", "Inter", Arial, sans-serif;
+
+  --spacing-4: 4px;
+  --spacing-8: 8px;
+  --spacing-16: 16px;
+  --spacing-24: 24px;
+  --spacing-32: 32px;
+  --spacing-48: 48px;
+  --spacing-64: 64px;
+
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 24px;
+
+  --shadow-soft: 0 12px 32px rgba(22, 22, 22, 0.08);
+  --shadow-lift: 0 20px 52px rgba(75, 15, 36, 0.14);
+  --container: 1240px;
+}
+
+/* ── V2 design version (design audit followup) ───────────────────────── */
+:root[data-design-version="v2"] {
+  --color-primary-wine-100: #7D021D;
+  --color-primary-wine-80: #9b1a33;
+  --color-background-base: #FFFDFA;
+  --color-surface: #ffffff;
+  --color-surface-warm: #F5F0E8;
+  --color-accent-blue: #7D021D;
+
+  --font-heading: "Cormorant Garamond", Georgia, serif;
+  --font-body: "Manrope", "Inter", Arial, sans-serif;
+  --font-heading-retail: "Cormorant Garamond", Georgia, serif;
+
+  --radius-sm: 4px;
+  --radius-md: 8px;
+
+  --shadow-lift: 0 20px 52px rgba(125, 2, 29, 0.12);
+}

src/css/v2.css

@@ -0,0 +1,613 @@
+/* =========================================================================
+   DP Trade — V2 overrides (design audit followup)
+   Activates when <html data-design-version="v2">. V1 stays untouched.
+   ========================================================================= */
+
+/* ── Design toggle (visible in both versions) ─────────────────────────── */
+.design-toggle {
+  display: inline-flex;
+  padding: 2px;
+  border: 1px solid rgba(22, 22, 22, 0.18);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.6);
+  gap: 2px;
+}
+.design-toggle__btn {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  padding: 6px 14px;
+  border-radius: 999px;
+  font: 600 12px/1 var(--font-body);
+  letter-spacing: 0.06em;
+  color: var(--color-neutral-gray-700);
+  cursor: pointer;
+}
+.design-toggle__btn.is-active {
+  background: var(--color-primary-wine-100);
+  color: #fff;
+}
+.design-toggle--nav {
+  margin-left: auto;
+  align-self: center;
+  flex-shrink: 0;
+}
+.design-toggle--uikit {
+  margin: 16px 24px 0;
+  align-self: flex-start;
+}
+
+/* V2-only DOM nodes hidden under V1 */
+[data-design-version="v1"] [data-v2-only] { display: none !important; }
+[data-design-version="v2"] [data-v2-hide] { display: none !important; }
+
+/* Breadcrumbs */
+.breadcrumbs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding-top: 24px;
+  padding-bottom: 8px;
+  font-size: 13px;
+  color: var(--color-neutral-gray-600);
+}
+.breadcrumbs a {
+  color: var(--color-neutral-gray-600);
+  text-decoration: none;
+}
+.breadcrumbs a:hover { color: var(--color-primary-wine-100); }
+.breadcrumbs [aria-current="page"] { color: var(--color-neutral-black); }
+
+/* Form success */
+.form-success {
+  margin-top: 12px;
+  padding: 14px 16px;
+  border-radius: var(--radius-sm);
+  background: #F5F0E8;
+  color: var(--color-primary-wine-100);
+  font-weight: 500;
+}
+
+/* =========================================================================
+   V2 SCOPE — everything below only applies when data-design-version="v2"
+   ========================================================================= */
+
+/* ── Global typography ────────────────────────────────────────────────── */
+[data-design-version="v2"] body {
+  font-family: var(--font-body);
+  background: var(--color-background-base);
+}
+
+[data-design-version="v2"] h1,
+[data-design-version="v2"] h2,
+[data-design-version="v2"] h3,
+[data-design-version="v2"] h4 {
+  font-family: var(--font-heading);
+  text-transform: none !important;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+[data-design-version="v2"] .brand-logo,
+[data-design-version="v2"] .brand-logo span:first-child {
+  text-transform: none;
+}
+[data-design-version="v2"] .brand-logo small { font-size: 12px; }
+
+[data-design-version="v2"] .phone-link {
+  color: var(--color-primary-wine-100);
+  font-weight: 500;
+}
+
+/* ── Header ───────────────────────────────────────────────────────────── */
+[data-design-version="v2"] .site-header {
+  background: rgba(255, 253, 250, 0.94);
+  border-bottom-color: rgba(125, 2, 29, 0.12);
+  box-shadow: 0 10px 28px rgba(125, 2, 29, 0.06);
+}
+
+[data-design-version="v2"] .search-bar {
+  background: #ffffff;
+  border-color: rgba(125, 2, 29, 0.16);
+  box-shadow: none;
+}
+
+[data-design-version="v2"] .search-bar:focus-within {
+  border-color: rgba(125, 2, 29, 0.42);
+  box-shadow: 0 0 0 3px rgba(125, 2, 29, 0.08);
+}
+
+[data-design-version="v2"] .search-bar input {
+  background: transparent;
+  color: var(--color-neutral-black);
+}
+
+[data-design-version="v2"] .search-bar input::placeholder {
+  color: rgba(102, 96, 95, 0.72);
+}
+
+/* ── Hero (home) ──────────────────────────────────────────────────────── */
+[data-design-version="v2"] .hero h1 {
+  font-family: var(--font-heading);
+  font-size: clamp(48px, 6vw, 80px);
+  font-weight: 400;
+  text-transform: none !important;
+  letter-spacing: 0;
+  line-height: 1.05;
+}
+
+[data-design-version="v2"] .section-heading h2 {
+  font-size: clamp(28px, 3.4vw, 44px);
+  font-weight: 400;
+  text-transform: uppercase !important;
+  letter-spacing: 0;
+  line-height: 1.04;
+}
+
+/* ── Product card (grid) ──────────────────────────────────────────────── */
+[data-design-version="v2"] .product-card {
+  background: var(--color-surface-warm);
+  border-color: rgba(22, 22, 22, 0.08);
+}
+
+[data-design-version="v2"] .product-media,
+[data-design-version="v2"] .product-media--amber,
+[data-design-version="v2"] .product-media--green {
+  background: #ffffff !important;
+}
+
+[data-design-version="v2"] .product-card h3 {
+  font-family: var(--font-heading);
+  font-size: 22px;
+  font-weight: 400;
+  text-transform: none !important;
+  letter-spacing: 0;
+  line-height: 1.12;
+}
+
+[data-design-version="v2"] .product-footer {
+  padding-top: 14px;
+  border-top: 1px solid rgba(22, 22, 22, 0.08);
+  flex-direction: column;
+  align-items: stretch;
+  gap: 10px;
+}
+[data-design-version="v2"] .product-footer strong {
+  font-family: var(--font-body);
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--color-primary-wine-100);
+}
+[data-design-version="v2"] .product-footer .button,
+[data-design-version="v2"] .product-card .button--primary {
+  background: transparent;
+  color: var(--color-primary-wine-100);
+  border: 1px solid var(--color-primary-wine-100);
+  box-shadow: none;
+  width: 100%;
+  justify-content: center;
+  font-weight: 500;
+}
+[data-design-version="v2"] .product-footer .button:hover,
+[data-design-version="v2"] .product-card .button--primary:hover {
+  background: var(--color-primary-wine-100);
+  color: #fff;
+}
+
+/* Compact grid on home */
+[data-design-version="v2"] .product-grid--compact .product-card h3 {
+  font-size: 17px;
+}
+
+/* List cards (catalog) — same typography refresh */
+[data-design-version="v2"] .product-card--list h3 {
+  font-family: var(--font-heading);
+  text-transform: none !important;
+  letter-spacing: 0;
+  font-weight: 400;
+}
+
+/* ── Catalog head ─────────────────────────────────────────────────────── */
+[data-design-version="v2"] .catalog-head h1 {
+  font-family: var(--font-heading);
+  font-weight: 400;
+  text-transform: none !important;
+  letter-spacing: 0;
+}
+
+/* ── Mega menu ────────────────────────────────────────────────────────── */
+[data-design-version="v2"] .mega-menu {
+  text-align: left;
+}
+
+[data-design-version="v2"] .mega-intro {
+  align-items: start;
+}
+
+[data-design-version="v2"] .mega-intro h2 {
+  font-size: 22px;
+  font-weight: 400;
+  text-transform: none !important;
+  letter-spacing: 0;
+  font-family: var(--font-heading);
+  line-height: 1.08;
+}
+
+[data-design-version="v2"] .menu-grid {
+  grid-template-columns: minmax(160px, 0.72fr) minmax(140px, 0.72fr) minmax(280px, 1.35fr) minmax(180px, 0.9fr);
+  align-items: start;
+}
+
+[data-design-version="v2"] .menu-column {
+  align-items: flex-start;
+  text-align: left;
+}
+
+[data-design-version="v2"] .menu-column a {
+  font-weight: 400;
+}
+
+[data-design-version="v2"] .visual-column img {
+  max-width: 160px;
+  max-height: 100px;
+  width: 160px;
+  height: 100px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+[data-design-version="v2"] .country-link {
+  color: var(--color-primary-wine-100);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+[data-design-version="v2"] .appellation-group a:not(.country-link) {
+  padding-left: 12px;
+  font-size: 14px;
+  text-transform: none;
+  font-weight: 400;
+}
+
+[data-design-version="v2"] .popular-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-start;
+}
+[data-design-version="v2"] .popular-list a {
+  min-width: 120px;
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 8px 14px;
+  border: 1px solid rgba(125, 2, 29, 0.14);
+  border-radius: 4px;
+  background: rgba(255, 253, 250, 0.72);
+  text-transform: none;
+  letter-spacing: 0;
+  font-weight: 400;
+  text-align: left;
+}
+
+/* Producer cards */
+[data-design-version="v2"] .producer-card strong,
+[data-design-version="v2"] .news-card h3 {
+  font-family: var(--font-heading);
+  font-weight: 400;
+  text-transform: none !important;
+  letter-spacing: 0;
+}
+[data-design-version="v2"] .news-section { background: var(--color-surface-warm); }
+
+/* ── Page hero (about / contacts / guidelines) ────────────────────────── */
+[data-design-version="v2"] .page-hero h1 {
+  font-family: var(--font-heading);
+  font-weight: 400;
+  text-transform: none !important;
+  letter-spacing: 0;
+  line-height: 1.08;
+}
+
+[data-design-version="v2"] .page-hero--about h1 {
+  font-size: clamp(40px, 4vw, 56px);
+}
+
+[data-design-version="v2"] .page-hero--contacts {
+  padding: 48px 0 24px;
+  background-image: none;
+  background: var(--color-background-base);
+  color: var(--color-neutral-black);
+}
+[data-design-version="v2"] .page-hero--contacts h1 {
+  font-size: clamp(32px, 3.4vw, 48px);
+  color: var(--color-neutral-black);
+}
+[data-design-version="v2"] .page-hero--contacts p {
+  color: var(--color-neutral-gray-700);
+  font-size: 16px;
+}
+[data-design-version="v2"] .page-hero--contacts .page-hero__meta {
+  box-shadow: none;
+  background: var(--color-surface-warm);
+}
+[data-design-version="v2"] .page-hero__meta strong {
+  font-family: var(--font-body);
+  font-size: 18px;
+  font-weight: 600;
+  text-transform: none !important;
+  letter-spacing: 0;
+  color: var(--color-primary-wine-100);
+}
+
+/* ── About / article ──────────────────────────────────────────────────── */
+[data-design-version="v2"] .article-body { max-width: 640px; }
+
+[data-design-version="v2"] .article-body h2 {
+  font-family: var(--font-heading);
+  font-size: clamp(22px, 2.4vw, 28px);
+  font-weight: 400;
+  text-transform: none !important;
+  letter-spacing: 0;
+}
+
+[data-design-version="v2"] .article-body .lead {
+  font-family: var(--font-heading);
+  font-weight: 400;
+}
+
+[data-design-version="v2"] .article-body blockquote {
+  border-left: 1px solid rgba(22, 22, 22, 0.2);
+  background: transparent;
+  font-family: var(--font-heading);
+  font-style: italic;
+  font-weight: 400;
+  color: var(--color-neutral-black);
+}
+
+[data-design-version="v2"] .feature-card {
+  min-height: 0;
+  align-content: start;
+  gap: 8px;
+}
+[data-design-version="v2"] .feature-card h3 {
+  font-family: var(--font-heading);
+  font-size: 20px;
+  text-transform: none !important;
+  letter-spacing: 0;
+  font-weight: 400;
+}
+
+[data-design-version="v2"] .muted-section,
+[data-design-version="v2"] .info-card--accent {
+  background: var(--color-surface-warm);
+}
+
+/* ── Contacts ─────────────────────────────────────────────────────────── */
+[data-design-version="v2"] .contact-panel a {
+  font-family: var(--font-body);
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: 0;
+  color: var(--color-primary-wine-100);
+}
+
+/* Move legal block to bottom of stack */
+[data-design-version="v2"] .contact-stack {
+  display: flex;
+  flex-direction: column;
+}
+[data-design-version="v2"] .contact-panel:has(> span:only-of-type) {
+  /* no-op fallback; target by text below if :has unsupported */
+}
+[data-design-version="v2"] .contact-stack .contact-panel:last-child {
+  order: 99;
+  font-size: 13px;
+  background: transparent;
+  box-shadow: none;
+  border-color: rgba(22, 22, 22, 0.08);
+  padding: 16px 20px;
+}
+[data-design-version="v2"] .contact-stack .contact-panel:last-child span {
+  color: var(--color-neutral-gray-600);
+  font-weight: 500;
+}
+
+/* Contact form */
+[data-design-version="v2"] .contact-form h2 {
+  font-family: var(--font-heading);
+  font-size: 24px;
+  font-weight: 400;
+  text-transform: none !important;
+  letter-spacing: 0;
+}
+[data-design-version="v2"] .contact-form label {
+  font-weight: 400;
+  color: var(--color-neutral-gray-700);
+}
+
+/* ── Footer ───────────────────────────────────────────────────────────── */
+[data-design-version="v2"] .contacts-card h2,
+[data-design-version="v2"] .nav-group h2 {
+  font-family: var(--font-heading);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.2;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+[data-design-version="v2"] .nav-group a,
+[data-design-version="v2"] .contact-link,
+[data-design-version="v2"] .footer-legal {
+  font-family: var(--font-body);
+}
+
+[data-design-version="v2"] .contact-phone {
+  color: var(--color-primary-wine-100);
+  font-weight: 600;
+}
+
+/* ── Buttons (global) ─────────────────────────────────────────────────── */
+[data-design-version="v2"] .button--primary {
+  background: var(--color-primary-wine-100);
+  border-color: var(--color-primary-wine-100);
+  text-transform: none;
+  letter-spacing: 0;
+}
+[data-design-version="v2"] .button--secondary {
+  background: var(--color-surface-warm);
+  color: var(--color-primary-wine-100);
+  border-color: transparent;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+/* ── Product detail page ──────────────────────────────────────────────── */
+[data-design-version="v2"] .detail-copy h1 {
+  font-family: var(--font-heading);
+  font-size: clamp(36px, 4vw, 56px);
+  font-weight: 400;
+  text-transform: none !important;
+  letter-spacing: 0;
+}
+[data-design-version="v2"] .detail-copy > p:not(.eyebrow) {
+  max-width: 66ch;
+}
+[data-design-version="v2"] .detail-copy .hero-actions { margin-top: 16px; }
+
+/* Remove cool background conflicts */
+[data-design-version="v2"] .news-section,
+[data-design-version="v2"] .section--muted {
+  background: var(--color-surface-warm);
+}
+
+/* ── White-background product card variants ─────────────────────────────
+   For bottle images with white/transparent backgrounds. Work under both
+   V1 and V2; typography inherits from the active version.                */
+
+.product-card[class*="--white"] {
+  background: #ffffff;
+  border: 1px solid rgba(22, 22, 22, 0.08);
+  box-shadow: none;
+}
+.product-card[class*="--white"] .product-media {
+  background: #ffffff !important;
+  min-height: 240px;
+}
+.product-card[class*="--white"] .product-photo {
+  max-height: 220px;
+  object-fit: contain;
+}
+
+/* Variant A — pure white, minimal outline */
+.product-card--white-pure {
+  padding: 20px;
+}
+
+/* Variant B — elevated: white on warm page with soft shadow */
+.product-card--white-elevated {
+  border-color: transparent;
+  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.04), 0 12px 32px rgba(22, 22, 22, 0.06);
+  padding: 20px;
+}
+
+/* Variant C — hairline gold divider between media and body */
+.product-card--white-hairline .product-media {
+  border-bottom: 1px solid var(--color-accent-gold, #b9965b);
+  padding-bottom: 12px;
+  margin-bottom: 4px;
+}
+
+/* Variant D — thin burgundy frame around the media */
+.product-card--white-framed .product-media {
+  border: 1px solid rgba(125, 2, 29, 0.18);
+  border-radius: 2px;
+}
+
+/* Variant E — split: white media, warm beige body */
+.product-card--white-split {
+  padding: 0;
+  overflow: hidden;
+}
+.product-card--white-split .product-media {
+  border-radius: 0;
+}
+.product-card--white-split .product-meta,
+.product-card--white-split .product-footer {
+  padding-left: 20px;
+  padding-right: 20px;
+  background: #F5F0E8;
+}
+.product-card--white-split .product-meta { padding-top: 16px; }
+.product-card--white-split .product-footer { padding-bottom: 20px; }
+
+/* Wide (catalog) variants — apply to .product-card--list */
+.product-card--list[class*="--white"] {
+  background: #ffffff;
+  border: 1px solid rgba(22, 22, 22, 0.08);
+  box-shadow: none;
+}
+.product-card--list[class*="--white"] .product-image {
+  background: #ffffff;
+}
+
+/* Wide A — outline only, all white */
+.product-card--list.product-card--white-wide {
+  /* base already applied above */
+}
+
+/* Wide B — white image, warm info column */
+.product-card--list.product-card--white-wide-split {
+  padding: 0;
+  overflow: hidden;
+  background: #F5F0E8;
+}
+.product-card--list.product-card--white-wide-split .product-image {
+  background: #ffffff;
+  align-self: stretch;
+  padding: 20px;
+  border-right: 1px solid rgba(22, 22, 22, 0.06);
+  max-height: none;
+  min-height: 100%;
+  height: 100%;
+}
+.product-card--list.product-card--white-wide-split .product-info,
+.product-card--list.product-card--white-wide-split .product-buy {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+.product-card--list.product-card--white-wide-split .product-buy {
+  padding-right: 20px;
+}
+
+/* Wide C — white throughout with gold vertical hairline before info */
+.product-card--list.product-card--white-wide-hairline .product-image {
+  border-right: 1px solid var(--color-accent-gold, #b9965b);
+  padding-right: 20px;
+}
+
+/* Showcase page layout */
+.card-whitebg-section { background: var(--color-background-base); }
+.card-whitebg-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 24px;
+}
+.card-whitebg-block { margin-top: 48px; }
+.card-whitebg-block h2 {
+  font-size: 22px;
+  font-weight: 500;
+  margin: 0 0 6px;
+}
+.card-whitebg-block .eyebrow { margin: 0; }
+.card-whitebg-block .variant-note {
+  color: var(--color-neutral-gray-600);
+  font-size: 14px;
+  margin: 0 0 24px;
+  max-width: 60ch;
+}