Good-Production/dostavka_vodi
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Anton | настройка cart checkout

Browse Source
This commit is contained in:
ab.an.ev@yandex.ru
2026-04-02 12:24:12 +03:00
parent e5c963ef58
commit 3df1fcaab2
3 changed files with 608 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

371
wp-content/themes/twentytwentyfour/assets/css/test1-checkout.css
View File

@@ -1,15 +1,59 @@
:root {
--checkout-max-width: 1180px;
--premium-navy: #081f4f;
--premium-blue: #0d4fd6;
--premium-cyan: #6ee0ff;
--premium-mist: rgba(255, 255, 255, 0.66);
--premium-line: rgba(13, 79, 214, 0.14);
--premium-shadow: 0 40px 120px rgba(8, 31, 79, 0.18);
}
body:is(.test1-checkout-page, .test1-cart-page) {
min-width: 320px;
}
:is(.test1-checkout-page, .test1-cart-page) {
position: relative;
}
:is(.test1-checkout-page, .test1-cart-page)::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 18% 12%, rgba(110, 224, 255, 0.12), transparent 24%),
radial-gradient(circle at 84% 18%, rgba(13, 79, 214, 0.14), transparent 22%),
linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 55%);
opacity: 0.9;
}
.premium-topline {
position: relative;
z-index: 3;
border-bottom: 1px solid rgba(255, 255, 255, 0.24);
background: linear-gradient(90deg, rgba(8, 31, 79, 0.96), rgba(10, 43, 109, 0.84));
color: rgba(255, 255, 255, 0.92);
}
.premium-topline-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 42px;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 800;
}
:is(.test1-checkout-page, .test1-cart-page) .checkout-shell {
position: relative;
display: grid;
gap: 28px;
align-items: start;
z-index: 1;
}
:is(.test1-checkout-page, .test1-cart-page) .checkout-intro {
@@ -24,11 +68,248 @@ body:is(.test1-checkout-page, .test1-cart-page) {
white-space: nowrap;
}
.premium-stage {
position: relative;
padding: clamp(18px, 2vw, 28px);
border-radius: 36px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.16));
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: var(--premium-shadow);
overflow: hidden;
isolation: isolate;
}
.premium-stage::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 24%),
linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 68%);
opacity: 0.8;
pointer-events: none;
}
.premium-orb {
position: absolute;
border-radius: 50%;
filter: blur(6px);
pointer-events: none;
opacity: 0.9;
}
.premium-orb-one {
top: -64px;
right: -40px;
width: 220px;
height: 220px;
background: radial-gradient(circle, rgba(110, 224, 255, 0.38), transparent 70%);
}
.premium-orb-two {
bottom: -80px;
left: -30px;
width: 260px;
height: 260px;
background: radial-gradient(circle, rgba(13, 79, 214, 0.22), transparent 70%);
}
.premium-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 18px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(8, 31, 79, 0.08);
color: var(--premium-navy);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 800;
}
.premium-kicker::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: linear-gradient(135deg, var(--premium-cyan), var(--premium-blue));
box-shadow: 0 0 0 6px rgba(110, 224, 255, 0.12);
}
.premium-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 26px;
}
.premium-metric {
padding: 18px 18px 16px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.68);
border: 1px solid rgba(255, 255, 255, 0.72);
box-shadow: 0 18px 44px rgba(8, 31, 79, 0.1);
}
.premium-metric strong {
display: block;
margin-bottom: 6px;
font-size: 22px;
line-height: 1;
color: var(--premium-navy);
}
.premium-metric span {
display: block;
color: var(--muted);
line-height: 1.55;
}
.premium-note-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 24px;
}
.premium-note-card {
padding: 18px 18px 20px;
border-radius: 22px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.56));
border: 1px solid rgba(255, 255, 255, 0.76);
box-shadow: 0 18px 50px rgba(8, 31, 79, 0.1);
}
.premium-note-card span {
display: inline-block;
margin-bottom: 8px;
color: var(--premium-blue);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 800;
}
.premium-note-card strong {
display: block;
color: var(--premium-navy);
line-height: 1.5;
}
.premium-stack {
display: grid;
gap: 20px;
}
.premium-aside,
.premium-form-card {
position: relative;
overflow: hidden;
}
.premium-aside::before,
.premium-form-card::before,
.premium-footer-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.22), transparent 34%);
pointer-events: none;
}
.premium-aside {
padding: 26px;
border-radius: 30px;
}
.premium-aside-head h2 {
margin: 16px 0 0;
font-size: clamp(28px, 3vw, 38px);
line-height: 1.02;
letter-spacing: -0.04em;
color: var(--premium-navy);
}
.premium-timeline {
display: grid;
gap: 14px;
margin-top: 24px;
}
.premium-timeline-item {
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
align-items: start;
padding: 16px 18px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.68);
border: 1px solid rgba(13, 79, 214, 0.08);
}
.premium-timeline-item strong {
min-width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 14px;
background: linear-gradient(145deg, rgba(8, 31, 79, 0.96), rgba(13, 79, 214, 0.92));
color: #fff;
font-size: 13px;
letter-spacing: 0.08em;
}
.premium-timeline-item span {
display: block;
padding-top: 6px;
color: var(--text);
line-height: 1.6;
}
.premium-badge-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 18px;
}
.premium-badge-card {
padding: 18px;
border-radius: 20px;
background: linear-gradient(160deg, rgba(8, 31, 79, 0.88), rgba(13, 79, 214, 0.78));
color: #fff;
box-shadow: 0 24px 60px rgba(8, 31, 79, 0.18);
}
.premium-badge-card span {
display: block;
margin-bottom: 8px;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
}
.premium-badge-card strong {
display: block;
line-height: 1.45;
}
.premium-form-card {
border-radius: 30px;
box-shadow: 0 34px 100px rgba(8, 31, 79, 0.16);
}
:is(.test1-checkout-page, .test1-cart-page) .entry-content,
:is(.test1-checkout-page, .test1-cart-page) .woocommerce,
:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout,
:is(.test1-checkout-page, .test1-cart-page) .wc-block-cart,
:is(.test1-checkout-page, .test1-cart-page) .is-large {
position: relative;
z-index: 1;
max-width: 100%;
}
@@ -55,11 +336,11 @@ body:is(.test1-checkout-page, .test1-cart-page) {
:is(.test1-checkout-page, .test1-cart-page) .components-form-token-field__input,
:is(.test1-checkout-page, .test1-cart-page) .components-combobox-control__input,
:is(.test1-checkout-page, .test1-cart-page) .coupon #coupon_code {
min-height: 56px;
min-height: 58px;
padding: 14px 16px;
border-radius: 18px;
border: 1px solid rgba(18, 48, 89, 0.14);
background: rgba(255, 255, 255, 0.9);
border: 1px solid var(--premium-line);
background: rgba(255, 255, 255, 0.92);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
@@ -84,10 +365,10 @@ body:is(.test1-checkout-page, .test1-cart-page) {
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-cart-form,
:is(.test1-checkout-page, .test1-cart-page) .cart_totals,
:is(.test1-checkout-page, .test1-cart-page) .cart-collaterals {
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.72);
background: rgba(255, 255, 255, 0.76);
box-shadow: 0 30px 80px rgba(10, 43, 109, 0.12);
border-radius: 26px;
border: 1px solid rgba(255, 255, 255, 0.78);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.64));
box-shadow: 0 30px 90px rgba(8, 31, 79, 0.12);
}
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout #payment,
@@ -125,8 +406,8 @@ body:is(.test1-checkout-page, .test1-cart-page) {
border: 0;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, var(--primary-strong), var(--primary));
box-shadow: 0 16px 30px rgba(13, 79, 214, 0.25);
background: linear-gradient(135deg, var(--premium-navy), var(--premium-blue));
box-shadow: 0 18px 34px rgba(13, 79, 214, 0.24);
font-weight: 800;
}
@@ -235,18 +516,79 @@ body:is(.test1-checkout-page, .test1-cart-page) {
padding: 22px;
}
.premium-footer {
position: relative;
z-index: 1;
padding-top: 0;
}
.premium-footer-grid {
grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(240px, 0.8fr));
gap: 20px;
}
.premium-footer-card {
position: relative;
overflow: hidden;
border-radius: 30px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.62));
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 26px 70px rgba(8, 31, 79, 0.12);
}
.premium-footer-brand {
min-height: 100%;
}
.premium-footer-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.premium-footer-contacts {
margin: 0;
padding: 0;
list-style: none;
}
.premium-footer-contacts li + li {
margin-top: 10px;
}
.premium-footer-bottom {
padding-top: 24px;
}
@media (min-width: 992px) {
:is(.test1-checkout-page, .test1-cart-page) .checkout-shell {
grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
grid-template-columns: minmax(0, 0.88fr) minmax(430px, 1.12fr);
}
}
@media (max-width: 991px) {
.premium-metrics,
.premium-note-row,
.premium-badge-grid,
.premium-footer-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 781px) {
.premium-topline-inner,
:is(.test1-checkout-page, .test1-cart-page) .header-row,
:is(.test1-checkout-page, .test1-cart-page) .header-actions {
flex-wrap: wrap;
}
.premium-topline-inner {
justify-content: center;
padding: 8px 0;
text-align: center;
}
:is(.test1-checkout-page, .test1-cart-page) .header-actions {
width: 100%;
justify-content: stretch;
@@ -258,7 +600,13 @@ body:is(.test1-checkout-page, .test1-cart-page) {
text-align: center;
}
.premium-stage {
padding: 14px;
border-radius: 26px;
}
:is(.test1-checkout-page, .test1-cart-page) .checkout-card,
:is(.test1-checkout-page, .test1-cart-page) .premium-aside,
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout #payment,
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-billing-fields,
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-additional-fields,
@@ -267,7 +615,8 @@ body:is(.test1-checkout-page, .test1-cart-page) {
:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__sidebar,
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-cart-form,
:is(.test1-checkout-page, .test1-cart-page) .cart_totals,
:is(.test1-checkout-page, .test1-cart-page) .cart-collaterals {
:is(.test1-checkout-page, .test1-cart-page) .cart-collaterals,
.premium-footer-card {
padding: 18px;
}

132
wp-content/themes/twentytwentyfour/page-cart.php
View File

@@ -15,6 +15,12 @@
</head>
<body <?php body_class( 'test1-cart-page' ); ?>>
<?php wp_body_open(); ?>
<div class="premium-topline">
<div class="container premium-topline-inner">
<span><?php esc_html_e( 'Curated cart experience', 'twentytwentyfour' ); ?></span>
<span><?php esc_html_e( 'Проверка заказа • аккуратный апдейт • быстрый переход к оплате', 'twentytwentyfour' ); ?></span>
</div>
</div>
<header class="site-header">
<div class="container">
<div class="header-row">
@@ -45,31 +51,139 @@
<main id="top">
<section class="hero checkout-hero">
<div class="container">
<div class="premium-stage premium-stage-cart">
<div class="premium-orb premium-orb-one" aria-hidden="true"></div>
<div class="premium-orb premium-orb-two" aria-hidden="true"></div>
<div class="checkout-shell">
<div class="hero-copy checkout-intro reveal">
<span class="eyebrow"><?php esc_html_e( 'Ваш заказ', 'twentytwentyfour' ); ?></span>
<h1 class="hero-title"><?php esc_html_e( 'Корзина', 'twentytwentyfour' ); ?> <span><?php esc_html_e( 'в стиле test1', 'twentytwentyfour' ); ?></span></h1>
<p class="hero-text"><?php esc_html_e( 'Проверьте количество товаров, при необходимости обновите заказ и переходите к оформлению. Визуально корзина приведена к тому же стилю, что и landing test1.', 'twentytwentyfour' ); ?></p>
<div class="premium-kicker"><?php esc_html_e( 'Curated order preview', 'twentytwentyfour' ); ?></div>
<h1 class="hero-title"><?php esc_html_e( 'Корзина', 'twentytwentyfour' ); ?> <span><?php esc_html_e( 'с более дорогой подачей', 'twentytwentyfour' ); ?></span></h1>
<p class="hero-text"><?php esc_html_e( 'Здесь заказ выглядит не как техническая таблица, а как аккуратно собранный премиальный набор: больше воздуха, яснее итог, спокойнее акценты и заметнее путь к оформлению.', 'twentytwentyfour' ); ?></p>
<div class="premium-metrics">
<div class="premium-metric">
<strong><?php esc_html_e( '1 экран', 'twentytwentyfour' ); ?></strong>
<span><?php esc_html_e( 'чтобы проверить весь заказ', 'twentytwentyfour' ); ?></span>
</div>
<div class="premium-metric">
<strong><?php esc_html_e( 'гибко', 'twentytwentyfour' ); ?></strong>
<span><?php esc_html_e( 'можно обновить количество и купоны', 'twentytwentyfour' ); ?></span>
</div>
<div class="premium-metric">
<strong><?php esc_html_e( 'быстро', 'twentytwentyfour' ); ?></strong>
<span><?php esc_html_e( 'переход к оформлению в один клик', 'twentytwentyfour' ); ?></span>
</div>
</div>
<div class="hero-actions">
<a class="ghost-button" href="<?php echo esc_url( home_url( '/test1/#catalog' ) ); ?>"><?php esc_html_e( 'Добавить еще товары', 'twentytwentyfour' ); ?></a>
<?php if ( function_exists( 'wc_get_checkout_url' ) ) : ?>
<a class="button" href="<?php echo esc_url( wc_get_checkout_url() ); ?>"><?php esc_html_e( 'Оформить заказ', 'twentytwentyfour' ); ?></a>
<?php endif; ?>
</div>
<div class="premium-note-row">
<div class="premium-note-card">
<span><?php esc_html_e( 'Эстетика', 'twentytwentyfour' ); ?></span>
<strong><?php esc_html_e( 'Корзина встроена в язык landing, а не выбивается из него', 'twentytwentyfour' ); ?></strong>
</div>
<div class="premium-note-card">
<span><?php esc_html_e( 'Удобство', 'twentytwentyfour' ); ?></span>
<strong><?php esc_html_e( 'Итоги и действия читаются сразу, без лишних шагов', 'twentytwentyfour' ); ?></strong>
</div>
</div>
</div>
<div class="glass-card checkout-card reveal reveal-delay-1">
<?php
while ( have_posts() ) :
the_post();
the_content();
endwhile;
?>
<div class="premium-stack reveal reveal-delay-1">
<aside class="glass-card premium-aside premium-aside-cart">
<div class="premium-aside-head">
<span class="eyebrow eyebrow-inverse"><?php esc_html_e( 'Проверка состава', 'twentytwentyfour' ); ?></span>
<h2><?php esc_html_e( 'Что удобно сделать перед checkout', 'twentytwentyfour' ); ?></h2>
</div>
<div class="premium-timeline">
<div class="premium-timeline-item">
<strong>01</strong>
<span><?php esc_html_e( 'Проверьте нужный объем и количество бутылей', 'twentytwentyfour' ); ?></span>
</div>
<div class="premium-timeline-item">
<strong>02</strong>
<span><?php esc_html_e( 'При необходимости обновите заказ или примените купон', 'twentytwentyfour' ); ?></span>
</div>
<div class="premium-timeline-item">
<strong>03</strong>
<span><?php esc_html_e( 'Перейдите к оформлению и подтвердите адрес', 'twentytwentyfour' ); ?></span>
</div>
</div>
<div class="premium-badge-grid">
<div class="premium-badge-card">
<span><?php esc_html_e( 'Лучший формат', 'twentytwentyfour' ); ?></span>
<strong><?php esc_html_e( '19 л для дома и офиса', 'twentytwentyfour' ); ?></strong>
</div>
<div class="premium-badge-card">
<span><?php esc_html_e( 'Комбинация', 'twentytwentyfour' ); ?></span>
<strong><?php esc_html_e( 'кулер + компактные форматы', 'twentytwentyfour' ); ?></strong>
</div>
</div>
</aside>
<div class="glass-card checkout-card premium-form-card">
<?php
while ( have_posts() ) :
the_post();
the_content();
endwhile;
?>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer premium-footer">
<div class="container">
<div class="footer-grid premium-footer-grid">
<div class="footer-card premium-footer-card premium-footer-brand">
<a class="brand" href="<?php echo esc_url( home_url( '/test1/' ) ); ?>" aria-label="Вернуться на страницу test1">
<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><?php bloginfo( 'name' ); ?></strong>
<span><?php esc_html_e( 'Корзина в премиальном стиле test1', 'twentytwentyfour' ); ?></span>
</span>
</a>
<p class="footer-description"><?php esc_html_e( 'Корзина стала частью общей истории бренда: от hero-экрана до финального блока действий все выглядит собранно, дорого и целостно.', 'twentytwentyfour' ); ?></p>
<div class="premium-footer-pills">
<span class="chip"><?php esc_html_e( 'мягкая премиальная палитра', 'twentytwentyfour' ); ?></span>
<span class="chip"><?php esc_html_e( 'единый UX путь', 'twentytwentyfour' ); ?></span>
</div>
</div>
<div class="footer-card premium-footer-card">
<h3><?php esc_html_e( 'Переходы', 'twentytwentyfour' ); ?></h3>
<div class="footer-links">
<a href="<?php echo esc_url( home_url( '/test1/' ) ); ?>"><?php esc_html_e( 'Страница test1', 'twentytwentyfour' ); ?></a>
<a href="<?php echo esc_url( home_url( '/test1/#catalog' ) ); ?>"><?php esc_html_e( 'Каталог', 'twentytwentyfour' ); ?></a>
<?php if ( function_exists( 'wc_get_checkout_url' ) ) : ?>
<a href="<?php echo esc_url( wc_get_checkout_url() ); ?>"><?php esc_html_e( 'Оформление заказа', 'twentytwentyfour' ); ?></a>
<?php endif; ?>
</div>
</div>
<div class="footer-card premium-footer-card">
<h3><?php esc_html_e( 'Контакты', 'twentytwentyfour' ); ?></h3>
<ul class="contact-list premium-footer-contacts">
<li><strong><?php esc_html_e( 'Телефон:', 'twentytwentyfour' ); ?></strong> <a href="tel:+79781234567">+7 (978) 123-45-67</a></li>
<li><strong><?php esc_html_e( 'E-mail:', 'twentytwentyfour' ); ?></strong> order@aqualinia-sev.ru</li>
<li><strong><?php esc_html_e( 'Поддержка:', 'twentytwentyfour' ); ?></strong> <?php esc_html_e( 'ежедневно с 8:00 до 21:00', 'twentytwentyfour' ); ?></li>
</ul>
</div>
</div>
<div class="footer-bottom premium-footer-bottom">
<span>© 2026 <?php bloginfo( 'name' ); ?></span>
<span><?php esc_html_e( 'Cart redesigned with a premium editorial feel.', 'twentytwentyfour' ); ?></span>
</div>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

134
wp-content/themes/twentytwentyfour/page-checkout.php
View File

@@ -15,6 +15,12 @@
</head>
<body <?php body_class( 'test1-checkout-page' ); ?>>
<?php wp_body_open(); ?>
<div class="premium-topline">
<div class="container premium-topline-inner">
<span><?php esc_html_e( 'Premium delivery flow', 'twentytwentyfour' ); ?></span>
<span><?php esc_html_e( 'Севастополь • чистая вода • аккуратная логистика', 'twentytwentyfour' ); ?></span>
</div>
</div>
<header class="site-header">
<div class="container">
<div class="header-row">
@@ -45,31 +51,141 @@
<main id="top">
<section class="hero checkout-hero">
<div class="container">
<div class="premium-stage premium-stage-checkout">
<div class="premium-orb premium-orb-one" aria-hidden="true"></div>
<div class="premium-orb premium-orb-two" aria-hidden="true"></div>
<div class="checkout-shell">
<div class="hero-copy checkout-intro reveal">
<span class="eyebrow"><?php esc_html_e( 'Финальный шаг', 'twentytwentyfour' ); ?></span>
<h1 class="hero-title"><?php esc_html_e( 'Оформление заказа', 'twentytwentyfour' ); ?> <span><?php esc_html_e( 'без лишних шагов', 'twentytwentyfour' ); ?></span></h1>
<p class="hero-text"><?php esc_html_e( 'Проверьте состав заказа, укажите контакты и адрес доставки. Страница оформлена в том же стиле, что и landing test1, чтобы путь от выбора воды до оплаты выглядел цельно.', 'twentytwentyfour' ); ?></p>
<div class="premium-kicker"><?php esc_html_e( 'Secure checkout', 'twentytwentyfour' ); ?></div>
<h1 class="hero-title"><?php esc_html_e( 'Оформление заказа', 'twentytwentyfour' ); ?> <span><?php esc_html_e( 'в премиальном ритме', 'twentytwentyfour' ); ?></span></h1>
<p class="hero-text"><?php esc_html_e( 'Мы сохранили ясный путь от выбора воды до подтверждения доставки, но усилили подачу: больше глубины, чище акценты, статуснее композиция и более дорогой визуальный тон.', 'twentytwentyfour' ); ?></p>
<div class="premium-metrics">
<div class="premium-metric">
<strong><?php esc_html_e( '2-4 часа', 'twentytwentyfour' ); ?></strong>
<span><?php esc_html_e( 'среднее окно доставки', 'twentytwentyfour' ); ?></span>
</div>
<div class="premium-metric">
<strong><?php esc_html_e( '7 дней', 'twentytwentyfour' ); ?></strong>
<span><?php esc_html_e( 'прием заказов без пауз', 'twentytwentyfour' ); ?></span>
</div>
<div class="premium-metric">
<strong><?php esc_html_e( 'контроль', 'twentytwentyfour' ); ?></strong>
<span><?php esc_html_e( 'подтверждение адреса и состава', 'twentytwentyfour' ); ?></span>
</div>
</div>
<div class="hero-actions">
<?php if ( function_exists( 'wc_get_cart_url' ) ) : ?>
<a class="ghost-button" href="<?php echo esc_url( wc_get_cart_url() ); ?>"><?php esc_html_e( 'Изменить состав заказа', 'twentytwentyfour' ); ?></a>
<?php endif; ?>
<a class="button" href="<?php echo esc_url( home_url( '/test1/#catalog' ) ); ?>"><?php esc_html_e( 'Добавить еще товары', 'twentytwentyfour' ); ?></a>
</div>
<div class="premium-note-row">
<div class="premium-note-card">
<span><?php esc_html_e( 'Деликатный сервис', 'twentytwentyfour' ); ?></span>
<strong><?php esc_html_e( 'Курьер помогает с подъемом и тарой', 'twentytwentyfour' ); ?></strong>
</div>
<div class="premium-note-card">
<span><?php esc_html_e( 'Прозрачная коммуникация', 'twentytwentyfour' ); ?></span>
<strong><?php esc_html_e( 'Подтверждаем заказ без лишних звонков', 'twentytwentyfour' ); ?></strong>
</div>
</div>
</div>
<div class="glass-card checkout-card reveal reveal-delay-1">
<?php
while ( have_posts() ) :
the_post();
the_content();
endwhile;
?>
<div class="premium-stack reveal reveal-delay-1">
<aside class="glass-card premium-aside premium-aside-checkout">
<div class="premium-aside-head">
<span class="eyebrow eyebrow-inverse"><?php esc_html_e( 'Что дальше', 'twentytwentyfour' ); ?></span>
<h2><?php esc_html_e( 'Премиальный сценарий оформления', 'twentytwentyfour' ); ?></h2>
</div>
<div class="premium-timeline">
<div class="premium-timeline-item">
<strong>01</strong>
<span><?php esc_html_e( 'Вы заполняете контактные данные и адрес', 'twentytwentyfour' ); ?></span>
</div>
<div class="premium-timeline-item">
<strong>02</strong>
<span><?php esc_html_e( 'Мы подтверждаем детали и удобный интервал', 'twentytwentyfour' ); ?></span>
</div>
<div class="premium-timeline-item">
<strong>03</strong>
<span><?php esc_html_e( 'Курьер привозит воду и помогает с тарой', 'twentytwentyfour' ); ?></span>
</div>
</div>
<div class="premium-badge-grid">
<div class="premium-badge-card">
<span><?php esc_html_e( 'Сервис', 'twentytwentyfour' ); ?></span>
<strong><?php esc_html_e( 'Подъем на этаж', 'twentytwentyfour' ); ?></strong>
</div>
<div class="premium-badge-card">
<span><?php esc_html_e( 'Оплата', 'twentytwentyfour' ); ?></span>
<strong><?php esc_html_e( 'Карта, наличные, безнал', 'twentytwentyfour' ); ?></strong>
</div>
</div>
</aside>
<div class="glass-card checkout-card premium-form-card">
<?php
while ( have_posts() ) :
the_post();
the_content();
endwhile;
?>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer premium-footer">
<div class="container">
<div class="footer-grid premium-footer-grid">
<div class="footer-card premium-footer-card premium-footer-brand">
<a class="brand" href="<?php echo esc_url( home_url( '/test1/' ) ); ?>" aria-label="Вернуться на страницу test1">
<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><?php bloginfo( 'name' ); ?></strong>
<span><?php esc_html_e( 'Премиальная доставка воды по Севастополю', 'twentytwentyfour' ); ?></span>
</span>
</a>
<p class="footer-description"><?php esc_html_e( 'Финальный экран заказа оформлен в едином языке с landing test1: мягкий люкс, чистая структура и уверенная конверсионная логика без визуального шума.', 'twentytwentyfour' ); ?></p>
<div class="premium-footer-pills">
<span class="chip"><?php esc_html_e( 'ежедневно 8:00-21:00', 'twentytwentyfour' ); ?></span>
<span class="chip"><?php esc_html_e( 'подъем на этаж', 'twentytwentyfour' ); ?></span>
</div>
</div>
<div class="footer-card premium-footer-card">
<h3><?php esc_html_e( 'Переходы', 'twentytwentyfour' ); ?></h3>
<div class="footer-links">
<a href="<?php echo esc_url( home_url( '/test1/' ) ); ?>"><?php esc_html_e( 'Страница test1', 'twentytwentyfour' ); ?></a>
<?php if ( function_exists( 'wc_get_cart_url' ) ) : ?>
<a href="<?php echo esc_url( wc_get_cart_url() ); ?>"><?php esc_html_e( 'Корзина', 'twentytwentyfour' ); ?></a>
<?php endif; ?>
<?php if ( function_exists( 'wc_get_checkout_url' ) ) : ?>
<a href="<?php echo esc_url( wc_get_checkout_url() ); ?>"><?php esc_html_e( 'Оформление заказа', 'twentytwentyfour' ); ?></a>
<?php endif; ?>
</div>
</div>
<div class="footer-card premium-footer-card">
<h3><?php esc_html_e( 'Контакты', 'twentytwentyfour' ); ?></h3>
<ul class="contact-list premium-footer-contacts">
<li><strong><?php esc_html_e( 'Телефон:', 'twentytwentyfour' ); ?></strong> <a href="tel:+79781234567">+7 (978) 123-45-67</a></li>
<li><strong><?php esc_html_e( 'E-mail:', 'twentytwentyfour' ); ?></strong> order@aqualinia-sev.ru</li>
<li><strong><?php esc_html_e( 'Маршрут:', 'twentytwentyfour' ); ?></strong> <?php esc_html_e( 'Гагаринский, Ленинский, Нахимовский, Балаклава', 'twentytwentyfour' ); ?></li>
</ul>
</div>
</div>
<div class="footer-bottom premium-footer-bottom">
<span>© 2026 <?php bloginfo( 'name' ); ?></span>
<span><?php esc_html_e( 'Checkout and cart refined in the visual language of test1.', 'twentytwentyfour' ); ?></span>
</div>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>