refactor

wp-content/themes/twentytwentyfour/assets/js/test1-landing.js

@@ -0,0 +1,343 @@
+const mobileToggle = document.getElementById('mobileToggle')
+    const mobilePanel = document.getElementById('mobilePanel')
+    const cartDrawer = document.getElementById('cartDrawer')
+    const cartOpenButton = document.getElementById('cartOpenButton')
+    const mobileCartOpenButton = document.getElementById('mobileCartOpenButton')
+    const cartCloseButton = document.getElementById('cartCloseButton')
+    const modalBackdrop = document.getElementById('orderModal')
+    const modalCloseButton = document.getElementById('modalCloseButton')
+    const viewCartButton = document.getElementById('viewCartButton')
+    const checkoutButton = document.getElementById('checkoutButton')
+    const orderButtons = document.querySelectorAll('[data-open-order]')
+    const addToCartButtons = document.querySelectorAll('.add-to-cart')
+    const faqItems = document.querySelectorAll('.faq-item')
+    const cartCount = document.getElementById('cartCount')
+    const mobileCartCount = document.getElementById('mobileCartCount')
+    const cartItemsCount = document.getElementById('cartItemsCount')
+    const cartTotal = document.getElementById('cartTotal')
+    const cartList = document.getElementById('cartList')
+    const orderForm = document.getElementById('orderForm')
+    const contactForm = document.getElementById('contactForm')
+    const orderItemsField = document.getElementById('orderItemsField')
+    const orderSuccess = document.getElementById('orderSuccess')
+    const contactSuccess = document.getElementById('contactSuccess')
+    const wooCommerceConfig = window.test1WooCommerce || null
+    const cartPageUrl = (wooCommerceConfig && wooCommerceConfig.cartUrl) ? wooCommerceConfig.cartUrl : '/cart/'
+    const checkoutPageUrl = (wooCommerceConfig && wooCommerceConfig.checkoutUrl) ? wooCommerceConfig.checkoutUrl : '/checkout/'
+    const cartPanel = cartDrawer?.querySelector('.cart-panel')
+    const modalCard = modalBackdrop?.querySelector('.modal-card')
+
+    let cart = []
+    let lastCartTrigger = null
+    let lastModalTrigger = null
+
+    const getFocusableElements = container => {
+      if (!container) {
+        return []
+      }
+
+      return Array.from(container.querySelectorAll('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'))
+        .filter(element => !element.hasAttribute('hidden') && !element.closest('[hidden]'))
+    }
+
+    const focusFirstElement = container => {
+      const [first] = getFocusableElements(container)
+
+      if (first) {
+        first.focus()
+      }
+    }
+
+    const openMobileMenu = () => {
+      mobilePanel.classList.add('active')
+      mobileToggle.setAttribute('aria-expanded', 'true')
+      document.body.classList.add('menu-open')
+    }
+
+    const closeMobileMenu = () => {
+      mobilePanel.classList.remove('active')
+      mobileToggle.setAttribute('aria-expanded', 'false')
+      document.body.classList.remove('menu-open')
+    }
+
+    const openCart = triggerElement => {
+      lastCartTrigger = triggerElement || document.activeElement
+      cartDrawer.classList.add('open')
+      cartDrawer.setAttribute('aria-hidden', 'false')
+      document.body.classList.add('modal-open')
+      focusFirstElement(cartPanel)
+    }
+
+    const closeCart = () => {
+      const shouldRestoreFocus = cartDrawer.classList.contains('open')
+      cartDrawer.classList.remove('open')
+      cartDrawer.setAttribute('aria-hidden', 'true')
+      document.body.classList.remove('modal-open')
+
+      if (shouldRestoreFocus && lastCartTrigger && typeof lastCartTrigger.focus === 'function') {
+        lastCartTrigger.focus()
+      }
+
+      lastCartTrigger = null
+    }
+
+    const openModal = triggerElement => {
+      lastModalTrigger = triggerElement || document.activeElement
+      orderItemsField.value = cart.length
+        ? cart.map(item => `${item.name} (${item.volume}) - ${item.price} ₽`).join('\n')
+        : ''
+      modalBackdrop.classList.add('open')
+      modalBackdrop.setAttribute('aria-hidden', 'false')
+      document.body.classList.add('modal-open')
+      focusFirstElement(modalCard)
+    }
+
+    const closeModal = () => {
+      const shouldRestoreFocus = modalBackdrop.classList.contains('open')
+      modalBackdrop.classList.remove('open')
+      modalBackdrop.setAttribute('aria-hidden', 'true')
+      document.body.classList.remove('modal-open')
+
+      if (shouldRestoreFocus && lastModalTrigger && typeof lastModalTrigger.focus === 'function') {
+        lastModalTrigger.focus()
+      }
+
+      lastModalTrigger = null
+    }
+
+    const renderCart = () => {
+      const total = cart.reduce((sum, item) => sum + item.price, 0)
+      const count = cart.length
+
+      cartCount.textContent = count
+      mobileCartCount.textContent = count
+      cartItemsCount.textContent = count
+      cartTotal.textContent = `${total} ₽`
+
+      if (!count) {
+        cartList.innerHTML = '<div class="empty-state">Корзина пока пуста. Добавьте воду 19 литров, компактные форматы или минеральную воду из каталога.</div>'
+        return
+      }
+
+      cartList.innerHTML = cart.map((item, index) => `
+        <div class="cart-item">
+          <div>
+            <strong>${item.name}</strong>
+            <span>${item.volume} · ${item.price} ₽</span>
+          </div>
+          <button type="button" data-remove-index="${index}" aria-label="Удалить ${item.name} из корзины">Удалить</button>
+        </div>
+      `).join('')
+
+      cartList.querySelectorAll('[data-remove-index]').forEach(button => {
+        button.addEventListener('click', () => {
+          const index = Number(button.dataset.removeIndex)
+          cart.splice(index, 1)
+          renderCart()
+        })
+      })
+    }
+
+    const submitLeadForm = (formElement, successElement, formType, onSuccess) => {
+      if (!formElement || !successElement) {
+        return
+      }
+
+      formElement.addEventListener('submit', async event => {
+        event.preventDefault()
+
+        const leadFormConfig = window.test1LeadForm || null
+
+        if (!leadFormConfig?.ajaxUrl || !leadFormConfig?.action || !leadFormConfig?.nonce) {
+          window.alert('Форма временно недоступна. Обновите страницу и попробуйте снова.')
+          return
+        }
+
+        const formData = new window.FormData(formElement)
+        formData.append('action', leadFormConfig.action)
+        formData.append('nonce', leadFormConfig.nonce)
+        formData.append('form_type', formType)
+        formData.append('page_url', window.location.href)
+
+        try {
+          const response = await window.fetch(leadFormConfig.ajaxUrl, {
+            method: 'POST',
+            credentials: 'same-origin',
+            body: formData,
+          })
+
+          const payload = await response.json().catch(() => null)
+
+          if (!response.ok || !payload?.success) {
+            throw new Error('submit_failed')
+          }
+
+          successElement.classList.add('visible')
+          if (typeof onSuccess === 'function') {
+            onSuccess()
+          }
+
+          setTimeout(() => {
+            formElement.reset()
+            successElement.classList.remove('visible')
+          }, 2200)
+        } catch (error) {
+          window.alert('Не удалось отправить заявку. Попробуйте еще раз.')
+        }
+      })
+    }
+
+    mobileToggle.addEventListener('click', () => {
+      const isOpen = mobilePanel.classList.contains('active')
+      if (isOpen) {
+        closeMobileMenu()
+        return
+      }
+      openMobileMenu()
+    })
+
+    document.querySelectorAll('.mobile-nav a').forEach(link => {
+      link.addEventListener('click', closeMobileMenu)
+    })
+
+    addToCartButtons.forEach(button => {
+      button.addEventListener('click', () => {
+        const productId = Number(button.dataset.productId || 0)
+
+        if (wooCommerceConfig && productId && wooCommerceConfig.addToCartUrl && wooCommerceConfig.checkoutUrl) {
+          button.disabled = true
+
+          fetch(wooCommerceConfig.addToCartUrl, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+            },
+            body: new URLSearchParams({
+              product_id: String(productId),
+              quantity: '1'
+            })
+          })
+            .then(async response => {
+              let payload = null
+
+              try {
+                payload = await response.json()
+              } catch (error) {
+                payload = null
+              }
+
+              if (!response.ok) {
+                throw new Error('add_to_cart_failed')
+              }
+
+              if (payload && payload.error && payload.product_url) {
+                window.location.href = payload.product_url
+                return
+              }
+
+              cart.push({
+                name: button.dataset.name,
+                volume: button.dataset.volume,
+                price: Number(button.dataset.price)
+              })
+              renderCart()
+              openCart(button)
+              button.disabled = false
+            })
+            .catch(() => {
+              button.disabled = false
+            })
+
+          return
+        }
+
+        cart.push({
+          name: button.dataset.name,
+          volume: button.dataset.volume,
+          price: Number(button.dataset.price)
+        })
+        renderCart()
+        openCart(button)
+      })
+    })
+
+    cartOpenButton.addEventListener('click', () => openCart(cartOpenButton))
+    mobileCartOpenButton.addEventListener('click', () => {
+      closeMobileMenu()
+      openCart(mobileCartOpenButton)
+    })
+    cartCloseButton.addEventListener('click', closeCart)
+    viewCartButton.addEventListener('click', () => {
+      window.location.href = cartPageUrl
+    })
+    checkoutButton.addEventListener('click', () => {
+      window.location.href = checkoutPageUrl
+    })
+
+    orderButtons.forEach(button => {
+      button.addEventListener('click', () => openModal(button))
+    })
+
+    modalCloseButton.addEventListener('click', closeModal)
+
+    cartDrawer.addEventListener('click', event => {
+      if (event.target === cartDrawer) {
+        closeCart()
+      }
+    })
+
+    modalBackdrop.addEventListener('click', event => {
+      if (event.target === modalBackdrop) {
+        closeModal()
+      }
+    })
+
+    faqItems.forEach(item => {
+      const trigger = item.querySelector('.faq-question')
+      const answer = item.querySelector('.faq-answer')
+
+      if (!trigger || !answer) {
+        return
+      }
+
+      trigger.addEventListener('click', () => {
+        const isOpen = item.classList.contains('open')
+        faqItems.forEach(entry => {
+          const entryTrigger = entry.querySelector('.faq-question')
+          const entryAnswer = entry.querySelector('.faq-answer')
+
+          entry.classList.remove('open')
+          entryTrigger?.setAttribute('aria-expanded', 'false')
+
+          if (entryAnswer) {
+            entryAnswer.hidden = true
+          }
+        })
+        if (!isOpen) {
+          item.classList.add('open')
+          trigger.setAttribute('aria-expanded', 'true')
+          answer.hidden = false
+        }
+      })
+    })
+
+    submitLeadForm(orderForm, orderSuccess, 'landing_order', () => {
+      cart = []
+      renderCart()
+      setTimeout(() => {
+        closeModal()
+      }, 700)
+    })
+
+    submitLeadForm(contactForm, contactSuccess, 'landing_contacts')
+
+    document.addEventListener('keydown', event => {
+      if (event.key !== 'Escape') {
+        return
+      }
+      closeCart()
+      closeModal()
+      closeMobileMenu()
+    })
+
+    renderCart()

wp-content/themes/twentytwentyfour/functions.php

@@ -458,8 +458,8 @@ function twentytwentyfour_test1_assets() {
 		return;
 	}
 
-	$css_file = ABSPATH . 'index3.css';
-	$js_file  = ABSPATH . 'index3.js';
+	$landing_css_file = get_theme_file_path( 'assets/css/test1-landing.css' );
+	$landing_js_file  = get_theme_file_path( 'assets/js/test1-landing.js' );
 
 	if ( $use_test1_assets ) {
 		wp_dequeue_style( 'global-styles' );
@@ -475,21 +475,21 @@ function twentytwentyfour_test1_assets() {
 		null
 	);
 
-	if ( file_exists( $css_file ) ) {
+	if ( file_exists( $landing_css_file ) ) {
 		wp_enqueue_style(
 			'twentytwentyfour-test1-style',
-			home_url( '/index3.css' ),
+			get_theme_file_uri( 'assets/css/test1-landing.css' ),
 			array( 'twentytwentyfour-test1-fonts' ),
-			(string) filemtime( $css_file )
+			(string) filemtime( $landing_css_file )
 		);
 	}
 
-	if ( ( is_front_page() || is_page( 'test1' ) ) && file_exists( $js_file ) ) {
+	if ( ( is_front_page() || is_page( 'test1' ) ) && file_exists( $landing_js_file ) ) {
 		wp_enqueue_script(
 			'twentytwentyfour-test1-script',
-			home_url( '/index3.js' ),
+			get_theme_file_uri( 'assets/js/test1-landing.js' ),
 			array(),
-			(string) filemtime( $js_file ),
+			(string) filemtime( $landing_js_file ),
 			true
 		);
 

wp-content/themes/twentytwentyfour/page-test1.php

@@ -82,8 +82,14 @@ function twentytwentyfour_test1_catalog_markup() {
 	return (string) ob_get_clean();
 }
 
-$landing_file = ABSPATH . 'index3.html';
-$landing_html = file_exists( $landing_file ) ? file_get_contents( $landing_file ) : false;
+$landing_template = get_theme_file_path( 'template-parts/test1-landing-static.php' );
+$landing_html     = false;
+
+if ( file_exists( $landing_template ) ) {
+	ob_start();
+	require $landing_template;
+	$landing_html = (string) ob_get_clean();
+}
 
 if ( $landing_html ) {
 	$catalog_markup = twentytwentyfour_test1_catalog_markup();
@@ -186,7 +192,7 @@ HTML;
 		?>
 		<main class="site-main" role="main">
 			<div style="padding:48px 16px;max-width:1180px;margin:0 auto;">
-				<p>Не удалось загрузить шаблон страницы `index3.html`.</p>
+				<p>Не удалось загрузить шаблон страницы `template-parts/test1-landing-static.php`.</p>
 			</div>
 		</main>
 		<?php

wp-content/themes/twentytwentyfour/template-parts/test1-landing-static.php

@@ -0,0 +1,764 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Доставка питьевой воды в Севастополе — 19 л для дома и офиса</title>
+  <meta name="description" content="Питьевая вода с доставкой по Севастополю для дома и офиса. Бутыли 19 л, компактные форматы, удобные интервалы, подъем на этаж и возвратная тара.">
+  <meta name="theme-color" content="#0d4fd6">
+  <meta property="og:title" content="Питьевая вода с доставкой в Севастополе — удобно для дома и офиса">
+  <meta property="og:description" content="Закажите воду для дома, офиса или небольшого бизнеса: 19 л, 5 л и другие форматы с доставкой по Севастополю.">
+  <meta property="og:type" content="website">
+  <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=Manrope:wght@400;500;700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="index3.css">
+</head>
+<body>
+  <header class="site-header">
+    <div class="container">
+      <div class="header-row">
+        <a class="brand" href="#top" aria-label="Перейти в начало страницы">
+          <span class="brand-mark" aria-hidden="true">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M12 2C9 6.1 6 9.4 6 13.2C6 16.9 8.69 20 12 20C15.31 20 18 16.9 18 13.2C18 9.4 15 6.1 12 2Z" fill="currentColor"/>
+            </svg>
+          </span>
+          <span class="brand-text">
+            <strong>АкваЛиния</strong>
+            <span>питьевая вода для дома и офиса</span>
+          </span>
+        </a>
+
+        <nav class="nav" aria-label="Основная навигация">
+          <a href="#catalog">Каталог</a>
+          <a href="#delivery">Доставка</a>
+          <a href="#business">Для дома и офиса</a>
+          <a href="#faq">FAQ</a>
+          <a href="#contacts">Контакты</a>
+        </nav>
+
+        <div class="header-actions">
+          <a class="header-phone" href="tel:+79781234567" aria-label="Позвонить по номеру плюс семь девятьсот семьдесят восемь сто двадцать три сорок пять шестьдесят семь">
+            <span aria-hidden="true">+7 (978) 123-45-67</span>
+          </a>
+          <button class="cart-button" id="cartOpenButton" aria-label="Открыть корзину">
+            <span aria-hidden="true">Корзина</span>
+            <span class="cart-count" id="cartCount" aria-live="polite" aria-atomic="true">0</span>
+          </button>
+          <button class="mobile-toggle" id="mobileToggle" aria-label="Открыть меню" aria-expanded="false" aria-controls="mobilePanel">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+              <path d="M4 7H20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              <path d="M4 12H20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              <path d="M4 17H20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div class="mobile-panel" id="mobilePanel">
+        <div class="mobile-card">
+          <nav class="mobile-nav" aria-label="Мобильная навигация">
+            <a href="#catalog">Каталог</a>
+            <a href="#delivery">Условия доставки</a>
+            <a href="#business">Для дома и офиса</a>
+            <a href="#faq">FAQ</a>
+            <a href="#contacts">Контакты</a>
+          </nav>
+          <a class="header-phone" href="tel:+79781234567">+7 (978) 123-45-67</a>
+          <button class="cart-button" id="mobileCartOpenButton" aria-label="Открыть корзину с мобильного меню">
+            <span>Корзина</span>
+            <span class="cart-count" id="mobileCartCount" aria-live="polite" aria-atomic="true">0</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <main id="top">
+    <section class="hero">
+      <div class="container">
+        <div class="hero-grid">
+          <div class="hero-copy reveal">
+            <span class="eyebrow">Чистая вода каждый день</span>
+            <h1 class="hero-title">Питьевая вода с доставкой в <span>Севастополе</span> — привезём в удобное время</h1>
+            <div class="hero-actions">
+              <button class="button" data-open-order aria-label="Открыть форму заказа воды">Заказать воду</button>
+              <a class="ghost-button" href="#catalog" aria-label="Перейти к каталогу воды">Посмотреть каталог</a>
+            </div>
+
+            <div class="hero-stats">
+              <div class="stat-card reveal reveal-delay-1">
+                <strong>от 290 ₽</strong>
+                <span>Бутыль 19 л для дома и офиса</span>
+              </div>
+              <div class="stat-card reveal reveal-delay-2">
+                <strong>2 часа</strong>
+                <span>среднее время доставки по городу в будни</span>
+              </div>
+              <div class="stat-card reveal reveal-delay-3">
+                <strong>7 дней</strong>
+                <span>работаем без выходных для дома и офиса</span>
+              </div>
+            </div>
+          </div>
+
+          <aside class="hero-panel reveal reveal-delay-1" aria-label="Информация о доставке">
+            <div class="panel-top">
+              <div>
+                <span class="signal-pill">Сегодня работаем по городу</span>
+                <h2>Сегодня в доставке: центральные и прибрежные районы</h2>
+              </div>
+              <div class="chip">бутыли 19 л</div>
+            </div>
+
+            <div class="hero-notes">
+              <div class="hero-note">
+                <strong>Для дома</strong>
+                <span>Удобные форматы для кухни и семьи, без лишней тяжести и походов в магазин.</span>
+              </div>
+              <div class="hero-note">
+                <strong>Для офиса</strong>
+                <span>Регулярные поставки, документы для бухгалтерии и запас воды без авралов.</span>
+              </div>
+            </div>
+          </aside>
+        </div>
+
+        <div class="ticker reveal reveal-delay-2" aria-label="Ключевые преимущества сервиса">
+          <div class="ticker-item">
+            <strong>Источник</strong>
+            <span>артезианская вода с многоступенчатым контролем</span>
+          </div>
+          <div class="ticker-item">
+            <strong>Сервис</strong>
+            <span>подъем на этаж и помощь с заменой бутыли</span>
+          </div>
+          <div class="ticker-item">
+            <strong>Оплата</strong>
+            <span>наличные, карта, перевод и безнал для компаний</span>
+          </div>
+          <div class="ticker-item">
+            <strong>Автодоставка</strong>
+            <span>гибкий график без повторных звонков</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="catalog">
+      <div class="container">
+        <div class="section-head">
+          <div>
+            <span class="eyebrow">Каталог</span>
+            <h2 class="section-title">Выберите формат воды</h2>
+          </div>
+          <p class="section-copy">В каталоге — популярные объемы для дома и офиса: от небольших бутылей до стандартных 19 литров. 
+Можно заказать разово или подключить регулярную доставку, чтобы не следить за остатками.</p>
+        </div>
+
+        <div class="catalog-grid">
+          <article class="catalog-card reveal">
+            <div class="catalog-icon" aria-hidden="true">💧</div>
+            <h3>Вода 19 литров</h3>
+            <p>Главный формат для кулеров, кухни и офиса. Самая выгодная цена за литр и удобная возвратная тара.</p>
+            <div class="tag-row">
+              <span class="chip">хит продаж</span>
+              <span class="chip">для кулера</span>
+            </div>
+            <div class="card-price"><strong>290 ₽</strong><span>за бутыль</span></div>
+            <button class="mini-button add-to-cart" data-name="Вода артезианская 19 л" data-volume="19 л" data-price="290">Добавить в корзину</button>
+          </article>
+
+          <article class="catalog-card reveal reveal-delay-1">
+            <div class="catalog-icon" aria-hidden="true">🫙</div>
+            <h3>Вода 5 литров</h3>
+            <p>Удобный домашний формат для кухни, поездок и дачи. Легко хранить, просто переносить.</p>
+            <div class="tag-row">
+              <span class="chip">домой</span>
+              <span class="chip">компактно</span>
+            </div>
+            <div class="card-price"><strong>95 ₽</strong><span>за бутылку</span></div>
+            <button class="mini-button add-to-cart" data-name="Питьевая вода 5 л" data-volume="5 л" data-price="95">Добавить в корзину</button>
+          </article>
+
+          <article class="catalog-card reveal reveal-delay-2">
+            <div class="catalog-icon" aria-hidden="true">🥤</div>
+            <h3>0.5 / 1.5 литра</h3>
+            <p>Для тренировок, поездок, мероприятий и ежедневного запаса питьевой воды дома или на работе.</p>
+            <div class="tag-row">
+              <span class="chip">спорт</span>
+              <span class="chip">мероприятия</span>
+            </div>
+            <div class="card-price"><strong>39 ₽</strong><span>от 0.5 л</span></div>
+            <button class="mini-button add-to-cart" data-name="Питьевая вода 1.5 л" data-volume="1.5 л" data-price="49">Добавить в корзину</button>
+          </article>
+
+          <article class="catalog-card reveal reveal-delay-3">
+            <div class="catalog-icon" aria-hidden="true">⛰️</div>
+            <h3>Минеральная вода</h3>
+            <p>Освежающий вариант для гостей, кафе и тех, кто предпочитает яркий минеральный вкус.</p>
+            <div class="tag-row">
+              <span class="chip">для кафе</span>
+              <span class="chip">рестораны</span>
+            </div>
+            <div class="card-price"><strong>68 ₽</strong><span>за 1.5 л</span></div>
+            <button class="mini-button add-to-cart" data-name="Минеральная вода 1.5 л" data-volume="1.5 л" data-price="68">Добавить в корзину</button>
+          </article>
+
+          <article class="catalog-card reveal reveal-delay-4">
+            <div class="catalog-icon" aria-hidden="true">✨</div>
+            <h3>Газированная / негазированная</h3>
+            <p>Соберите микс под привычки семьи или офиса: мягкая вода на каждый день и газированная к столу.</p>
+            <div class="tag-row">
+              <span class="chip">микс заказ</span>
+              <span class="chip">на выбор</span>
+            </div>
+            <div class="card-price"><strong>45 ₽</strong><span>за 0.5 л</span></div>
+            <button class="mini-button add-to-cart" data-name="Газированная вода 0.5 л" data-volume="0.5 л" data-price="45">Добавить в корзину</button>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="bestsellers">
+      <div class="container">
+        <div class="section-head">
+          <div>
+            <span class="eyebrow">Бестселлеры</span>
+            <h2 class="section-title">Что заказывают чаще всего</h2>
+          </div>
+          <p class="section-copy">Если заказывают впервые, чаще всего начинают с бутыли 19 литров. Для дома, поездок или редкого использования обычно добавляют компактные форматы.</p>
+        </div>
+
+        <div class="featured-grid">
+          <div class="glass-card reveal">
+            <span class="eyebrow">Хит по Севастополю</span>
+            <h3>Вода 19 л — то, что чаще всего берут на постоянку</h3>
+            <p>Хороший вариант на каждый день: для дома, офиса и мест, где вода нужна постоянно. Удобно ставить в кулер и не вспоминать о запасах каждый день.</p>
+
+            <div class="product-table">
+              <div class="product-row">
+                <div>
+                  <strong>АкваЛиния Классик</strong>
+                  <span>19 л, мягкий вкус, ежедневное потребление</span>
+                </div>
+                <div class="price">290 ₽</div>
+                <button class="mini-button add-to-cart" data-name="АкваЛиния Классик" data-volume="19 л" data-price="290">Заказать</button>
+              </div>
+              <div class="product-row">
+                <div>
+                  <strong>АкваЛиния Премиум</strong>
+                  <span>19 л, артезианская вода, усиленный контроль</span>
+                </div>
+                <div class="price">340 ₽</div>
+                <button class="mini-button add-to-cart" data-name="АкваЛиния Премиум" data-volume="19 л" data-price="340">Заказать</button>
+              </div>
+              <div class="product-row">
+                <div>
+                  <strong>Стартовый комплект</strong>
+                  <span>2 бутыли 19 л + помпа для первого заказа</span>
+                </div>
+                <div class="price">690 ₽</div>
+                <button class="mini-button add-to-cart" data-name="Стартовый комплект 19 л + помпа" data-volume="2 x 19 л" data-price="690">Заказать</button>
+              </div>
+            </div>
+          </div>
+
+          <div class="glass-card reveal reveal-delay-1">
+            <span class="eyebrow">Почему выбирают</span>
+            <h3>Почему этот формат выбирают на постоянной основе</h3>
+            <div class="chip-row chip-row-spaced">
+              <span class="chip">быстрая доставка</span>
+              <span class="chip">чистая бутыль</span>
+              <span class="chip">возврат тары</span>
+              <span class="chip">выгодно для офиса</span>
+            </div>
+            <p>Многие берут воду по графику, чтобы не вспоминать о заказе в последний момент. Это удобно и для семьи, и для офиса, где запас должен быть всегда под рукой.</p>
+            <div class="hero-actions hero-actions-spaced">
+              <button class="button" data-open-order>Заказать воду</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="delivery">
+      <div class="container">
+        <div class="section-head">
+          <div>
+            <span class="eyebrow">Условия доставки</span>
+            <h2 class="section-title">Доставка воды по районам Севастополя</h2>
+          </div>
+          <p class="section-copy">Работаем по основным районам Севастополя. При оформлении заказа подскажем ближайшее окно и заранее подтвердим удобное время доставки.</p>
+        </div>
+
+        <div class="delivery-grid">
+          <div class="glass-card reveal">
+            <h3>Что важно знать перед заказом</h3>
+            <div class="product-table">
+              <div class="product-row">
+                <div>
+                  <strong>Зоны доставки</strong>
+                  <span>Гагаринский, Ленинский, Нахимовский, Балаклава, Камышовая бухта, Остряки, Стрелецкая</span>
+                </div>
+              </div>
+              <div class="product-row">
+                <div>
+                  <strong>Время доставки</strong>
+                  <span>Ежедневно с 8:00 до 21:00, срочные окна по возможности в день обращения</span>
+                </div>
+              </div>
+              <div class="product-row">
+                <div>
+                  <strong>Минимальный заказ</strong>
+                  <span>От 1 бутыли 19 л или от 500 ₽ для малых форматов</span>
+                </div>
+              </div>
+              <div class="product-row">
+                <div>
+                  <strong>Возвратная тара</strong>
+                  <span>Пустые бутыли забираем при следующей доставке или при отдельном выезде по согласованию</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="delivery-map reveal reveal-delay-1" aria-label="Информация о маршрутах доставки">
+            <span class="eyebrow eyebrow-inverse">Активные маршруты</span>
+            <h3 class="section-heading-compact section-heading-delivery">Доставляем по всем районам города</h3>
+            <div class="zones">
+              <span class="zone-card">Гагаринский район</span>
+              <span class="zone-card">Ленинский район</span>
+              <span class="zone-card">Нахимовский район</span>
+              <span class="zone-card">Балаклава</span>
+            </div>
+
+            <div class="delivery-highlights">
+              <article class="delivery-highlight-card">
+                <strong>Ближайшее окно</strong>
+                <span>Подберём ближайший доступный интервал и заранее согласуем время.</span>
+              </article>
+              <article class="delivery-highlight-card">
+                <strong>Быстрое подтверждение</strong>
+                <span>Связываемся в течение 15 минут в рабочее время.</span>
+              </article>
+              <article class="delivery-highlight-card">
+                <strong>Сервис на месте</strong>
+                <span>Подъем воды, замена бутыли и вывоз пустой тары по запросу.</span>
+              </article>
+              <button class="button delivery-cta" data-open-order>Оставить заявку на доставку</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="how-order">
+      <div class="container">
+        <div class="section-head">
+          <div>
+            <span class="eyebrow">Как заказать</span>
+            <h2 class="section-title">Четыре быстрых шага до чистой воды</h2>
+          </div>
+          <p class="section-copy">Все просто: выбираете воду, оставляете заявку, а мы уточняем детали и привозим заказ в согласованное время.</p>
+        </div>
+
+        <div class="steps-grid">
+          <article class="step-card reveal">
+            <div class="step-number">1</div>
+            <h3>Выберите объем воды </h3>
+            <p>Определите нужный объем: вода 19 литров, 5 литров, малые бутылки, минеральная или газированная вода.</p>
+          </article>
+          <article class="step-card reveal reveal-delay-1">
+            <div class="step-number">2</div>
+            <h3>Оставьте заявку на сайте или по телефону</h3>
+            <p>Соберите заказ прямо на сайте и проверьте итоговую сумму до подтверждения.</p>
+          </article>
+          <article class="step-card reveal reveal-delay-2">
+            <div class="step-number">3</div>
+            <h3>Подтвердите удобное время доставки</h3>
+            <p>Оставьте телефон и адрес в Севастополе, а мы уточним время и детали по таре.</p>
+          </article>
+          <article class="step-card reveal reveal-delay-3">
+            <div class="step-number">4</div>
+            <h3>Получите воду с доставкой до двери</h3>
+            <p>Курьер привезет воду, поможет с выгрузкой и при необходимости заберет пустые бутыли.</p>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="business">
+      <div class="container">
+        <div class="section-head">
+          <div>
+            <span class="eyebrow">Для дома и офиса</span>
+            <h2 class="section-title">Для дома и офиса — без лишних сложностей</h2>
+          </div>
+          <p class="section-copy">У домашних и корпоративных заказов разные задачи, поэтому мы отдельно продумали условия для семьи и для компаний.</p>
+        </div>
+
+        <div class="segments-grid">
+          <article class="segment-card reveal">
+            <span class="eyebrow">Доставка воды на дом</span>
+            <h3>Когда воду удобно заказывать домой</h3>
+            <p>Такой формат выбирают семьи, пожилые клиенты и все, кто не хочет носить тяжелые бутыли из магазина.</p>
+            <ul class="segment-list">
+              <li>Удобные интервалы утром, днем и вечером</li>
+              <li>Подъем на этаж и помощь с установкой</li>
+              <li>Можно заказать и 19 л, и компактные форматы</li>
+              <li>Напоминание о повторном заказе</li>
+            </ul>
+            <div class="segment-meta">Часто выбирают: 2 бутыли 19 л + вода 5 л для кухни</div>
+          </article>
+
+          <article class="segment-card featured reveal reveal-delay-1">
+            <span class="eyebrow eyebrow-inverse">Доставка воды в офис</span>
+            <h3>Регулярные поставки для команды и клиентов</h3>
+            <p>Офисам, салонам, кафе, фитнес-клубам и студиям нужен предсказуемый сервис. Мы строим график так, чтобы запас воды не заканчивался в рабочие часы.</p>
+            <ul class="segment-list">
+              <li>Безналичная оплата и закрывающие документы</li>
+              <li>Автодоставка воды по графику</li>
+              <li>Приоритетные интервалы на будни</li>
+              <li>Комбинированные заказы для кулеров и гостей</li>
+            </ul>
+            <div class="segment-meta">Часто выбирают: 6-12 бутылей 19 л в неделю + минеральная вода для переговорных</div>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="promotions">
+      <div class="container">
+        <div class="section-head">
+          <div>
+            <span class="eyebrow">Акции</span>
+            <h2 class="section-title">Выгоднее с первого заказа и еще удобнее по подписке</h2>
+          </div>
+          <p class="section-copy">Для новых и постоянных клиентов периодически действуют акции. Это удобный способ попробовать сервис или сделать регулярные заказы выгоднее.</p>
+        </div>
+
+        <div class="promo-grid">
+          <article class="promo-card highlight reveal">
+            <h3>Скидка на первый заказ</h3>
+            <p>На первый заказ действует скидка 10%. Это удобно, если хотите сначала попробовать сервис и оценить качество воды.</p>
+          </article>
+          <article class="promo-card reveal reveal-delay-1">
+            <h3>Автодоставка воды</h3>
+            <p>Настройте регулярный график: раз в 3 дня, неделю или по вашему потреблению. Мы напомним и приедем вовремя.</p>
+          </article>
+          <article class="promo-card reveal reveal-delay-2">
+            <h3>Помпа в подарок</h3>
+            <p>При заказе стартового комплекта для дома дарим механическую помпу, чтобы пользоваться 19-литровой бутылью было проще.</p>
+          </article>
+          <article class="promo-card reveal reveal-delay-3">
+            <h3>Офисный тариф</h3>
+            <p>Для корпоративных клиентов действует персональная цена при регулярном объеме и закрепленном графике поставок.</p>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="faq">
+      <div class="container">
+        <div class="section-head">
+          <div>
+            <span class="eyebrow">FAQ</span>
+            <h2 class="section-title">Частые вопросы о доставке воды в Севастополе</h2>
+          </div>
+          <p class="section-copy">Собрали вопросы, которые чаще всего задают перед первым заказом.</p>
+        </div>
+
+        <div class="faq-list">
+          <article class="faq-item reveal open">
+            <button class="faq-question" id="faq-question-1" aria-expanded="true" aria-controls="faq-answer-1">
+              <span>Как быстро вы привозите воду по Севастополю?</span>
+              <span aria-hidden="true">+</span>
+            </button>
+            <div class="faq-answer" id="faq-answer-1" role="region" aria-labelledby="faq-question-1">Обычно привозим воду в течение дня, а по активным маршрутам — быстрее. Точное время зависит от района и загрузки, поэтому ближайший интервал всегда подтверждаем заранее.</div>
+          </article>
+
+          <article class="faq-item reveal reveal-delay-1">
+            <button class="faq-question" id="faq-question-2" aria-expanded="false" aria-controls="faq-answer-2">
+              <span>Какие способы оплаты доступны?</span>
+              <span aria-hidden="true">+</span>
+            </button>
+            <div class="faq-answer" id="faq-answer-2" role="region" aria-labelledby="faq-question-2" hidden>Принимаем наличные, оплату картой при получении, перевод по номеру телефона и безналичный расчет для компаний. Для офисов можем выставить счет.</div>
+          </article>
+
+          <article class="faq-item reveal reveal-delay-2">
+            <button class="faq-question" id="faq-question-3" aria-expanded="false" aria-controls="faq-answer-3">
+              <span>Нужен ли залог за бутыль 19 литров?</span>
+              <span aria-hidden="true">+</span>
+            </button>
+            <div class="faq-answer" id="faq-answer-3" role="region" aria-labelledby="faq-question-3" hidden>Если у вас нет своей тары, при первом заказе может взиматься возвратный депозит за бутыль. При возврате тары депозит учитывается в следующих заказах.</div>
+          </article>
+
+          <article class="faq-item reveal reveal-delay-3">
+            <button class="faq-question" id="faq-question-4" aria-expanded="false" aria-controls="faq-answer-4">
+              <span>Как часто лучше заказывать воду домой?</span>
+              <span aria-hidden="true">+</span>
+            </button>
+            <div class="faq-answer" id="faq-answer-4" role="region" aria-labelledby="faq-question-4" hidden>Для семьи из 2-4 человек обычно достаточно заказа 2-4 бутылей 19 литров раз в 1-2 недели. Точный график зависит от потребления и наличия кулера.</div>
+          </article>
+
+          <article class="faq-item reveal">
+            <button class="faq-question" id="faq-question-5" aria-expanded="false" aria-controls="faq-answer-5">
+              <span>Откуда поступает вода и как контролируется качество?</span>
+              <span aria-hidden="true">+</span>
+            </button>
+            <div class="faq-answer" id="faq-answer-5" role="region" aria-labelledby="faq-question-5" hidden>Мы используем артезианскую воду из защищенного источника, проводим фильтрацию, санитарную обработку тары и регулярный лабораторный контроль. По запросу предоставляем информацию о сертификатах качества.</div>
+          </article>
+
+          <article class="faq-item reveal reveal-delay-1">
+            <button class="faq-question" id="faq-question-6" aria-expanded="false" aria-controls="faq-answer-6">
+              <span>Можно ли оформить доставку воды в офис?</span>
+              <span aria-hidden="true">+</span>
+            </button>
+            <div class="faq-answer" id="faq-answer-6" role="region" aria-labelledby="faq-question-6" hidden>Да, мы регулярно обслуживаем офисы, кафе, фитнес-клубы, студии и медицинские кабинеты. Настраиваем график, безнал и объем под ваш режим работы.</div>
+          </article>
+
+          <article class="faq-item reveal reveal-delay-2">
+            <button class="faq-question" id="faq-question-7" aria-expanded="false" aria-controls="faq-answer-7">
+              <span>Какой минимальный заказ действует для доставки?</span>
+              <span aria-hidden="true">+</span>
+            </button>
+            <div class="faq-answer" id="faq-answer-7" role="region" aria-labelledby="faq-question-7" hidden>Для воды 19 литров можно заказать от одной бутыли. Для небольших упаковок минимальная сумма заказа составляет 500 ₽, чтобы доставка оставалась быстрой и выгодной.</div>
+          </article>
+
+          <article class="faq-item reveal reveal-delay-3">
+            <button class="faq-question" id="faq-question-8" aria-expanded="false" aria-controls="faq-answer-8">
+              <span>Что делать с пустыми бутылками после использования?</span>
+              <span aria-hidden="true">+</span>
+            </button>
+            <div class="faq-answer" id="faq-answer-8" role="region" aria-labelledby="faq-question-8" hidden>Сохраните пустые бутыли до следующего визита курьера. Мы заберем их при следующей доставке или согласуем отдельный выезд при крупном заказе.</div>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="about">
+      <div class="container">
+        <div class="section-head">
+          <div>
+            <span class="eyebrow">О компании</span>
+            <h2 class="section-title">Чистый источник, строгий контроль, понятный сервис</h2>
+          </div>
+          <p class="section-copy">Важно не только откуда вода, но и как она проходит обработку, розлив и доставку. Поэтому мы уделяем внимание качеству на каждом этапе.</p>
+        </div>
+
+        <div class="about-grid">
+          <div class="glass-card about-copy reveal">
+            <h3>Следим не только за водой, но и за тем, в каком виде она приезжает к клиенту</h3>
+            <p>Вода поступает из артезианского источника, проходит очистку и контроль перед розливом. Не меньше внимания уделяем бутылям: их состояние и санитарная обработка напрямую влияют на вкус и качество воды.</p>
+            <p class="about-copy-secondary">По запросу можно получить информацию о качестве воды и условиях поставки. Для офисов и коммерческих объектов отдельно настраиваем регулярный график, чтобы запас воды не заканчивался в рабочее время.</p>
+            <div class="chip-row hero-actions-spaced">
+              <span class="chip">артезианская вода</span>
+              <span class="chip">контроль качества</span>
+              <span class="chip">сертификаты</span>
+              <span class="chip">санобработка тары</span>
+            </div>
+          </div>
+
+          <div class="about-visual reveal reveal-delay-1" aria-hidden="true">
+            <div class="droplet"></div>
+            <div class="quality-stack">
+              <div class="quality-card"><strong>Источник</strong><br>Защищенный артезианский горизонт</div>
+              <div class="quality-card"><strong>Проверка</strong><br>Регулярный лабораторный анализ качества</div>
+              <div class="quality-card"><strong>Тара</strong><br>Санитарная обработка и контроль оборота бутылей</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="reviews">
+      <div class="container">
+        <div class="section-head">
+          <div>
+            <span class="eyebrow">Отзывы</span>
+            <h2 class="section-title">Что говорят клиенты о нашей воде и доставке</h2>
+          </div>
+          <p class="section-copy">Несколько отзывов от клиентов, которые заказывают воду домой, в офис и для коммерческих объектов.</p>
+        </div>
+
+        <div class="reviews-grid">
+          <article class="review-card reveal">
+            <strong>«Привозят точно в обещанный интервал»</strong>
+            <p>Заказываем воду 19 литров домой в Гагаринский район. Курьер всегда заранее звонит, поднимает бутыли и забирает пустые. Удобно, что не нужно снова объяснять адрес.</p>
+            <div class="review-meta">Марина, Севастополь</div>
+          </article>
+          <article class="review-card reveal reveal-delay-1">
+            <strong>«Для офиса это реально спасение»</strong>
+            <p>У нас небольшая команда, вода уходит быстро. С автодоставкой больше не вспоминаем в последний момент, что кулер пустой. Документы присылают без задержек.</p>
+            <div class="review-meta">Андрей, управляющий офисом</div>
+          </article>
+          <article class="review-card reveal reveal-delay-2">
+            <strong>«Вкус воды мягкий, без постороннего запаха»</strong>
+            <p>Переходили с другого поставщика и сразу почувствовали разницу. Вода приятная и для питья, и для чайника. Заказываем и 19 литров, и 5 литров домой.</p>
+            <div class="review-meta">Елена, Ленинский район</div>
+          </article>
+          <article class="review-card reveal reveal-delay-3">
+            <strong>«Хорошо работают с коммерческими заказами»</strong>
+            <p>Для нашего фитнес-клуба важна стабильность. Ребята привозят четко по графику, можно комбинировать большие бутыли и маленькие бутылки для стойки продаж.</p>
+            <div class="review-meta">Игорь, фитнес-клуб в Стрелецкой</div>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="contacts">
+      <div class="container">
+        <div class="section-head">
+          <div>
+            <span class="eyebrow">Контакты</span>
+            <h2 class="section-title">Свяжитесь с нами и оформите заказ</h2>
+          </div>
+          <p class="section-copy">Позвоните нам или оставьте заявку на сайте — уточним детали и подберём удобное время доставки.</p>
+        </div>
+
+        <div class="contacts-grid">
+          <div class="contact-card reveal">
+            <h3>Контактные данные</h3>
+            <ul class="contact-list">
+              <li><strong>Телефон:</strong> <a href="tel:+79117748923">+7 (911) 774-89-23</a></li>
+              <li><strong>Адрес:</strong> г. Севастополь, ул. Генерала Острякова, 92</li>
+              <li><strong>График:</strong> ежедневно с 8:00 до 21:00</li>
+              <li><strong>E-mail:</strong> sygorenkomisha17@gmail.com</li>
+            </ul>
+
+            <form class="contact-form" id="contactForm">
+              <input class="field" type="text" name="name" placeholder="Ваше имя" aria-label="Ваше имя" required>
+              <input class="field" type="tel" name="phone" placeholder="Телефон" aria-label="Телефон" required>
+              <input class="field" type="text" name="address" placeholder="Адрес доставки в Севастополе" aria-label="Адрес доставки" required>
+              <textarea class="field" name="comment" placeholder="Что нужно доставить: например, 2 бутыли 19 л и 1 упаковка 1.5 л" aria-label="Комментарий к заказу"></textarea>
+              <button class="button" type="submit">Отправить заявку</button>
+              <div class="success-note" id="contactSuccess" role="status" aria-live="polite">Спасибо! Заявка принята. Мы свяжемся с вами для подтверждения заказа.</div>
+            </form>
+          </div>
+
+          <div class="map-placeholder reveal reveal-delay-1" aria-label="Условия обслуживания по городу">
+            <span class="eyebrow eyebrow-inverse">Зона обслуживания</span>
+            <h3 class="section-heading-compact section-heading-map">Принимаем заявки по всему Севастополю</h3>
+            <p class="map-copy">Работаем ежедневно и подбираем удобный интервал доставки для дома, офиса, кафе и небольших коммерческих точек.</p>
+
+            <div class="contact-fast-facts">
+              <article class="contact-fact-card">
+                <strong>Подтверждение заявки</strong>
+                <span>До 15 минут в рабочие часы, без долгого ожидания.</span>
+              </article>
+              <article class="contact-fact-card">
+                <strong>Окна доставки</strong>
+                <span>С 8:00 до 21:00 ежедневно, срочные слоты по возможности.</span>
+              </article>
+              <article class="contact-fact-card">
+                <strong>Дополнительный сервис</strong>
+                <span>Подъем воды и вывоз пустой тары при следующем визите.</span>
+              </article>
+            </div>
+
+            <div class="contact-quick-actions">
+              <a class="contact-quick-link" href="tel:+79117748923">Позвонить: +7 (911) 774-89-23</a>
+              <a class="contact-quick-link" href="mailto:sygorenkomisha17@gmail.com">Написать: sygorenkomisha17@gmail.com</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-grid">
+        <div class="footer-card">
+          <a class="brand" href="#top" aria-label="Перейти в начало страницы">
+            <span class="brand-mark" aria-hidden="true">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 2C9 6.1 6 9.4 6 13.2C6 16.9 8.69 20 12 20C15.31 20 18 16.9 18 13.2C18 9.4 15 6.1 12 2Z" fill="currentColor"/>
+              </svg>
+            </span>
+            <span class="brand-text">
+              <strong>АкваЛиния</strong>
+              <span>вода с доставкой для Севастополя</span>
+            </span>
+          </a>
+          <p class="footer-description">Питьевая вода для дома, офиса, кафе и небольших коммерческих точек в Севастополе. Удобный заказ на сайте и понятные условия доставки.</p>
+        </div>
+        <div class="footer-card">
+          <h3>Навигация и документы</h3>
+          <div class="footer-links">
+            <a href="#catalog">Каталог</a>
+            <a href="#delivery">Условия доставки</a>
+            <a href="#business">Для дома и офиса</a>
+            <a href="#faq">Частые вопросы</a>
+            <a href="#contacts">Контакты</a>
+          </div>
+          <div class="footer-legal">
+            <a href="#">Политика конфиденциальности</a>
+            <a href="#">Пользовательское соглашение</a>
+            <a href="#">Условия использования</a>
+          </div>
+        </div>
+      </div>
+
+      <div class="footer-bottom">
+        <span>© 2026 АкваЛиния. Все права защищены.</span>
+        <span>Работаем для дома, офиса и небольшого бизнеса</span>
+      </div>
+    </div>
+  </footer>
+
+  <div class="cart-drawer" id="cartDrawer" aria-hidden="true">
+    <div class="cart-panel" role="dialog" aria-modal="true" aria-labelledby="cartTitle">
+      <div class="drawer-head">
+        <div>
+          <h3 id="cartTitle">Корзина</h3>
+          <p class="dialog-copy">Проверьте состав заказа и переходите к оформлению.</p>
+        </div>
+        <button class="close-button" id="cartCloseButton" aria-label="Закрыть корзину">×</button>
+      </div>
+
+      <div class="cart-summary">
+        <div class="summary-row"><span>Товаров</span><span id="cartItemsCount" aria-live="polite" aria-atomic="true">0</span></div>
+        <div class="summary-row"><span>Сумма</span><strong id="cartTotal" aria-live="polite" aria-atomic="true">0 ₽</strong></div>
+      </div>
+
+      <div class="cart-list" id="cartList">
+        <div class="empty-state">Корзина пока пуста. Добавьте нужные позиции из каталога и переходите к оформлению.</div>
+      </div>
+
+      <div class="cart-actions">
+        <button class="ghost-button" id="viewCartButton">Смотреть корзину</button>
+        <button class="button" id="checkoutButton">Оформить заказ</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-backdrop" id="orderModal" aria-hidden="true">
+    <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="orderModalTitle">
+      <div class="modal-head">
+        <div>
+          <h3 id="orderModalTitle">Оформление заказа</h3>
+          <p class="dialog-copy">Оставьте контакты, и мы свяжемся с вами для подтверждения заказа.</p>
+        </div>
+        <button class="close-button" id="modalCloseButton" aria-label="Закрыть форму заказа">×</button>
+      </div>
+
+      <form class="contact-form" id="orderForm">
+        <input class="field" type="text" name="customerName" placeholder="Ваше имя" aria-label="Ваше имя" required>
+        <input class="field" type="tel" name="customerPhone" placeholder="Телефон" aria-label="Телефон" required>
+        <input class="field" type="text" name="customerAddress" placeholder="Адрес доставки" aria-label="Адрес доставки" required>
+        <select class="field" name="customerType" aria-label="Тип клиента">
+          <option value="Для дома">Для дома</option>
+          <option value="Для офиса">Для офиса</option>
+        </select>
+        <textarea class="field" name="customerOrder" id="orderItemsField" placeholder="Комментарий к заказу" aria-label="Комментарий к заказу"></textarea>
+        <button class="button" type="submit">Подтвердить заказ</button>
+        <div class="success-note" id="orderSuccess" role="status" aria-live="polite">Спасибо! Ваш заказ сохранен. Мы свяжемся с вами в ближайшее время.</div>
+      </form>
+    </div>
+  </div>
+  <script src="index3.js"></script>
+</body>
+</html>