Refine menu chevrons and update dropdown content

components/menu.html

@@ -1,29 +1,44 @@
 <header class="site-header">
   <div class="container header-top">
     <a class="brand-logo" href="index.html" aria-label="DP Trade">
-      <span>DP</span> Trade
+      <img src="https://wine-dp-trade.ru/wp-content/uploads/2024/11/logo-500x107.png" alt="DP Trade" width="156" height="33">
-      <small>since 1991</small>
     </a>
 
     <form class="search-bar" action="#" role="search">
       <button type="submit" aria-label="Поиск">⌕</button>
-      <input type="search" placeholder="Найти название, марку, бренд, производителя..." aria-label="Поиск">
+      <input type="search" placeholder="Поиск по вину, региону, производителю" aria-label="Поиск">
     </form>
 
-    <a class="phone-link" href="tel:+74959379460">+7 (495) 937-94-60</a>
+    <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="#">О нас</a>
+    <a href="catalog.html">Каталог</a>
 
     <div class="nav-item">
-      <button class="nav-trigger" type="button" aria-expanded="false">Регион <span aria-hidden="true">⌄</span></button>
+      <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">
-          <p class="eyebrow">Регион</p>
+          <div>
-          <h2>Выбор вина по географии</h2>
+            <p class="eyebrow">Регион</p>
-          <p>Один экран для выбора страны, апелласьона или популярного региона без длинного дерева навигации.</p>
+            <h2>Вина по географии</h2>
+          </div>
+          <p>Быстрый вход в каталог через страну, апелласьон или популярный регион.</p>
         </div>
 
         <div class="menu-grid">
@@ -63,7 +78,7 @@
             </div>
           </article>
 
-          <article class="menu-column">
+          <article class="menu-column popular-column">
             <p class="section-title">Популярные регионы</p>
             <div class="popular-list">
               <a href="#">Бордо</a>
@@ -77,9 +92,161 @@
       </section>
     </div>
 
-    <a href="catalog.html">Вино</a>
+    <div class="nav-item">
-    <a href="#">Крепкий алкоголь</a>
+      <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>
-    <a href="#">Стиль и вкус</a>
+
+      <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 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="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 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="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 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>
     <a href="#">Новости</a>
     <a href="ui-kit.html">UI-kit</a>
   </nav>

css/site.css

@@ -50,15 +50,16 @@ select {
   z-index: 20;
   background: rgba(255, 253, 249, 0.94);
   border-bottom: 1px solid rgba(102, 96, 95, 0.18);
-  backdrop-filter: blur(16px);
+  box-shadow: 0 10px 28px rgba(22, 22, 22, 0.05);
+  backdrop-filter: blur(18px);
 }
 
 .header-top {
   display: grid;
-  grid-template-columns: 210px minmax(260px, 1fr) auto;
+  grid-template-columns: 170px minmax(260px, 1fr) auto;
   align-items: center;
-  gap: 28px;
+  gap: 20px;
-  min-height: 86px;
+  min-height: 72px;
 }
 
 .brand-logo {
@@ -67,10 +68,11 @@ select {
   width: fit-content;
   color: var(--color-accent-blue);
   font-family: var(--font-heading-retail);
-  font-size: 28px;
+  font-size: 26px;
   font-weight: 800;
   letter-spacing: 0;
   line-height: 0.9;
+  text-transform: uppercase;
 }
 
 .brand-logo span:first-child {
@@ -79,8 +81,8 @@ select {
 
 .brand-logo small {
   position: absolute;
-  left: 70px;
+  left: 54px;
-  top: 27px;
+  top: 24px;
   color: var(--color-primary-wine-80);
   font-size: 8px;
   font-weight: 700;
@@ -89,11 +91,11 @@ select {
 
 .search-bar {
   display: grid;
-  grid-template-columns: 50px minmax(0, 1fr);
+  grid-template-columns: 44px minmax(0, 1fr);
   align-items: center;
-  min-height: 52px;
+  min-height: 44px;
   border: 1px solid rgba(102, 96, 95, 0.24);
-  border-radius: 999px;
+  border-radius: var(--radius-sm);
   background: var(--color-surface);
 }
 
@@ -103,11 +105,12 @@ select {
 }
 
 .search-bar button {
-  width: 50px;
+  width: 44px;
-  height: 50px;
+  height: 42px;
   border: 0;
   background: transparent;
   color: var(--color-primary-wine-100);
+  font-size: 18px;
   cursor: pointer;
 }
 
@@ -116,22 +119,63 @@ select {
   border: 0;
   outline: 0;
   color: var(--color-neutral-black);
+  font-size: 14px;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
 .phone-link {
   color: var(--color-accent-blue);
-  font-size: 18px;
+  font-size: 15px;
-  font-weight: 700;
+  font-weight: 800;
   white-space: nowrap;
 }
 
+.header-icon {
+  width: 38px;
+  height: 38px;
+  border: 1px solid rgba(75, 15, 36, 0.14);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-primary-wine-100);
+  display: inline-grid;
+  place-items: center;
+  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
+}
+
+.header-icon:hover {
+  border-color: rgba(75, 15, 36, 0.36);
+  background: rgba(75, 15, 36, 0.06);
+  transform: translateY(-1px);
+}
+
+.header-icon svg {
+  width: 20px;
+  height: 20px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.45;
+}
+
+.header-icon--air {
+  border-color: rgba(75, 15, 36, 0.13);
+  background: transparent;
+}
+
 .main-nav {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
-  gap: 42px;
+  gap: 8px;
-  min-height: 68px;
+  min-height: 52px;
   overflow-x: auto;
+  border-top: 1px solid rgba(102, 96, 95, 0.12);
 }
 
 .main-nav > a,
@@ -139,13 +183,15 @@ select {
   display: inline-flex;
   align-items: center;
   gap: 7px;
-  min-height: 40px;
+  min-height: 34px;
+  padding: 0 2px;
   border: 0;
   border-bottom: 2px solid transparent;
+  border-radius: 0;
   background: transparent;
   color: var(--color-neutral-gray-700);
-  font-size: 14px;
+  font-size: 12px;
-  font-weight: 700;
+  font-weight: 800;
   letter-spacing: 0;
   text-transform: uppercase;
   cursor: pointer;
@@ -156,21 +202,51 @@ select {
 .nav-item:hover .nav-trigger,
 .nav-item:focus-within .nav-trigger {
   border-bottom-color: var(--color-primary-wine-100);
+  background: transparent;
   color: var(--color-primary-wine-100);
 }
 
+.nav-chevron {
+  width: 10px;
+  height: 10px;
+  display: inline-grid;
+  place-items: center;
+  line-height: 0;
+}
+
+.nav-chevron svg {
+  width: 9px;
+  height: 6px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.6;
+}
+
 .nav-item {
   position: static;
 }
 
+.nav-item::after {
+  content: "";
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 102px;
+  z-index: 19;
+  display: none;
+  height: 34px;
+}
+
 .mega-menu {
   position: absolute;
   left: 50%;
-  top: 154px;
+  top: 118px;
   width: min(1180px, calc(100vw - 40px));
-  max-height: calc(100vh - 172px);
+  max-height: calc(100vh - 142px);
   overflow: auto;
-  padding: 28px;
+  padding: 22px;
   border: 1px solid rgba(102, 96, 95, 0.18);
   background: #fffdfa;
   box-shadow: var(--shadow-lift);
@@ -178,6 +254,8 @@ select {
   display: none;
 }
 
+.nav-item:hover::after,
+.nav-item:focus-within::after,
 .nav-item:hover .mega-menu,
 .nav-item:focus-within .mega-menu {
   display: block;
@@ -185,13 +263,19 @@ select {
 
 .mega-intro {
   display: grid;
-  grid-template-columns: minmax(220px, 0.55fr) minmax(320px, 1fr);
+  grid-template-columns: minmax(220px, 0.7fr) minmax(320px, 1fr);
-  gap: 18px 34px;
+  gap: 18px 28px;
   align-items: end;
-  padding-bottom: 22px;
+  padding-bottom: 18px;
   border-bottom: 1px solid rgba(102, 96, 95, 0.18);
 }
 
+.mega-intro h2 {
+  font-size: 26px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
 .eyebrow,
 .section-title,
 .muted-caps {
@@ -219,31 +303,37 @@ select {
 
 .menu-grid {
   display: grid;
-  grid-template-columns: 1.4fr 0.9fr 1.1fr 1fr;
+  grid-template-columns: 1.05fr 0.82fr 1.25fr 0.88fr;
-  gap: 28px;
+  gap: 22px;
-  padding-top: 28px;
+  padding-top: 22px;
 }
 
 .menu-column {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
   min-width: 0;
 }
 
 .menu-column a {
   width: fit-content;
   max-width: 100%;
-  font-size: 16px;
+  color: var(--color-neutral-gray-700);
+  font-size: 14px;
+  font-weight: 600;
 }
 
 .menu-column a:hover {
   color: var(--color-primary-wine-80);
 }
 
+.visual-column {
+  gap: 12px;
+}
+
 .visual-column img {
   width: 100%;
-  aspect-ratio: 16 / 9;
+  aspect-ratio: 4 / 3;
   object-fit: cover;
   border-radius: var(--radius-sm);
 }
@@ -251,22 +341,26 @@ select {
 .visual-column p {
   margin: 0;
   color: var(--color-neutral-gray-600);
+  font-size: 13px;
+  line-height: 1.42;
 }
 
 .appellations {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 20px;
+  gap: 9px 18px;
+  align-content: start;
 }
 
 .appellations .section-title {
   grid-column: 1 / -1;
+  margin-bottom: 0;
 }
 
 .appellation-group {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 9px;
 }
 
 .country-link {
@@ -332,7 +426,7 @@ select {
 }
 
 .hero {
-  min-height: calc(100vh - 154px);
+  min-height: calc(100vh - 124px);
   display: grid;
   align-items: end;
   padding: 88px 0;
@@ -476,6 +570,26 @@ select {
   color: var(--color-neutral-gray-600);
 }
 
+.type-usage {
+  padding-top: 14px;
+  border-top: 1px solid rgba(102, 96, 95, 0.14);
+  display: grid;
+  gap: 6px;
+}
+
+.type-usage strong {
+  color: var(--color-primary-wine-100);
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.type-usage span {
+  color: var(--color-neutral-gray-600);
+  font-size: 13px;
+  line-height: 1.42;
+}
+
 .type-scale {
   display: flex;
   flex-wrap: wrap;
@@ -901,8 +1015,16 @@ select {
     grid-template-columns: 1fr;
   }
 
+  .header-top {
+    padding: 16px 0;
+  }
+
+  .header-actions {
+    justify-content: space-between;
+  }
+
   .phone-link {
-    display: none;
+    font-size: 14px;
   }
 
   .main-nav {
@@ -920,7 +1042,12 @@ select {
   }
 
   .mega-menu {
-    top: 206px;
+    top: 172px;
+  }
+
+  .nav-item::after {
+    top: 150px;
+    height: 34px;
   }
 }
 
@@ -931,16 +1058,31 @@ select {
 
   .header-top {
     gap: 14px;
-    padding: 18px 0;
+    padding: 16px 0;
+  }
+
+  .header-actions {
+    align-items: center;
+    flex-direction: row;
+    gap: 10px;
+  }
+
+  .phone-link {
+    display: none;
   }
 
   .main-nav {
-    min-height: 58px;
+    min-height: 54px;
   }
 
   .mega-menu {
-    top: 204px;
+    top: 184px;
-    padding: 20px;
+    padding: 18px;
+  }
+
+  .nav-item::after {
+    top: 160px;
+    height: 34px;
   }
 
   .mega-intro,

index.html

@@ -13,22 +13,40 @@
     <div class="site-shell">
       <header class="site-header">
         <div class="container header-top">
-          <a class="brand-logo" href="index.html" aria-label="DP Trade"><span>DP</span> Trade<small>since 1991</small></a>
+          <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="Поиск" />
+            <input type="search" placeholder="Поиск по вину, региону, производителю" aria-label="Поиск" />
           </form>
-          <a class="phone-link" href="tel:+74959379460">+7 (495) 937-94-60</a>
+          <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="#">О нас</a>
+          <a href="catalog.html">Каталог</a>
           <div class="nav-item">
-            <button class="nav-trigger" type="button" aria-expanded="false">Регион <span aria-hidden="true">⌄</span></button>
+            <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">
-                <p class="eyebrow">Регион</p>
+                <div>
-                <h2>Выбор вина по географии</h2>
+                  <p class="eyebrow">Регион</p>
-                <p>Один экран для выбора страны, апелласьона или популярного региона без длинного дерева навигации.</p>
+                  <h2>Вина по географии</h2>
+                </div>
+                <p>Быстрый вход в каталог через страну, апелласьон или популярный регион.</p>
               </div>
               <div class="menu-grid">
                 <article class="menu-column visual-column">
@@ -51,9 +69,99 @@
               </div>
             </section>
           </div>
-          <a href="catalog.html">Вино</a>
+          <div class="nav-item">
-          <a href="#">Крепкий алкоголь</a>
+            <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>
-          <a href="#">Стиль и вкус</a>
+            <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>
@@ -96,6 +204,10 @@
                   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>
@@ -113,6 +225,10 @@
                   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>
@@ -130,6 +246,10 @@
                   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>
@@ -147,6 +267,10 @@
                   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>
@@ -164,6 +288,10 @@
                   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>