, то есть
он есть на каждой странице.
Это единственное место, где стоковым страницам можно задать отступы
и типографику темы, не переписывая 79 шаблонов по отдельности.
================================================================== */
.breadcrumb { margin-block: var(--ae-gap-3) var(--ae-gap-2); }
#content { min-width: 0; }
/* Боковые колонки темы приходят в стоковую .row своим блоком, без
классов col-*: раскладку страниц темы держит грид .ae-layout, а не
сетка Bootstrap. Во флекс-ряду такой блок сжимается по содержимому —
на телефоне меню кабинета висело узкой полосой в две трети экрана
и вплотную к форме сверху. Отдаём ему ширину колонки. */
.row > .ae-modules {
width: 100%;
min-width: 0;
padding-inline: calc(var(--ae-gap-2) / 2);
margin-top: var(--ae-gap-3);
}
@media (min-width: 768px) {
.row > .ae-modules { width: 25%; margin-top: 0; }
}
/* Панель сортировки в стоковых списках сложена из двух групп в
col-xs-6. На 375px подпись «Сортировка:» съедает половину экрана,
и от самого списка остаётся одна буква. Даём каждой группе строку. */
@media (max-width: 575px) {
.row > [class*="col-"]:has(> .form-group.input-group) { width: 100%; }
}
/* Заголовок страницы: стоковые шаблоны ставят то h1, то h2, и оба
берут размер из витринной шкалы. В колонке col-sm-6 такой размер
рвёт «Зарегистрированный клиент» посреди слова. Шаг вниз. */
.container .row > [class*="col-"] > h1 { margin-bottom: var(--ae-gap-3); font-size: var(--ae-fs-h2); text-wrap: balance; }
.container .row > [class*="col-"] > h2 { margin-bottom: var(--ae-gap-3); font-size: var(--ae-fs-h3); text-wrap: balance; }
/* Второй и следующие заголовки на странице — это новый раздел
(«Результаты поиска» после формы поиска). Без отступа сверху он
прилипал к кнопке предыдущего блока. */
.container .row > [class*="col-"] > :is(h1, h2, h3) ~ :is(h1, h2, h3) { margin-top: var(--ae-gap-4); }
.well h2, .panel h2 { font-size: var(--ae-fs-h4); }
.well h3, .panel h3 { font-size: var(--ae-fs-h5); }
/* Ряд кнопок под формой. В стоковых шаблонах он собран на float'ах:
без очистки следующий блок наползал на кнопки, а на телефоне
«Назад» и «Продолжить» становились друг на друга без просвета. */
.container .buttons {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--ae-gap-2);
margin-top: var(--ae-gap-3);
}
.container .buttons > .pull-left,
.container .buttons > .pull-right { float: none; }
/* Внутри .pull-right лежат вперемешку текст согласия, чекбокс и
кнопка отправки — строчным потоком. Кнопка выше строки, и её
верхняя половина заезжала на текст. Разбираем на флекс-элементы. */
.container .buttons > * {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5em;
min-width: 0;
}
/* ==================================================================
Значки FontAwesome.
Шрифт тема не подключает, а стоковые шаблоны и языковые файлы
OpenCart размечены им до сих пор. Пустой
схлопывается в ноль: первая крошка «Главная» исчезает, а разделитель
перед ней остаётся; кнопки «в корзину» и «удалить» в закладках
вообще состоят из одного значка и превращаются в пустые плашки.
Рисуем маской по currentColor: значок наследует цвет ссылки или
кнопки и одинаково работает в светлой и тёмной теме.
================================================================== */
.fa-home, .fa-shopping-cart, .fa-times, .fa-times-circle, .fa-heart, .fa-heart-o,
.fa-exchange, .fa-eye, .fa-pencil, .fa-search, .fa-calendar, .fa-star, .fa-star-o,
.fa-check-circle, .fa-exclamation-circle, .fa-info-circle, .fa-caret-down, .fa-bars,
.fa-user, .fa-phone, .fa-envelope, .fa-map-marker, .fa-reply, .fa-th, .fa-th-list {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -.125em;
background-color: currentColor;
-webkit-mask: var(--ae-fa) center / contain no-repeat;
mask: var(--ae-fa) center / contain no-repeat;
}
.fa-home { --ae-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20H4z'/%3E%3Cpath d='M9.5 20v-6h5v6'/%3E%3C/svg%3E"); }
.fa-shopping-cart { --ae-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.4h9.7L20 8H6'/%3E%3Ccircle cx='10' cy='20' r='1.4'/%3E%3Ccircle cx='17' cy='20' r='1.4'/%3E%3C/svg%3E"); }
.fa-times { --ae-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.fa-times-circle { --ae-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E"); }
.fa-heart, .fa-heart-o { --ae-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.7-7.5-9.6A3.9 3.9 0 0 1 12 8a3.9 3.9 0 0 1 7.5 2.4C19.5 15.3 12 20 12 20z'/%3E%3C/svg%3E"); }
.fa-exchange { --ae-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h15M15 4l4 4-4 4M20 16H5M9 12l-4 4 4 4'/%3E%3C/svg%3E"); }
.fa-eye { --ae-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M2.5 12S6 6 12 6s9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E"); }
.fa-pencil { --ae-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L20 8l-4-4L4 16z'/%3E%3C/svg%3E"); }
.fa-search { --ae-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E"); }
.fa-calendar { --ae-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3.5' y='5' width='17' height='16' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.fa-star { --ae-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='m12 3 2.7 5.7 6.1.9-4.4 4.4 1.1 6.1-5.5-3-5.5 3 1.1-6.1L3.2 9.6l6.1-.9z'/%3E%3C/svg%3E"); }
.fa-star-o { --ae-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.7 5.7 6.1.9-4.4 4.4 1.1 6.1-5.5-3-5.5 3 1.1-6.1L3.2 9.6l6.1-.9z'/%3E%3C/svg%3E"); }
.fa-check-circle { --ae-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.4 2.7 2.7L16.2 9.6'/%3E%3C/svg%3E"); }
.fa-exclamation-circle { --ae-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.4v5.4M12 16.1v.5'/%3E%3C/svg%3E"); }
.fa-info-circle { --ae-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11.2v5.4M12 7.4v.5'/%3E%3C/svg%3E"); }
.fa-caret-down { --ae-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='m6 9.5 6 6.5 6-6.5z'/%3E%3C/svg%3E"); }
.fa-bars { --ae-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
.fa-user { --ae-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E"); }
.fa-phone { --ae-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 5.5A2.5 2.5 0 0 1 5.5 3h2A1.5 1.5 0 0 1 9 4.3l.7 3a1.5 1.5 0 0 1-.5 1.5l-1.3 1a12 12 0 0 0 5.3 5.3l1-1.3a1.5 1.5 0 0 1 1.5-.5l3 .7A1.5 1.5 0 0 1 21 15.5v2a2.5 2.5 0 0 1-2.5 2.5A16.5 16.5 0 0 1 3 5.5z'/%3E%3C/svg%3E"); }
.fa-envelope { --ae-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='m3.6 7 8.4 6 8.4-6'/%3E%3C/svg%3E"); }
.fa-map-marker { --ae-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.fa-reply { --ae-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 8 4 12l5 4'/%3E%3Cpath d='M4 12h9a6 6 0 0 1 6 6v2'/%3E%3C/svg%3E"); }
.fa-th { --ae-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='3' y='3' width='8' height='8' rx='1'/%3E%3Crect x='13' y='3' width='8' height='8' rx='1'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1'/%3E%3Crect x='13' y='13' width='8' height='8' rx='1'/%3E%3C/svg%3E"); }
.fa-th-list { --ae-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='3' y='4' width='6' height='6' rx='1'/%3E%3Crect x='3' y='14' width='6' height='6' rx='1'/%3E%3Crect x='11' y='5.5' width='10' height='3' rx='1.5'/%3E%3Crect x='11' y='15.5' width='10' height='3' rx='1.5'/%3E%3C/svg%3E"); }
/* Рейтинг в стоковых списках сложен из двух значков в стопке:
закрашенная звезда лежит под контурной. Без позиционирования они
встают в строку, и вместо пяти звёзд получается десять. */
.fa-stack { position: relative; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; }
.fa-stack > .fa { position: absolute; inset: 0; width: 100%; height: 100%; }
.fa-stack .fa-star { color: var(--ae-rating); }
/* ---------- Цены в стоковых списках ---------- */
.price-new { color: var(--ae-price); font-weight: 700; }
.price-old { color: var(--ae-price-old); text-decoration: line-through; margin-left: .35em; }
.price-tax { display: block; font-size: .82em; color: var(--ae-text-muted); }
/* ==================================================================
Базовые компоненты темы.
================================================================== */
/* ---------- Кнопки ---------- */
.ae-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5em;
min-height: var(--ae-btn-height);
padding: .5em 1.2em;
border: 1px solid transparent;
border-radius: var(--ae-btn-radius);
background: var(--ae-surface-2);
color: var(--ae-text);
font-family: inherit;
font-size: .94rem;
font-weight: var(--ae-btn-weight);
line-height: 1.25;
text-align: center;
text-transform: var(--ae-btn-transform);
letter-spacing: var(--ae-btn-spacing);
white-space: nowrap;
/*
Кнопка не имеет права раздвинуть своего родителя: подпись пишет
владелец магазина, а регистр и межбуквенный интервал добавляет
настройка. Длина не ограничена ничем.
*/
max-width: 100%;
transition: background-color var(--ae-motion), border-color var(--ae-motion), color var(--ae-motion), opacity var(--ae-motion);
}
.ae-btn:hover { color: var(--ae-text); }
.ae-btn[disabled], .ae-btn.is-disabled { opacity: .5; pointer-events: none; }
.ae-btn svg { width: 17px; height: 17px; flex: none; }
.ae-btn--primary { background: var(--ae-primary); border-color: var(--ae-primary); color: var(--ae-on-primary); box-shadow: var(--ae-btn-shadow); }
.ae-btn--primary:hover { background: var(--ae-primary-hover); border-color: var(--ae-primary-hover); color: var(--ae-on-primary); }
/* Кнопка во всю ширину переносит подпись: обрезать её некуда. */
.ae-btn--block { display: flex; width: 100%; white-space: normal; }
.ae-btn--outline { background: transparent; border-color: var(--ae-border); }
.ae-btn--outline:hover { border-color: var(--ae-primary); color: var(--ae-primary); }
.ae-btn--ghost { background: transparent; color: var(--ae-text-muted); }
.ae-btn--ghost:hover { background: var(--ae-surface-2); color: var(--ae-text); }
.ae-btn--sale { background: var(--ae-sale); border-color: var(--ae-sale); color: #fff; }
.ae-btn--sale:hover { filter: brightness(.93); color: #fff; }
.ae-btn--lg { min-height: calc(var(--ae-btn-height) + 8px); padding: .6em 1.6em; font-size: 1.02rem; }
.ae-btn--sm { min-height: calc(var(--ae-btn-height) - 10px); padding: .35em .85em; font-size: .85rem; }
.ae-btn--icon { width: var(--ae-btn-height); padding: 0; }
/* ---------- Поля ---------- */
.ae-field { display: flex; flex-direction: column; gap: .35em; margin-bottom: var(--ae-gap-2); }
.ae-label { font-size: .87rem; font-weight: 500; }
.ae-label .ae-req { color: var(--ae-danger); }
.ae-input, .ae-select, .ae-textarea {
width: 100%;
min-height: var(--ae-input-height);
padding: .5em .9em;
border: var(--ae-input-border) solid var(--ae-border);
border-radius: var(--ae-input-radius);
background: var(--ae-input-bg);
color: var(--ae-text);
line-height: 1.3;
transition: border-color var(--ae-motion), box-shadow var(--ae-motion);
}
.ae-input:focus, .ae-select:focus, .ae-textarea:focus {
outline: 0;
border-color: var(--ae-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ae-primary) 18%, transparent);
}
.ae-textarea { min-height: 7em; resize: vertical; }
.ae-error { font-size: .82rem; color: var(--ae-danger); }
/* ---------- Счётчик количества ---------- */
.ae-qty {
display: inline-flex;
align-items: stretch;
border: var(--ae-input-border) solid var(--ae-border);
border-radius: var(--ae-input-radius);
overflow: hidden;
background: var(--ae-surface);
}
.ae-qty button {
width: 38px;
display: flex;
align-items: center;
justify-content: center;
color: var(--ae-text-muted);
font-size: 1.1rem;
transition: background-color .15s, color .15s;
}
.ae-qty button:hover { background: var(--ae-surface-2); color: var(--ae-text); }
.ae-qty input {
width: 48px;
border: 0;
border-inline: 1px solid var(--ae-border);
background: transparent;
color: var(--ae-text);
text-align: center;
font-variant-numeric: tabular-nums;
-moz-appearance: textfield;
}
.ae-qty input::-webkit-outer-spin-button,
.ae-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ae-qty input:focus { outline: 0; }
/* ---------- Хлебные крошки ---------- */
.ae-crumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .3em .5em;
margin-bottom: var(--ae-gap-2);
font-size: .82rem;
color: var(--ae-text-muted);
}
.ae-crumbs li { display: flex; align-items: center; gap: .5em; }
.ae-crumbs li + li::before { content: "›"; color: var(--ae-border); font-size: 1.1em; line-height: 1; }
.ae-crumbs a { color: inherit; }
.ae-crumbs a:hover { color: var(--ae-primary); }
/*
Последняя крошка повторяет заголовок страницы: в блоге это полное
название статьи, которое занимает две строки и стоит прямо над
тем же заголовком. Путь важен, полный текст последнего шага — нет.
*/
.ae-crumbs li { min-width: 0; }
.ae-crumbs li:last-child { color: var(--ae-text); }
.ae-crumbs li:last-child > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 24rem;
}
/* ---------- Сообщения ---------- */
.ae-alert {
display: flex;
align-items: flex-start;
gap: .65em;
padding: .9em 1.1em;
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius-sm);
background: var(--ae-surface-2);
margin-bottom: var(--ae-gap-2);
font-size: .92rem;
}
.ae-alert--success { border-color: color-mix(in srgb, var(--ae-success) 40%, transparent); background: color-mix(in srgb, var(--ae-success) 12%, var(--ae-surface)); }
.ae-alert--danger { border-color: color-mix(in srgb, var(--ae-danger) 40%, transparent); background: color-mix(in srgb, var(--ae-danger) 12%, var(--ae-surface)); }
.ae-alert--info { border-color: color-mix(in srgb, var(--ae-primary) 35%, transparent); background: color-mix(in srgb, var(--ae-primary) 10%, var(--ae-surface)); }
.ae-alert--warning { border-color: color-mix(in srgb, var(--ae-sale) 40%, transparent); background: color-mix(in srgb, var(--ae-sale) 12%, var(--ae-surface)); }
.ae-alert__close { margin-left: auto; opacity: .5; font-size: 1.2em; line-height: 1; }
.ae-alert__close:hover { opacity: 1; }
/* Всплывающие уведомления о добавлении в корзину. */
.ae-toasts {
position: fixed;
right: var(--ae-gap-2);
bottom: var(--ae-gap-2);
z-index: 1200;
display: flex;
flex-direction: column;
gap: .5em;
max-width: min(92vw, 380px);
pointer-events: none;
}
.ae-toast {
display: flex;
align-items: flex-start;
gap: .6em;
padding: .85em 1em;
border-radius: var(--ae-radius);
background: var(--ae-surface);
border: 1px solid var(--ae-border);
box-shadow: var(--ae-shadow-4);
font-size: .9rem;
pointer-events: auto;
animation: ae-toast-in .22s ease;
}
/* Одна ячейка на весь текст: фраза со ссылками внутри должна течь
как обычная строка, а не разлетаться по колонкам. */
.ae-toast__text { min-width: 0; flex: 1 1 auto; }
.ae-toast__text a { color: var(--ae-primary); text-decoration: underline; }
.ae-toast__text a:hover { color: var(--ae-primary-hover); }
.ae-toast--success { border-left: 3px solid var(--ae-success); }
.ae-toast--danger { border-left: 3px solid var(--ae-danger); }
@keyframes ae-toast-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
/* ---------- Пагинация ---------- */
.ae-pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .3em;
margin-top: var(--ae-gap-3);
}
.ae-pagination a, .ae-pagination span {
display: flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding-inline: .6em;
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius-sm);
color: var(--ae-text);
font-size: .9rem;
font-variant-numeric: tabular-nums;
}
.ae-pagination a:hover { border-color: var(--ae-primary); color: var(--ae-primary); }
.ae-pagination .is-current {
background: var(--ae-primary);
border-color: var(--ae-primary);
color: var(--ae-on-primary);
font-weight: 600;
}
.ae-pagination__info { margin-left: auto; font-size: .85rem; color: var(--ae-text-muted); }
/* ---------- Вкладки ----------
Полоса не переносится, а прокручивается: вкладок бывает шесть,
и вторая строка из одной «Вопросы и ответы» выглядит обрывком.
Активная подчёркнута линией, лежащей на самой границе, — так видно
связь заголовка с содержимым под ним. */
.ae-tabs {
display: flex;
gap: .2em;
margin-bottom: var(--ae-gap-3);
border-bottom: 1px solid var(--ae-border);
overflow-x: auto;
scrollbar-width: none;
}
.ae-tabs::-webkit-scrollbar { display: none; }
.ae-tabs button {
flex: none;
position: relative;
padding: .8em 1.1em;
margin-bottom: -1px;
border-bottom: 2px solid transparent;
color: var(--ae-text-muted);
font-weight: 600;
font-size: .94rem;
white-space: nowrap;
transition: color var(--ae-motion), border-color var(--ae-motion);
}
.ae-tabs button:hover { color: var(--ae-text); }
.ae-tabs button[aria-selected="true"] { color: var(--ae-text); border-bottom-color: var(--ae-primary); }
/* Счётчик у вкладки — метка, а не курсив посреди подписи. */
.ae-tabs button i {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5em;
margin-left: .4em;
padding: 0 .35em;
border-radius: var(--ae-radius-pill);
background: var(--ae-surface-2);
color: var(--ae-text-muted);
font-size: .72rem;
font-style: normal;
font-weight: 700;
line-height: 1.5em;
vertical-align: 1px;
}
.ae-tabs button[aria-selected="true"] i { background: var(--ae-primary); color: var(--ae-on-primary); }
.ae-tabpanel[hidden] { display: none; }
/* ---------- Пустое состояние ---------- */
.ae-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--ae-gap-2);
padding: var(--ae-gap-4) var(--ae-gap-2);
text-align: center;
color: var(--ae-text-muted);
}
.ae-empty svg { width: 56px; height: 56px; opacity: .4; }
/* ---------- Согласие под формой ----------
Свой класс, а не .ae-check от фильтра: тот рассчитан на строку списка
с ховером и отступами колонки, и в форме растягивает галочку на всю
ширину блока. */
.ae-consent {
display: flex;
align-items: flex-start;
gap: .55em;
margin: 0;
font-size: .8rem;
line-height: 1.45;
color: var(--ae-text-muted);
font-weight: 400;
cursor: pointer;
}
.ae-consent input { flex: none; margin-top: .25em; }
.ae-consent a { color: var(--ae-primary); text-decoration: underline; text-underline-offset: 2px; }
.ae-consent a:hover { text-decoration: none; }
/* ==================================================================
Флажок в строке списка.
Приехал из стилей фильтра, когда фильтр в теме заменили на
FilterTAP: разметку он больше не рисует, а флажок остался нужен
способу оплаты и сравнению товаров.
================================================================== */
/* ---------- Чекбокс ---------- */
.ae-check {
display: flex;
align-items: baseline;
gap: .55em;
padding: .3em 0;
font-size: .88rem;
cursor: pointer;
line-height: 1.35;
}
.ae-check input {
flex: none;
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--ae-primary);
align-self: center;
}
.ae-check span { flex: 1 1 auto; min-width: 0; }
.ae-check:hover span { color: var(--ae-primary); }
.ae-check__count {
font-style: normal;
font-size: .78rem;
color: var(--ae-text-muted);
font-variant-numeric: tabular-nums;
}
.ae-check:has(input:checked) span { font-weight: 600; }
/* ==================================================================
Шапка.
================================================================== */
.ae-header {
background: var(--ae-header-bg);
color: var(--ae-header-text);
border-bottom: 1px solid var(--ae-border);
position: relative;
z-index: 300;
}
.ae-header a { color: inherit; }
/* ------------------------------------------------------------------
Ряды и позиции.
Шапка собирается из блоков: ряд задаёт фон и высоту, позиция —
выравнивание. Разметка одинакова для любого состава, поэтому новый
блок не требует ни строчки нового CSS раскладки.
------------------------------------------------------------------ */
/* Ряд переносится, когда содержимому тесно: поиск, сжатый до обрубка,
читается хуже второй строки. */
.ae-hrow__inner {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--ae-gap-2);
}
.ae-hslot {
display: flex;
align-items: center;
gap: var(--ae-gap-1);
min-width: 0;
}
.ae-hslot--left { flex: 0 1 auto; min-width: 0; }
.ae-hslot--center { flex: 1 1 auto; justify-content: center; min-width: 0; }
/* Правая часть не сжимается. Внутри неё значки фиксированной ширины
с подписями в одну строку — «Товаров 2 (197 469 р.)» короче не
станет. Пока слот был сжимаемым, на 1024px он ужимался на 45px
меньше своего содержимого, и кнопка корзины вылезала за экран:
страница ездила вбок на всех разделах сразу. Сжимается поиск —
он для этого и тянется. */
.ae-hslot--right { flex: 0 0 auto; margin-left: auto; }
/* ---------- Служебная строка ---------- */
/*
Приглушённый текст внутри шапки берёт её собственный цвет с прозрачностью,
а не общий «приглушённый» из палитры страницы: на тёмной шапке серый
из светлой палитры превращается в тёмное по тёмному.
*/
.ae-header .ae-topbar,
.ae-header .ae-hphone__note,
.ae-header .ae-topbar a { color: color-mix(in srgb, var(--ae-header-text) 68%, transparent); }
.ae-topbar {
font-size: .82rem;
border-bottom: 1px solid var(--ae-border);
color: var(--ae-text-muted);
}
.ae-topbar .ae-hrow__inner { min-height: 38px; gap: var(--ae-gap-2); }
.ae-topbar .ae-hslot { gap: var(--ae-gap-2); }
.ae-topbar a:hover { color: var(--ae-primary); }
@media (max-width: 767px) {
.ae-topbar { display: none; }
}
/* ---------- Основная строка ---------- */
.ae-hrow--main .ae-hrow__inner { min-height: 72px; }
/* Название магазина бывает длинным: «Интернет-магазин такой-то,
официальный дилер». Без min-width: 0 такая ссылка — флекс-элемент,
который отказывается сжиматься, и на телефоне вся страница уезжает
вбок. Поэтому текст сжимается и переносится, а картинка — нет. */
.ae-logo {
display: flex;
align-items: center;
/*
Логотип не сжимается: в тесной строке место уступает меню,
а не имя магазина. Раньше здесь стояли min-width: 0
и overflow-wrap: anywhere, и в компактной шапке «Aero»
вставало в две строки — «Ae» и «ro».
*/
flex: none;
white-space: nowrap;
font-family: var(--ae-font-head);
font-weight: 700;
font-size: 1.25rem;
line-height: 1.15;
letter-spacing: -.02em;
}
.ae-logo img { height: var(--ae-logo-h); width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 575px) {
/*
Длинное название на телефоне обрезаем многоточием: это
читается как решение, а перенос посреди слова — как поломка.
*/
.ae-logo {
font-size: 1rem;
max-width: 46vw;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
}
/* ---------- Поиск ---------- */
/*
Поиск тянется и сжимается, но не ниже читаемого: строка в 150 пикселей
показывает «Поиск по ка…» и выглядит поломкой. Дойдя до предела, ряд
переносится — лучше вторая строка, чем обрубок.
*/
.ae-search {
flex: 1 1 260px;
min-width: 190px;
max-width: 620px;
position: relative;
}
.ae-search__form { display: flex; }
.ae-search__input {
flex: 1 1 auto;
min-width: 0;
padding: .65em 1em;
border: 1px solid var(--ae-border);
border-right: 0;
border-start-start-radius: var(--ae-radius-sm);
border-end-start-radius: var(--ae-radius-sm);
background: var(--ae-surface);
color: var(--ae-text);
}
.ae-search__input:focus { outline: 0; border-color: var(--ae-primary); }
.ae-search__btn {
display: flex;
align-items: center;
justify-content: center;
padding-inline: 1.15em;
background: var(--ae-primary);
color: var(--ae-on-primary);
border-start-end-radius: var(--ae-radius-sm);
border-end-end-radius: var(--ae-radius-sm);
}
.ae-search__btn:hover { background: var(--ae-primary-hover); color: var(--ae-on-primary); }
@media (max-width: 991px) {
.ae-hslot--center { order: 10; flex-basis: 100%; }
.ae-hrow--main .ae-hrow__inner { flex-wrap: wrap; min-height: 0; padding-block: var(--ae-gap-1); }
}
/* ---------- Контакт ---------- */
.ae-hphone { flex: none; text-align: right; line-height: 1.25; }
.ae-hphone__num { font-weight: 600; font-size: 1.05rem; white-space: nowrap; }
.ae-hphone__note { font-size: .76rem; color: var(--ae-text-muted); }
.ae-hphone__call {
font-size: .76rem;
color: var(--ae-primary);
border-bottom: 1px dashed currentColor;
line-height: 1.2;
background: none;
border-width: 0 0 1px;
padding: 0;
cursor: pointer;
}
.ae-hphone__call:hover { color: var(--ae-primary-dark, var(--ae-primary)); }
/*
На планшете остаётся номер, а подпись под ним уходит: две строки
в шапке съедают высоту, а телефон нужен. Прежде здесь пряталось всё
целиком, и на всём, что уже планшета, шапка оставалась без телефона —
включая мобильную, где звонок и есть главный способ связи.
Что показывать на телефоне — номер, значок трубки или ничего —
решает настройка «Телефон в шапке на телефоне».
*/
@media (max-width: 1199px) {
.ae-hphone__note { display: none; }
}
/* ---------- Значки действий ---------- */
.ae-actions { display: flex; align-items: center; gap: var(--ae-gap-1); flex: none; margin-left: auto; }
.ae-action {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
min-width: 52px;
padding: .4em .35em;
border-radius: var(--ae-radius-sm);
font-size: .7rem;
color: inherit;
transition: background-color .15s;
}
.ae-action:hover { background: var(--ae-surface-2); color: inherit; }
.ae-action svg { width: 22px; height: 22px; }
.ae-action__label { white-space: nowrap; }
.ae-action__count {
position: absolute;
top: .1em;
right: .35em;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: var(--ae-radius-pill);
background: var(--ae-sale);
color: #fff;
font-size: .65rem;
font-weight: 700;
line-height: 17px;
text-align: center;
}
.ae-action__count:empty, .ae-action__count[data-count="0"] { display: none; }
@media (max-width: 575px) {
.ae-action__label { display: none; }
.ae-action { min-width: 40px; }
}
/* ---------- Переключатель темы ---------- */
.ae-theme-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--ae-radius-sm);
color: inherit;
}
.ae-theme-toggle:hover { background: var(--ae-surface-2); }
.ae-theme-toggle svg { width: 19px; height: 19px; }
.ae-theme-toggle__moon { display: none; }
:root[data-theme="dark"] .ae-theme-toggle__sun { display: none; }
:root[data-theme="dark"] .ae-theme-toggle__moon { display: block; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .ae-theme-toggle__sun { display: none; }
:root:not([data-theme="light"]) .ae-theme-toggle__moon { display: block; }
}
/* ---------- Строка меню ---------- */
.ae-navbar { border-top: 1px solid var(--ae-border); }
.ae-nav {
display: flex;
align-items: stretch;
gap: 2px;
overflow-x: auto;
scrollbar-width: none;
}
.ae-nav::-webkit-scrollbar { display: none; }
/*
На широком экране строка меню не прокручивается: лишние пункты
уходят в «Ещё», для этого и задаётся их число. Зато прокрутка
обрезала выпадающие списки — «overflow-x: auto» по правилам
включает обрезку и по вертикали, а список висит ниже строки.
*/
@media (min-width: 992px) {
.ae-nav { overflow: visible; flex-wrap: wrap; }
}
.ae-nav > li { position: relative; }
.ae-nav > li > a {
display: flex;
align-items: center;
height: 46px;
padding-inline: .9em;
font-weight: 500;
white-space: nowrap;
border-bottom: 2px solid transparent;
}
.ae-nav > li > a:hover { color: var(--ae-primary); border-bottom-color: var(--ae-primary); }
.ae-nav__drop {
position: absolute;
top: 100%;
left: 0;
z-index: 320;
min-width: 230px;
padding: .4em 0;
background: var(--ae-surface);
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius-sm);
box-shadow: var(--ae-shadow-3);
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity .15s, transform .15s, visibility .15s;
}
.ae-nav > li:hover > .ae-nav__drop,
.ae-nav > li:focus-within > .ae-nav__drop {
opacity: 1;
visibility: visible;
transform: none;
}
.ae-nav__drop a { display: block; padding: .5em 1.1em; }
.ae-nav__drop a:hover { background: var(--ae-surface-2); color: var(--ae-primary); }
@media (max-width: 991px) {
.ae-navbar { display: none; }
/*
Меню можно положить не в свою строку, а в главную — так
собрана компактная шапка. Обёртки .ae-navbar у него тогда нет,
а прятать на узком экране всё равно надо: там его место
занимает кнопка-бургер, а сам список не помещается по ширине
и молча обрезается.
Ящик мобильного меню лежит в body, а не в шапке, поэтому
его это правило не задевает.
*/
.ae-header .ae-nav-wrap { display: none; }
}
/* ---------- Прилипание ---------- */
.ae-header.is-sticky {
position: sticky;
top: 0;
}
.ae-header.is-compact .ae-topbar { display: none; }
.ae-header.is-compact .ae-hrow--main .ae-hrow__inner { min-height: 58px; }
/* ---------- Кнопка мобильного меню ---------- */
.ae-burger {
display: none;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: var(--ae-radius-sm);
flex: none;
}
.ae-burger:hover { background: var(--ae-surface-2); }
.ae-burger svg { width: 22px; height: 22px; }
@media (max-width: 991px) {
.ae-burger { display: flex; }
}
/* ---------- Мобильное меню ---------- */
.ae-drawer {
position: fixed;
inset: 0 auto 0 0;
z-index: 1100;
width: min(88vw, 360px);
background: var(--ae-surface);
transform: translateX(-100%);
transition: transform .22s ease;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.ae-drawer.is-open { transform: none; }
.ae-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ae-gap-2);
padding: var(--ae-gap-2);
border-bottom: 1px solid var(--ae-border);
}
.ae-drawer__body { padding: var(--ae-gap-1) 0; }
/* Строкой, а не блоком: у своих пунктов меню есть значок, и при
display:block он переносится на строку выше названия. */
.ae-drawer a { display: flex; align-items: center; gap: .1em; padding: .7em var(--ae-gap-2); color: var(--ae-text); }
.ae-drawer a:hover { background: var(--ae-surface-2); }
.ae-drawer__sub a { padding-left: calc(var(--ae-gap-2) * 2); font-size: .92em; color: var(--ae-text-muted); }
.ae-overlay {
position: fixed;
inset: 0;
z-index: 1050;
background: rgba(0, 0, 0, .5);
opacity: 0;
visibility: hidden;
transition: opacity .22s, visibility .22s;
}
.ae-overlay.is-open { opacity: 1; visibility: visible; }
/* ==================================================================
Шапка на телефоне.
Внизу экрана уже стоит панель с каталогом, поиском, избранным,
корзиной и кабинетом. Те же значки в шапке — это второй экземпляр
того же меню: девять элементов в ряд, три строки и 182 пикселя
высоты, из которых половина повторяет нижнюю панель.
Поэтому при включённой нижней панели шапка оставляет только то,
чего в панели нет: логотип, телефон и кнопку меню. Если панель
выключена настройкой, шапка остаётся полной — уносить навигацию
в никуда нельзя.
================================================================== */
@media (max-width: 767px) {
body:has(.ae-tabbar.is-on) .ae-hrow--main .ae-action,
body:has(.ae-tabbar.is-on) .ae-hrow--main .ae-cart-wrap,
body:has(.ae-tabbar.is-on) .ae-hrow--main .ae-theme-toggle,
body:has(.ae-tabbar.is-on) .ae-hrow--main .ae-hslot--center:has(.ae-search:not(.ae-search--icon)) {
display: none;
}
/*
Слоты растворяются, чтобы их содержимое встало одной строкой:
конструктор шапки собран под широкий экран, а на телефоне порядок
другой — логотип слева, кнопка меню у правого края, между ними
телефон. Держать ради этого отдельный мобильный конструктор
значит заставить владельца магазина собирать шапку дважды.
*/
.ae-hrow--main .ae-hslot { display: contents; }
.ae-hrow--main .ae-hrow__inner {
flex-wrap: nowrap;
min-height: 56px;
gap: .5em;
}
/* Логотип забирает свободное место и отодвигает остальное вправо. */
.ae-hrow--main .ae-logo {
order: 1;
margin-right: auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ae-hrow--main .ae-logo img { max-height: 34px; width: auto; }
.ae-hrow--main .ae-hphone { order: 2; flex: none; }
.ae-hrow--main .ae-search--icon { order: 3; }
/* Кнопка меню — последней, у самого края: большой палец достаёт
до угла, а взгляд не ищет её среди прочего. */
.ae-hrow--main .ae-burger {
order: 4;
display: flex;
flex: none;
margin-left: 0;
}
.ae-catalog-btn { display: none; }
/* Подпись под номером на телефоне не читается и только шумит. */
.ae-hphone__note,
.ae-hphone__call { display: none; }
/* Что показывать вместо номера — решает настройка. */
.ae-hphone.is-m-icon .ae-hphone__num { display: none; }
.ae-hphone.is-m-off { display: none; }
.ae-hphone__num { font-size: .95rem; white-space: nowrap; }
}
/* Значок трубки живёт только на телефоне: на широком экране номер
виден целиком и прятать его не за чем. */
.ae-hphone__icon { display: none; }
@media (max-width: 767px) {
.ae-hphone.is-m-icon .ae-hphone__icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--ae-radius-sm);
color: inherit;
}
.ae-hphone.is-m-icon .ae-hphone__icon:hover { color: var(--ae-primary); }
}
/* ---------- Ссылки на страницы ----------
Блок конструктора шапки: доставка, оплата, о магазине. Строкой,
а не списком: в служебной строке он стоит рядом с языком и валютой,
и столбик там смотрелся бы обрывком меню. */
.ae-toplinks {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ae-gap-2);
min-width: 0;
}
.ae-toplinks a {
color: inherit;
white-space: nowrap;
}
.ae-toplinks a:hover { color: var(--ae-primary); }
/* На телефоне служебная строка и так тесная: показываем сколько
помещается, остальное уезжает прокруткой, а не переносом в три
этажа. */
@media (max-width: 575px) {
.ae-topbar .ae-toplinks {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
.ae-topbar .ae-toplinks::-webkit-scrollbar { display: none; }
}
/* ==================================================================
Мегаменю каталога.
Выпадающий блок раскрывается на всю ширину контейнера. Он не влияет
на поток страницы и не меняет её высоту — только видимость и сдвиг,
поэтому раскрытие не даёт сдвига макета.
================================================================== */
.ae-nav > li.has-children > a { gap: .35em; }
.ae-nav__chevron { transition: transform .18s; }
.ae-nav__icon { flex: none; width: 16px; height: 16px; margin-right: .4em; vertical-align: -2px; }
.ae-drawer .ae-nav__icon { margin-right: .5em; }
.ae-nav > li:hover > a .ae-nav__chevron { transform: rotate(180deg); }
/*
Закрытая панель — нулевой ширины, а не просто невидимая.
position: absolute не выводит элемент из потока целиком: правый край,
закреплённый в left:0/right:0, всё равно растягивает прокручиваемую
область страницы, даже пока сама панель visibility:hidden. Пункт
меню обычно стоит не у левого края шапки, поэтому невидимая панель
во всю ширину контейнера вылезала за экран и добавляла сайту
горизонтальную прокрутку — на каждой странице, для каждого
посетителя, независимо от того, наводили курсор на меню или нет.
right: auto и width: 0 держат закрытую панель без ширины; открытие
возвращает right вместе с непрозрачностью одним и тем же прыжком —
он происходит в момент начала перехода, а не посреди него, поэтому
незаметен.
*/
.ae-mega {
position: absolute;
top: 100%;
left: 0;
right: auto;
width: 0;
overflow: hidden;
z-index: 320;
padding-top: 2px;
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity .16s, transform .16s, visibility .16s;
}
.ae-nav > li:hover > .ae-mega,
.ae-nav > li:focus-within > .ae-mega {
right: 0;
width: auto;
overflow: visible;
opacity: 1;
visibility: visible;
transform: none;
}
/* Ширина блока — настройка, а не константа.
Магазину с деревом на сотни категорий нужна вся ширина контейнера.
Магазину с тремя подкатегориями такой блок только мешает: половина
пустая, а глаз всё равно ищет содержимое под своим пунктом.
Режим задаётся атрибутом на строке меню, а не отдельным набором
правил на каждый вид. */
.ae-navbar { position: relative; }
/*
Мега-панель растягивается на всю ширину строки, поэтому её пункт
не должен быть точкой отсчёта — иначе панель прижмётся к пункту.
А маленький список «Ещё» отсчитываться от пункта обязан: со «static»
он вставал по left: 0 всей строки, то есть у левого края экрана,
за десяток пунктов от того, на который навели.
*/
.ae-nav > li { position: static; }
/*
Любой пункт с обычным выпадающим списком отсчитывается от себя.
Статичным пункт сделан выше ради мега-панели во всю ширину строки,
и простой список это правило задевало заодно: он вставал по left: 0
всей строки меню, то есть у левого края экрана, за несколько пунктов
от того, на который навели, — и до его ссылок нельзя было дойти
мышью. Класса has-drop простое меню темы на пунктах не ставит,
поэтому спрашиваем не про класс, а про наличие самого списка.
*/
.ae-nav > li.has-drop,
.ae-nav > li:has(> .ae-nav__drop) { position: relative; }
/* «Ещё» стоит в конце строки, и список у левого края пункта вылезал бы
за экран. Прижимаем к правому. */
.ae-nav > li.has-drop > .ae-nav__drop { left: auto; right: 0; }
/* По содержимому: блок начинается от своего пункта и растёт вправо. */
.ae-nav-wrap[data-width="content"] .ae-nav > li,
.ae-nav-wrap[data-width="item"] .ae-nav > li { position: relative; }
/*
min-width/width здесь — тоже размер открытой панели, а не спокойно
живущий сам по себе стиль: без :hover эти два варианта возвращали
точно ту же беду, что общее правило .ae-mega выше — невидимая панель
во всю содержимую ширину, растягивающая прокрутку страницы. Ширина
только у открытого состояния, закрытое остаётся нулевым.
*/
.ae-nav-wrap[data-width="content"] .ae-mega { right: auto; }
.ae-nav-wrap[data-width="content"] .ae-nav > li:hover > .ae-mega,
.ae-nav-wrap[data-width="content"] .ae-nav > li:focus-within > .ae-mega {
min-width: 100%;
/* Потолок ширины — настроенное число колонок, а не круглое число
пикселей: иначе «две колонки» рисовались бы в блоке на четыре. */
max-width: min(92vw, calc(var(--ae-mega-cols, 4) * 270px + var(--ae-mega-extra, 0px)));
width: max-content;
}
/* По ширине пункта: узкий столбец строго под названием. */
.ae-nav-wrap[data-width="item"] .ae-mega { right: auto; }
.ae-nav-wrap[data-width="item"] .ae-nav > li:hover > .ae-mega,
.ae-nav-wrap[data-width="item"] .ae-nav > li:focus-within > .ae-mega {
min-width: max(220px, 100%);
width: max-content;
max-width: min(92vw, 420px);
}
.ae-nav-wrap[data-width="item"] .ae-mega__cols { grid-template-columns: minmax(0, 1fr); }
.ae-nav-wrap[data-width="item"] .ae-mega__inner:has(.ae-mega__side) { grid-template-columns: minmax(0, 1fr); }
/* Выравнивание по центру строки — для меню из двух-трёх пунктов,
где блок у левого края выглядит съехавшим. */
.ae-nav-wrap[data-align="center"] .ae-mega {
left: 50%;
transform: translate(-50%, 4px);
}
.ae-nav-wrap[data-align="center"] .ae-nav > li:hover > .ae-mega,
.ae-nav-wrap[data-align="center"] .ae-nav > li:focus-within > .ae-mega {
transform: translate(-50%, 0);
}
/* Скруглять сверху нужно только у блока, который оторвался от края. */
.ae-nav-wrap:not([data-width="container"]) .ae-mega__inner { border-radius: var(--ae-radius); }
.ae-mega__inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--ae-gap-3);
padding: var(--ae-gap-3);
background: var(--ae-surface);
border: 1px solid var(--ae-border);
border-radius: 0 0 var(--ae-radius) var(--ae-radius);
box-shadow: var(--ae-shadow-3);
max-height: min(70vh, 640px);
overflow-y: auto;
}
.ae-mega__inner:has(.ae-mega__side) { grid-template-columns: minmax(0, 1fr) 220px; }
/*
В узкой панели колонка брендов уезжает вниз.
Панель у крайних пунктов меню ужата под остаток экрана, а боковая
колонка забирает из неё 220 пикселей независимо от того, сколько
всего осталось, — на список категорий не оставалось ничего.
Метку ставит скрипт, а не запрос к контейнеру: container-type
включает сжатие по ширине, и панель перестаёт подбирать размер
под содержимое — все панели схлопываются до минимума.
*/
.ae-mega.is-narrow .ae-mega__inner:has(.ae-mega__side) { grid-template-columns: minmax(0, 1fr); }
.ae-mega.is-narrow .ae-mega__side {
padding-left: 0;
padding-top: var(--ae-gap-2);
border-left: 0;
border-top: 1px solid var(--ae-border);
}
/*
Колонок столько, сколько поместится, но не больше настроенного.
Жёсткое число колонок делит любую ширину поровну, включая ту,
которой не хватает: у пунктов ближе к правому краю панель уже
сжата под остаток экрана, и четыре колонки в ней становились
по сотне пикселей. Значок раздела в колонку не влезал, название
налезало на соседнюю, счётчик товаров садился поверх чужой
картинки.
Теперь у колонки есть минимальная ширина, и она не крошится.
Минимум задан прямой величиной, а не через min() с процентами:
при подборе размера по содержимому проценты считать не от чего,
и браузер их отбрасывал — панель выходила уже, чем нужно сетке,
а сетка вылезала за её край.
А сколько колонок поместится, знает только браузер — ширина
панели зависит от того, сколько места осталось справа от пункта.
Поэтому число колонок подбирает тот же скрипт, что вписывает
панель в экран, а настройка служит потолком.
*/
.ae-mega__cols {
display: grid;
grid-template-columns: repeat(var(--ae-mega-cols, 4), minmax(var(--ae-mega-colw, 190px), 1fr));
gap: var(--ae-gap-2) var(--ae-gap-3);
align-content: start;
}
.ae-mega__col { min-width: 0; }
.ae-mega__head {
display: flex;
align-items: center;
gap: .5em;
margin-bottom: .5em;
font-weight: 600;
font-size: .94rem;
line-height: 1.3;
color: var(--ae-text);
}
.ae-mega__head:hover { color: var(--ae-primary); }
.ae-mega__head img {
width: 34px;
height: 34px;
object-fit: contain;
border-radius: var(--ae-radius-sm);
background: var(--ae-surface-2);
flex: none;
}
.ae-mega__list { display: flex; flex-direction: column; gap: .18em; }
.ae-mega__list a {
display: flex;
align-items: baseline;
gap: .4em;
padding: .18em 0;
font-size: .87rem;
color: var(--ae-text-muted);
}
.ae-mega__list a:hover { color: var(--ae-primary); }
.ae-mega__more { font-weight: 600; color: var(--ae-primary) !important; }
.ae-mega__count {
font-style: normal;
font-size: .74rem;
color: var(--ae-text-muted);
font-variant-numeric: tabular-nums;
opacity: .75;
}
.ae-mega__side {
padding-left: var(--ae-gap-3);
border-left: 1px solid var(--ae-border);
}
.ae-mega__side-title {
margin-bottom: .6em;
font-size: .78rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ae-text-muted);
}
@media (max-width: 991px) {
.ae-mega { display: none; }
}
/* ---------- Кнопка каталога рядом с логотипом ---------- */
.ae-catalog-btn {
display: none;
align-items: center;
gap: .55em;
padding: .62em 1.1em;
border-radius: var(--ae-radius-sm);
background: var(--ae-primary);
color: var(--ae-on-primary);
font-weight: 600;
font-size: .94rem;
flex: none;
}
.ae-catalog-btn:hover { background: var(--ae-primary-hover); color: var(--ae-on-primary); }
.ae-catalog-btn svg { width: 18px; height: 18px; }
@media (min-width: 992px) {
/* Кнопка каталога появляется, только если блок поставлен в шапку. */
.ae-catalog-btn { display: inline-flex; }
}
/* ---------- Кнопка раскрытия в мобильном меню ---------- */
.ae-drawer__toggle {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: .5em;
padding: .7em var(--ae-gap-2);
text-align: left;
color: var(--ae-text);
}
.ae-drawer__toggle:hover { background: var(--ae-surface-2); }
.ae-drawer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.ae-drawer__toggle svg { transition: transform .18s; flex: none; }
/* ---------- Нижняя панель на мобильном ---------- */
.ae-tabbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 800;
display: none;
background: var(--ae-surface);
border-top: 1px solid var(--ae-border);
padding-bottom: env(safe-area-inset-bottom);
}
/* Число кнопок задаётся настройкой, поэтому колонок столько, сколько
пришло, и каждая обязана сжиматься: пять несжимаемых кнопок с длинными
подписями распирали страницу на телефоне. */
.ae-tabbar__row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
}
.ae-tabbar a, .ae-tabbar button {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 2px;
min-width: 0;
padding: .5em .2em;
font-size: .66rem;
line-height: 1.2;
color: var(--ae-text-muted);
}
/* Подпись в одну строку с многоточием: перенос делает панель выше
у одной кнопки и ниже у остальных. */
.ae-tabbar a > span:last-child,
.ae-tabbar button > span:last-child {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ae-tabbar svg { width: 21px; height: 21px; }
.ae-tabbar a:hover, .ae-tabbar button:hover { color: var(--ae-primary); }
.ae-tabbar .ae-action__count { top: .15em; right: 50%; margin-right: -22px; }
@media (max-width: 991px) {
.ae-tabbar.is-on { display: block; }
body:has(.ae-tabbar.is-on) { padding-bottom: 62px; }
}
/* Меню занимает свою строку целиком. */
.ae-nav-wrap { flex: 1 1 auto; min-width: 0; }
/* Подпись раздела в выдвижном меню: панель служит и каталогом,
и меню сайта, и без границы между ними список читается как один
длинный перечень. */
.ae-drawer__label {
padding: var(--ae-gap-2) var(--ae-gap-2) .4em;
color: var(--ae-text-muted);
font-size: .72rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.ae-drawer__label:not(:first-child) {
margin-top: .3em;
border-top: 1px solid var(--ae-border);
padding-top: var(--ae-gap-2);
}
/* ==================================================================
Подсказки живого поиска.
================================================================== */
.ae-search { position: relative; }
.ae-suggest {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 420;
max-height: min(70vh, 520px);
overflow-y: auto;
background: var(--ae-surface);
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius);
box-shadow: var(--ae-shadow-3);
padding: .35em 0;
}
.ae-suggest__group { padding: .3em 0; }
.ae-suggest__group + .ae-suggest__group { border-top: 1px solid var(--ae-border); }
/* Категории и бренды: компактной строкой. */
.ae-suggest__link {
display: flex;
align-items: center;
gap: .6em;
padding: .5em var(--ae-gap-2);
color: var(--ae-text);
font-size: .9rem;
}
.ae-suggest__link svg { color: var(--ae-text-muted); flex: none; }
.ae-suggest__link:hover,
.ae-suggest__link:focus-visible { background: var(--ae-surface-2); color: var(--ae-primary); }
/* Товары: с картинкой и ценой. */
.ae-suggest__item {
display: flex;
align-items: center;
gap: .7em;
padding: .5em var(--ae-gap-2);
color: var(--ae-text);
}
.ae-suggest__item:hover,
.ae-suggest__item:focus-visible { background: var(--ae-surface-2); }
.ae-suggest__item img,
.ae-suggest__nopic {
width: 44px;
height: 44px;
flex: none;
object-fit: contain;
border-radius: var(--ae-radius-sm);
background: var(--ae-surface-2);
}
.ae-suggest__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: .15em; min-width: 0; }
.ae-suggest__name {
font-size: .89rem;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ae-suggest__price { font-size: .85rem; font-variant-numeric: tabular-nums; }
.ae-suggest__price b { font-weight: 700; color: var(--ae-price); }
.ae-suggest__price s { color: var(--ae-price-old); margin-left: .3em; font-size: .9em; }
.ae-suggest__price .ae-sale { color: var(--ae-sale); }
.ae-suggest__all {
display: block;
margin-top: .3em;
padding: .7em var(--ae-gap-2);
border-top: 1px solid var(--ae-border);
text-align: center;
font-weight: 600;
font-size: .88rem;
color: var(--ae-primary);
}
.ae-suggest__all:hover { background: var(--ae-surface-2); }
.ae-suggest__empty {
padding: var(--ae-gap-3) var(--ae-gap-2);
text-align: center;
font-size: .88rem;
color: var(--ae-text-muted);
}
/* ==================================================================
Поиск значком.
Шапка остаётся свободной под логотип, меню и телефон, а поиск
открывается окном сверху. На телефоне это единственный способ
уместить в одну строку логотип, каталог, поиск и корзину.
================================================================== */
.ae-search--icon { flex: 0 0 auto; min-width: 0; max-width: none; }
.ae-search__open {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: var(--ae-radius-sm);
background: none;
color: inherit;
cursor: pointer;
}
.ae-search__open:hover { color: var(--ae-primary); }
/* Окно поиска. Прижато к верху, а не по центру: набирают сразу,
и поле должно оказаться под пальцем, а не в середине экрана. */
.ae-search--icon .ae-search__box {
position: fixed;
inset: 0 0 auto;
z-index: 1210;
display: flex;
align-items: center;
gap: var(--ae-gap-2);
padding: var(--ae-gap-2) var(--ae-gap-3);
background: var(--ae-surface);
border-bottom: 1px solid var(--ae-border);
box-shadow: var(--ae-shadow-2);
animation: ae-search-drop .18s ease;
}
.ae-search--icon .ae-search__box[hidden] { display: none; }
.ae-search--icon .ae-search__form {
flex: 1 1 auto;
min-width: 0;
max-width: 760px;
margin: 0 auto;
}
.ae-search__close {
flex: none;
order: 2;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: var(--ae-radius-sm);
background: none;
color: var(--ae-text-muted);
cursor: pointer;
}
.ae-search__close:hover { color: var(--ae-text); }
/* Подсказки живут под полем и внутри окна: у окна свой слой,
и всплывающий список должен подниматься вместе с ним. */
.ae-search--icon .ae-suggest {
top: calc(100% + var(--ae-gap-2));
left: var(--ae-gap-3);
right: var(--ae-gap-3);
z-index: 1211;
}
@keyframes ae-search-drop {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.ae-search--icon .ae-search__box { animation: none; }
}
/* ==================================================================
Подвал.
================================================================== */
.ae-footer {
margin-top: var(--ae-gap-4);
background: var(--ae-footer-bg);
color: var(--ae-footer-text);
padding-block: var(--ae-gap-4) var(--ae-gap-3);
}
.ae-footer a { color: var(--ae-footer-text); }
.ae-footer a:hover { color: #fff; }
/* Ряд подвала: колонок столько, сколько реально заполнено. */
.ae-footer__row {
display: grid;
gap: var(--ae-gap-3);
grid-template-columns: minmax(0, 1fr);
}
.ae-footer__col { display: flex; flex-direction: column; gap: var(--ae-gap-2); min-width: 0; }
@media (min-width: 576px) {
.ae-footer__row { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
.ae-footer__row { grid-template-columns: repeat(var(--ae-fcols, 4), 1fr); }
}
/* Нижняя строка прижимается к краям и отделяется линией. */
.ae-footer__row--bottom {
margin-top: var(--ae-gap-4);
padding-top: var(--ae-gap-2);
border-top: 1px solid rgba(255, 255, 255, .12);
font-size: .84rem;
opacity: .8;
align-items: center;
}
/* Прижимается вправо только вторая колонка. Если владелец магазина
оставил в нижней строке один блок — копирайт без способов оплаты, —
он остаётся единственным, и правый край выглядел бы промахом
вёрстки, а не решением. */
.ae-footer__row--bottom .ae-footer__col:last-child:not(:only-child) { align-items: flex-end; }
@media (max-width: 575px) {
.ae-footer__row--bottom .ae-footer__col:last-child { align-items: flex-start; }
}
.ae-footer__title {
margin: 0 0 var(--ae-gap-2);
font-size: .95rem;
font-weight: 600;
color: #fff;
text-transform: var(--ae-head-transform);
letter-spacing: .01em;
}
.ae-footer__list { display: flex; flex-direction: column; gap: .5em; font-size: .92rem; }
.ae-footer__about { font-size: .9rem; line-height: 1.6; opacity: .9; }
.ae-footer__contact { display: flex; flex-direction: column; gap: .55em; font-size: .92rem; }
.ae-footer__phone { font-size: 1.15rem; font-weight: 600; color: #fff; }
.ae-socials { display: flex; flex-wrap: wrap; gap: .5em; margin-top: var(--ae-gap-2); }
.ae-socials a {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--ae-radius-sm);
background: rgba(255, 255, 255, .09);
transition: background-color .15s;
}
.ae-socials a:hover { background: var(--ae-primary); }
.ae-socials svg { width: 19px; height: 19px; }
.ae-payments { display: flex; flex-wrap: wrap; align-items: center; gap: .45em; }
/* Одна плашка и под надпись, и под логотип: смешанный набор — норма,
у части систем логотип есть, у части только название. */
.ae-payments__item {
display: inline-flex;
align-items: center;
gap: .4em;
height: 28px;
padding-inline: .7em;
border-radius: 4px;
background: rgba(255, 255, 255, .09);
color: inherit;
}
a.ae-payments__item:hover { background: rgba(255, 255, 255, .16); }
.ae-payments__icon { width: 24px; height: 16px; object-fit: contain; }
.ae-payments__name { font-size: .72rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
/* ---------- Кнопка наверх ---------- */
.ae-totop {
position: fixed;
right: var(--ae-gap-2);
bottom: var(--ae-gap-3);
z-index: 900;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--ae-radius-pill);
background: var(--ae-primary);
color: var(--ae-on-primary);
box-shadow: var(--ae-shadow-accent);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity .2s, transform .2s, visibility .2s;
}
.ae-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.ae-totop:hover { background: var(--ae-primary-hover); color: var(--ae-on-primary); }
.ae-totop svg { width: 20px; height: 20px; }
/* ---------- Уведомление о cookie ---------- */
.ae-cookie {
position: fixed;
left: var(--ae-gap-2);
right: var(--ae-gap-2);
bottom: var(--ae-gap-2);
z-index: 950;
max-width: 560px;
margin-inline: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ae-gap-2);
padding: var(--ae-gap-2);
background: var(--ae-surface);
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius);
box-shadow: var(--ae-shadow-4);
font-size: .88rem;
}
.ae-cookie p { flex: 1 1 240px; margin: 0; }
/* ---------- Подписка в подвале ---------- */
.ae-subscribe { display: flex; gap: .4em; }
.ae-subscribe .ae-input {
flex: 1 1 auto;
min-width: 0;
background: rgba(255, 255, 255, .08);
border-color: rgba(255, 255, 255, .16);
color: inherit;
}
.ae-subscribe .ae-input::placeholder { color: currentColor; opacity: .55; }
/* ---------- Плавающая кнопка звонка ---------- */
.ae-callbtn {
position: fixed;
right: var(--ae-gap-2);
bottom: calc(var(--ae-gap-3) + 56px);
z-index: 900;
display: flex;
align-items: center;
gap: .5em;
padding: .7em 1.1em;
border-radius: var(--ae-radius-pill);
background: var(--ae-primary);
color: var(--ae-on-primary);
font-weight: 600;
font-size: .88rem;
box-shadow: var(--ae-shadow-accent);
transition: background-color .15s, transform .15s;
}
.ae-callbtn:hover { background: var(--ae-primary-hover); color: var(--ae-on-primary); transform: translateY(-1px); }
.ae-callbtn svg { width: 18px; height: 18px; }
/* На мобильном оставляем только значок: подпись перекрывает контент. */
@media (max-width: 767px) {
.ae-callbtn { padding: .8em; bottom: calc(70px + env(safe-area-inset-bottom)); }
.ae-callbtn span { display: none; }
}
/* Отметка о непроверенной лицензии: спокойная, без крика. Она адресована
владельцу магазина, а не покупателю, и мешать покупателю не должна. */
.ae-unlicensed {
display: inline-block;
margin-left: .8em;
padding: .1em .6em;
border-radius: 4px;
background: rgba(255, 255, 255, .1);
font-size: .72rem;
opacity: .65;
}
/* ==================================================================
Промо-блоки.
Плитка — это фон, поверх которого лежит текст. Фоном может быть
картинка, цвет или и то и другое; текст прижимается к любому
из шести углов, а его цвет выбирается под фон.
Ширина и высота плитки задаются в колонках сетки, а не пикселями:
так мозаика перестраивается сама, когда колонок становится меньше.
================================================================== */
.ae-promo {
display: grid;
gap: var(--ae-gap-2);
grid-template-columns: repeat(var(--ae-promo-cols, 3), minmax(0, 1fr));
}
/* На планшете плиток в ряду вдвое меньше, на телефоне — одна:
промо в четверть экрана не читается ни на каком макете. */
@media (max-width: 991px) {
.ae-promo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
.ae-promo { grid-template-columns: minmax(0, 1fr); }
}
.ae-promo__tile {
position: relative;
display: flex;
overflow: hidden;
min-width: 0;
padding: var(--ae-gap-3);
border-radius: var(--ae-card-radius);
background: var(--ae-promo-bg, var(--ae-surface-2));
color: inherit;
isolation: isolate;
transition: transform var(--ae-motion), box-shadow var(--ae-motion);
}
/* Пропорции держит псевдоэлемент, а не aspect-ratio на самой плитке:
плитке нужно уметь тянуться под текст, когда пропорции не заданы. */
.ae-promo__tile::before {
content: "";
float: left;
padding-top: calc(100% / var(--ae-promo-ratio, 1.5));
}
.ae-promo:not([style*="--ae-promo-ratio"]) .ae-promo__tile::before { content: none; }
/* Ширина уже ограничена числом колонок на сервере: span принимает
целое число, и посчитать минимум прямо здесь нечем. */
.ae-promo__tile {
grid-column: span var(--ae-promo-span, 1);
grid-row: span var(--ae-promo-rows, 1);
}
@media (max-width: 575px) {
/* В одну колонку растягивать нечего, а двойная высота на телефоне
съедает весь экран. */
.ae-promo__tile { grid-column: span 1; grid-row: span 1; }
}
.ae-promo__img {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .45s ease;
}
/* Затемнение включается только когда задано: на светлой картинке
с тёмным текстом оно лишнее. */
.ae-promo__tile::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, var(--ae-promo-veil, 0)));
pointer-events: none;
}
.ae-promo__body {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .35em;
max-width: 30ch;
min-width: 0;
}
/* Шесть положений текста. Горизонталь задаётся выравниванием самой
плитки, вертикаль — её содержимого. */
.ae-promo__tile.is-tl, .ae-promo__tile.is-tc { align-items: flex-start; }
.ae-promo__tile.is-cl, .ae-promo__tile.is-cc { align-items: center; }
.ae-promo__tile.is-bl, .ae-promo__tile.is-bc { align-items: flex-end; }
.ae-promo__tile.is-tl, .ae-promo__tile.is-cl, .ae-promo__tile.is-bl { justify-content: flex-start; }
.ae-promo__tile.is-tc, .ae-promo__tile.is-cc, .ae-promo__tile.is-bc { justify-content: center; }
.ae-promo__tile.is-tc .ae-promo__body,
.ae-promo__tile.is-cc .ae-promo__body,
.ae-promo__tile.is-bc .ae-promo__body { align-items: center; text-align: center; }
.ae-promo__tile.is-ink-light { color: #fff; }
.ae-promo__tile.is-ink-dark { color: var(--ae-text); }
.ae-promo__eyebrow {
font-size: .74rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
opacity: .85;
}
.ae-promo__title {
font-family: var(--ae-font-head);
font-size: clamp(1.05rem, 1.6vw, 1.5rem);
font-weight: 700;
line-height: 1.2;
text-wrap: balance;
}
.ae-promo__text { font-size: .9rem; line-height: 1.45; opacity: .9; }
.ae-promo__btn {
display: inline-flex;
align-items: center;
gap: .4em;
margin-top: .4em;
padding: .5em 1.1em;
border: 1px solid transparent;
border-radius: var(--ae-btn-radius);
font-size: .88rem;
font-weight: var(--ae-btn-weight);
text-transform: var(--ae-btn-transform);
letter-spacing: var(--ae-btn-spacing);
}
.ae-promo__btn--solid { background: var(--ae-primary); border-color: var(--ae-primary); color: var(--ae-on-primary); }
.ae-promo__btn--outline { border-color: currentColor; }
/* Ссылка со стрелкой отступов не занимает: она читается как часть
текста, а не как отдельная кнопка. */
.ae-promo__btn--link { padding: 0; border: 0; text-decoration: underline; text-underline-offset: 3px; }
/* ---------- Поведение при наведении ---------- */
.ae-promo.is-hover-zoom .ae-promo__tile:hover .ae-promo__img,
.ae-promo.is-hover-both .ae-promo__tile:hover .ae-promo__img { transform: scale(1.06); }
.ae-promo.is-hover-lift .ae-promo__tile:hover,
.ae-promo.is-hover-both .ae-promo__tile:hover {
transform: translateY(var(--ae-card-lift, -3px));
box-shadow: var(--ae-card-hover-shadow);
}
/* ---------- Мозаика ---------- */
/* Первая плитка крупная, остальные обычные: так подают одну главную
акцию и несколько сопутствующих, не заводя двух модулей. */
@media (min-width: 992px) {
.ae-promo--mosaic > .ae-promo__tile:first-child {
grid-column: span 2;
grid-row: span 2;
}
}
/* ---------- Строкой ---------- */
/* Прокрутка вместо переноса: строка не растёт вниз и на телефоне
листается пальцем. */
.ae-promo--row {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding-bottom: 2px;
}
.ae-promo--row::-webkit-scrollbar { display: none; }
.ae-promo--row > .ae-promo__tile {
flex: 0 0 calc((100% - (var(--ae-promo-cols, 3) - 1) * var(--ae-gap-2)) / var(--ae-promo-cols, 3));
scroll-snap-align: start;
}
@media (max-width: 991px) {
.ae-promo--row > .ae-promo__tile { flex-basis: 62%; }
}
@media (max-width: 575px) {
.ae-promo--row > .ae-promo__tile { flex-basis: 84%; }
}
@media (prefers-reduced-motion: reduce) {
.ae-promo__tile, .ae-promo__img { transition: none; }
}
/* ==================================================================
Баннеры.
================================================================== */
/* Отступ снизу тот же, что у .ae-section: баннер стоит в общем ряду
секций главной, и собственная величина ломала общий ритм страницы. */
.ae-banners--slider {
position: relative;
margin-bottom: var(--ae-gap-4);
border-radius: var(--ae-radius);
overflow: hidden;
}
.ae-banners--slider:last-child { margin-bottom: 0; }
.ae-banners__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.ae-banners__track::-webkit-scrollbar { display: none; }
/* Подложка живёт на слайде, а не на картинке: при «вписать целиком»
именно она видна по краям, и её задаёт оформление блока. */
.ae-banners__slide {
position: relative;
scroll-snap-align: start;
background: var(--ae-banner-bg, var(--ae-surface-2));
}
.ae-banners__slide img,
.ae-banners__slide picture {
display: block;
width: 100%;
/* Пропорции приходят из настроек модуля числом «во сколько раз шире,
чем выше». Высота считается от ширины, поэтому первый экран
не прыгает, пока грузится картинка. */
aspect-ratio: var(--ae-banner-ratio, 20 / 7);
/* «Заполнить» или «вписать» — выбор из настроек модуля. При «вписать»
по краям остаётся фон блока, поэтому он и задан здесь же. */
object-fit: var(--ae-banner-fit, cover);
}
.ae-banners__slide picture img { aspect-ratio: inherit; height: 100%; }
@media (max-width: 767px) {
.ae-banners__slide img,
.ae-banners__slide picture { aspect-ratio: var(--ae-banner-ratio-m, 3 / 2); }
}
/* Ссылка на весь слайд лежит под текстом: клик по картинке ведёт
туда же, куда кнопка, но кнопка остаётся отдельной целью. */
.ae-banners__link { position: absolute; inset: 0; z-index: 1; }
/* Затемнение включается только когда задано: на светлой картинке
с тёмным текстом оно лишнее. */
.ae-banners__slide::after {
content: "";
position: absolute;
inset: 0;
background: #000;
opacity: var(--ae-banner-veil, 0);
pointer-events: none;
}
/* ---------- Текст на слайде ---------- */
.ae-banners__text {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
gap: .6em;
padding: clamp(var(--ae-gap-2), 5vw, var(--ae-gap-4) * 1.4);
pointer-events: none;
max-width: 46rem;
}
.ae-banners__text > * { pointer-events: auto; }
.is-center .ae-banners__text { align-items: center; text-align: center; max-width: none; }
.is-right .ae-banners__text { margin-left: auto; align-items: flex-end; text-align: right; }
.is-ink-light .ae-banners__text { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.is-ink-dark .ae-banners__text { color: #10141a; }
.ae-banners__title {
font-family: var(--ae-font-head);
font-weight: 700;
font-size: clamp(1.25rem, 3.4vw, 2.6rem);
line-height: 1.12;
letter-spacing: -.02em;
text-wrap: balance;
}
.ae-banners__sub {
font-size: clamp(.85rem, 1.5vw, 1.1rem);
line-height: 1.45;
opacity: .92;
max-width: 34rem;
}
.ae-banners__text .ae-btn { align-self: flex-start; }
.is-center .ae-banners__text .ae-btn { align-self: center; }
.is-right .ae-banners__text .ae-btn { align-self: flex-end; }
/* На телефоне подзаголовок съедает картинку целиком: оставляем
заголовок и кнопку — то, ради чего слайд и сделан. */
@media (max-width: 575px) {
.ae-banners__sub { display: none; }
.ae-banners__text { padding: var(--ae-gap-2); gap: .5em; }
}
.ae-banners__dots {
position: absolute;
left: 0;
right: 0;
bottom: var(--ae-gap-2);
display: flex;
justify-content: center;
gap: .4em;
}
.ae-banners__dots button {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, .55);
transition: width .2s, background-color .2s;
}
.ae-banners__dots button.is-active { width: 24px; border-radius: 4px; background: #fff; }
.ae-banners--slider .ae-slider__nav { display: none; }
/* Стрелки по центру картинки. Общее правило слайдера ставит их выше
середины — там под лентой ещё идут названия и цены товаров, а у
баннера под ним ничего нет. */
.ae-banners--slider .ae-slider__nav { top: 50%; margin-top: -20px; }
@media (min-width: 768px) {
.ae-banners--slider:hover .ae-slider__nav,
.ae-banners--slider:focus-within .ae-slider__nav { display: flex; }
.ae-banners--slider .ae-slider__nav--prev { left: var(--ae-gap-2); }
.ae-banners--slider .ae-slider__nav--next { right: var(--ae-gap-2); }
/* Место под стрелку. Текст на слайде почти всегда прижат к краю,
и на экране уже тысячи двухсот точек отступ становится меньше
стрелки — она наезжает на первые буквы строки. Запас держим
всегда, а не только пока стрелка видна: иначе текст прыгал бы
под курсором. */
.ae-banners--slider.has-arrows .ae-banners__text {
padding-inline: max(
clamp(var(--ae-gap-2), 5vw, var(--ae-gap-4) * 1.4),
calc(var(--ae-gap-2) * 2 + 40px)
);
}
}
/* ---------- Плитками ---------- */
.ae-banners--grid {
display: grid;
gap: var(--ae-gap-2);
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 576px) {
.ae-banners--grid { grid-template-columns: repeat(var(--ae-banner-cols, 3), minmax(0, 1fr)); }
}
.ae-banners__tile {
position: relative;
border-radius: var(--ae-radius);
overflow: hidden;
background: var(--ae-surface-2);
}
.ae-banners__tile img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: var(--ae-banner-fit, cover);
background: var(--ae-banner-bg, var(--ae-surface-2));
transition: transform .3s;
}
.ae-banners__tile:hover img { transform: scale(1.03); }
.ae-banners__tile { position: relative; }
.ae-banners__tile::after {
content: "";
position: absolute;
inset: 0;
background: #000;
opacity: var(--ae-banner-veil, 0);
pointer-events: none;
}
.ae-banners__caption b { display: block; font-size: 1.02em; }
.ae-banners__caption i { display: block; font-style: normal; opacity: .85; font-size: .88em; }
.ae-banners__more { display: inline-block; margin-top: .35em; text-decoration: underline; font-size: .85em; }
.is-ink-dark .ae-banners__caption { color: #10141a; text-shadow: none; }
.ae-banners__caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: var(--ae-gap-3) var(--ae-gap-2) var(--ae-gap-2);
background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent);
color: #fff;
font-weight: 600;
font-size: 1rem;
line-height: 1.3;
}
/* ==================================================================
Преимущества.
================================================================== */
.ae-benefits {
display: grid;
gap: var(--ae-gap-2);
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 576px) {
.ae-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
.ae-benefits { grid-template-columns: repeat(var(--ae-benefit-cols, 4), minmax(0, 1fr)); }
}
.ae-benefit {
display: flex;
align-items: flex-start;
gap: var(--ae-gap-2);
padding: var(--ae-gap-2);
border: var(--ae-card-border) solid var(--ae-border);
border-radius: var(--ae-card-radius);
box-shadow: var(--ae-card-shadow);
background: var(--ae-surface);
color: var(--ae-text);
}
a.ae-benefit:hover { border-color: var(--ae-primary); }
/* Значок из набора приходит контуром и красится текстом блока,
своя картинка — файлом. Размер задаём одинаковый, чтобы ряд
не разъезжался при смешанном наборе. */
.ae-benefit__icon {
width: 40px;
height: 40px;
flex: none;
object-fit: contain;
}
svg.ae-benefit__icon { color: var(--ae-primary); }
.ae-benefit__icon--blank { border-radius: var(--ae-radius-sm); background: var(--ae-surface-2); }
.ae-benefit__body { display: flex; flex-direction: column; gap: .2em; min-width: 0; }
.ae-benefit__body b { font-size: .94rem; line-height: 1.3; }
.ae-benefit__body span { font-size: .84rem; color: var(--ae-text-muted); line-height: 1.4; }
/* ==================================================================
Эффекты смены слайдов.
Прокрутка остаётся основным способом: она листается пальцем сама,
работает без скриптов и не ломается, если JavaScript не доехал.
Остальные эффекты складывают слайды стопкой — иначе одновременно
показать два слайда, проявляя один сквозь другой, невозможно.
================================================================== */
.ae-banners--fx-fade .ae-banners__track,
.ae-banners--fx-zoom .ae-banners__track,
.ae-banners--fx-push .ae-banners__track {
display: block;
position: relative;
overflow: hidden;
scroll-snap-type: none;
}
.ae-banners--fx-fade .ae-banners__slide,
.ae-banners--fx-zoom .ae-banners__slide,
.ae-banners--fx-push .ae-banners__slide {
position: absolute;
inset: 0;
opacity: 0;
/* Скрытый слайд не должен ловить нажатия: ссылка на нём перекрыла бы
кнопку видимого. */
pointer-events: none;
transition: opacity var(--ae-banner-fx-speed, 450ms) ease,
transform var(--ae-banner-fx-speed, 450ms) ease;
}
/* Первый слайд задаёт высоту всей стопки: у остальных её нет,
они вынуты из потока. */
.ae-banners--fx-fade .ae-banners__slide:first-child,
.ae-banners--fx-zoom .ae-banners__slide:first-child,
.ae-banners--fx-push .ae-banners__slide:first-child {
position: relative;
}
.ae-banners--fx-fade .ae-banners__slide.is-active,
.ae-banners--fx-zoom .ae-banners__slide.is-active,
.ae-banners--fx-push .ae-banners__slide.is-active {
opacity: 1;
pointer-events: auto;
transform: none;
z-index: 1;
}
.ae-banners--fx-zoom .ae-banners__slide { transform: scale(1.06); }
.ae-banners--fx-push .ae-banners__slide { transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) {
.ae-banners__slide { transition-duration: 1ms !important; }
}
/* Слайд без картинки. Высоту задаёт распорка с теми же пропорциями,
что были у изображения: без неё слайд схлопывается в высоту текста,
и стопка слайдов начинает прыгать при листании. */
.ae-banners__plain {
display: block;
width: 100%;
aspect-ratio: var(--ae-banner-ratio, 20 / 7);
}
@media (max-width: 767px) {
.ae-banners__plain { aspect-ratio: var(--ae-banner-ratio-m, 3 / 2); }
}
/* ==================================================================
Модули в боковых колонках.
Стоковые модули OpenCart приходят со своей разметкой из Bootstrap 3.
Их шаблоны в теме переопределены, а здесь — оформление: один вид
у списка категорий, страниц, кабинета и магазинов сети. Иначе
боковая колонка выглядит собранной из трёх разных сайтов.
================================================================== */
.ae-modules { display: flex; flex-direction: column; gap: var(--ae-gap-2); }
.ae-module {
background: var(--ae-surface);
border: var(--ae-card-border) solid var(--ae-border);
border-radius: var(--ae-card-radius);
overflow: hidden;
}
.ae-module__title {
padding: var(--ae-gap-2);
border-bottom: 1px solid var(--ae-border);
font-weight: 600;
font-size: .95rem;
line-height: 1.3;
}
.ae-module__note {
margin: 0;
padding: var(--ae-gap-2) var(--ae-gap-2) 0;
font-size: .82rem;
color: var(--ae-text-muted);
}
.ae-module--html { padding: var(--ae-gap-2); }
.ae-module--html .ae-module__title { padding: 0 0 .5em; border-bottom: 0; }
/* ---------- Список ссылок ----------
Вложенность отступом слева, а не дефисами в тексте: длинное название
тогда переносится по словам, а не рвётся посреди строки. */
.ae-navlist { list-style: none; margin: 0; padding: 0; }
.ae-navlist a {
display: block;
padding: .62em var(--ae-gap-2);
color: var(--ae-text);
font-size: .9rem;
line-height: 1.35;
border-bottom: 1px solid var(--ae-border);
}
.ae-navlist > li:last-child > a { border-bottom: 0; }
.ae-navlist a:hover { background: var(--ae-surface-2); color: var(--ae-primary); }
.ae-navlist a.is-active { color: var(--ae-primary); font-weight: 600; background: var(--ae-surface-2); }
.ae-navlist__sub { list-style: none; margin: 0; padding: 0; }
.ae-navlist__sub a {
padding-left: calc(var(--ae-gap-2) * 2);
font-size: .85rem;
color: var(--ae-text-muted);
}
.ae-navlist__sub a::before {
content: "";
display: inline-block;
width: .5em;
height: 1px;
margin-right: .5em;
vertical-align: middle;
background: currentColor;
opacity: .5;
}
.ae-navlist__sub a.is-active { color: var(--ae-primary); }
/* ---------- Колонка целиком ---------- */
.ae-aside { min-width: 0; }
.ae-aside > .ae-modules { margin-top: var(--ae-gap-2); }
/* Отступ нужен только под фильтром или виджетом. Когда модули в колонке
первые — а так и есть в категории с выключённым фильтром, — он сдвигал
колонку вниз относительно товаров. */
.ae-aside > .ae-modules:first-child { margin-top: 0; }
@media (max-width: 991px) {
/* На узком экране колонка уходит под товары: список категорий там
уже не навигация, а хвост страницы. */
.ae-modules { gap: var(--ae-gap-1); }
}
/* ==================================================================
Истории.
Кружки прокручиваются горизонтально и не переносятся: перенос
превращает узнаваемую ленту в непонятную сетку иконок.
================================================================== */
/* Отступ снизу тот же, что у .ae-section: лента стоит в общем ряду
секций главной, и собственная величина ломала ритм страницы. */
.ae-stories { margin-bottom: var(--ae-gap-4); }
.ae-stories:last-child { margin-bottom: 0; }
.ae-stories__strip {
display: flex;
gap: var(--ae-gap-2);
overflow-x: auto;
padding-bottom: .35rem;
scrollbar-width: none;
scroll-snap-type: x proximity;
}
.ae-stories__strip::-webkit-scrollbar { display: none; }
.ae-story {
display: flex;
flex: 0 0 auto;
flex-direction: column;
align-items: center;
gap: .4rem;
width: 84px;
background: none;
border: 0;
padding: 0;
color: inherit;
font: inherit;
cursor: pointer;
scroll-snap-align: start;
}
.ae-story__ring {
display: block;
width: 72px;
height: 72px;
padding: 3px;
border-radius: 50%;
background: conic-gradient(
from 210deg,
var(--ae-primary),
color-mix(in srgb, var(--ae-primary) 40%, var(--ae-sale)),
var(--ae-primary)
);
transition: transform .15s;
}
.ae-story:hover .ae-story__ring { transform: scale(1.05); }
.ae-story:focus-visible .ae-story__ring { outline: 2px solid var(--ae-primary); outline-offset: 3px; }
.ae-story__ring img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
border: 2px solid var(--ae-bg);
background: var(--ae-surface-2);
}
.ae-story__title {
font-size: .75rem;
line-height: 1.25;
text-align: center;
/* Две строки: длинное название не должно ломать высоту ленты. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
.ae-story__ring { transition: none; }
}
/* ==================================================================
Полноэкранный просмотр.
================================================================== */
.ae-storyview {
position: fixed;
inset: 0;
/*
Тот же слой, что у модальных окон. Раньше здесь было 120, а шапка
сидит на 300 — полноэкранный просмотр открывался под меню, и его
верх был недоступен.
*/
z-index: 1200;
display: flex;
flex-direction: column;
align-items: center;
background: rgba(8, 10, 14, .96);
}
.ae-storyview__bars {
display: flex;
gap: 4px;
width: min(420px, 100%);
padding: var(--ae-gap-2) var(--ae-gap-2) 0;
}
.ae-storyview__bars > span {
flex: 1;
height: 3px;
border-radius: 2px;
background: rgba(255, 255, 255, .28);
overflow: hidden;
}
.ae-storyview__bars i {
display: block;
width: 0;
height: 100%;
background: #fff;
}
.ae-storyview__close {
position: absolute;
top: var(--ae-gap-2);
right: var(--ae-gap-2);
z-index: 2;
background: none;
border: 0;
color: #fff;
opacity: .85;
cursor: pointer;
}
.ae-storyview__close:hover { opacity: 1; }
.ae-storyview__stage {
position: relative;
flex: 1;
width: min(420px, 100%);
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
padding: var(--ae-gap-2);
touch-action: manipulation;
}
.ae-storyview__image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: var(--ae-radius);
user-select: none;
-webkit-user-drag: none;
}
.ae-storyview__caption {
position: absolute;
left: var(--ae-gap-2);
right: var(--ae-gap-2);
bottom: var(--ae-gap-3);
z-index: 2;
display: flex;
flex-direction: column;
gap: .5rem;
align-items: flex-start;
padding: var(--ae-gap-2);
border-radius: var(--ae-radius);
/* Подпись лежит поверх картинки, а картинка бывает любой:
без затемнения текст читается через раз. */
background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .35));
color: #fff;
}
.ae-storyview__caption h3 { margin: 0; font-size: 1.05rem; }
.ae-storyview__caption p { margin: 0; font-size: .9rem; line-height: 1.5; }
/* Половинки экрана для перехода вперёд и назад — привычный жест
из соцсетей, поэтому кнопки невидимы и подписаны только для
вспомогательных технологий. */
.ae-storyview__nav {
position: absolute;
top: 0;
bottom: 0;
width: 35%;
background: none;
border: 0;
cursor: pointer;
}
.ae-storyview__nav--prev { left: 0; }
.ae-storyview__nav--next { right: 0; }
.ae-storyview__nav:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
/* ==================================================================
Лента высокими карточками.
Кружок хорош, когда истории дополняют витрину. Карточка — когда они
и есть первый экран: её видно издалека, в неё помещается название
целиком, и она сразу показывает содержимое, а не аватар.
================================================================== */
.ae-stories--cards .ae-stories__strip {
--ae-story-w: 190px;
gap: var(--ae-gap-2);
align-items: stretch;
}
.ae-stories--cards .ae-stories__strip.is-s { --ae-story-w: 150px; }
.ae-stories--cards .ae-stories__strip.is-l { --ae-story-w: 240px; }
.ae-story--card {
position: relative;
flex: 0 0 var(--ae-story-w);
width: var(--ae-story-w);
aspect-ratio: var(--ae-story-ratio, .66);
padding: 0;
border: 0;
border-radius: var(--ae-card-radius);
overflow: hidden;
background: var(--ae-surface-2);
cursor: pointer;
isolation: isolate;
transition: transform var(--ae-motion), box-shadow var(--ae-motion);
}
.ae-story--card:hover {
transform: translateY(var(--ae-card-lift, -3px));
box-shadow: var(--ae-card-hover-shadow);
}
.ae-story__shot {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Затемнение снизу: белая надпись на светлой фотографии не читается,
а угадать, какой она будет, нельзя. */
.ae-story--card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .62));
pointer-events: none;
}
.ae-story--card .ae-story__title {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
max-width: none;
padding: .7em .8em;
color: #fff;
font-size: .92rem;
font-weight: 600;
line-height: 1.25;
text-align: left;
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Значок ролика: показывает, что внутри видео, до нажатия. */
.ae-story__play {
position: absolute;
top: .6em;
right: .6em;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(0, 0, 0, .45);
color: #fff;
backdrop-filter: blur(2px);
}
@media (max-width: 575px) {
.ae-stories--cards .ae-stories__strip { --ae-story-w: 140px; }
.ae-stories--cards .ae-stories__strip.is-l { --ae-story-w: 165px; }
}
/* ==================================================================
Видео в просмотре
================================================================== */
.ae-storyview__video,
.ae-storyview__embed {
width: 100%;
height: 100%;
max-height: 100%;
border: 0;
object-fit: contain;
background: #000;
}
.ae-storyview__video[hidden],
.ae-storyview__embed[hidden] { display: none; }
/* ==================================================================
Карточка товара в списках.
Высота изображения фиксируется соотношением сторон, а не содержимым:
без этого браузер не знает размер до загрузки и страница дёргается.
================================================================== */
.ae-products {
display: grid;
gap: var(--ae-gap-2);
grid-template-columns: repeat(var(--ae-cols-mobile, 2), minmax(0, 1fr));
}
@media (min-width: 576px) {
.ae-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
.ae-products { grid-template-columns: repeat(var(--ae-cols, 4), minmax(0, 1fr)); }
}
/* Список: карточка разворачивается в строку. */
.ae-products.is-list { grid-template-columns: minmax(0, 1fr); }
.ae-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--ae-surface);
border: var(--ae-card-border) solid var(--ae-border);
border-radius: var(--ae-card-radius);
box-shadow: var(--ae-card-shadow);
overflow: hidden;
transition: border-color var(--ae-motion), box-shadow var(--ae-motion), transform var(--ae-motion);
}
.ae-card:hover {
border-color: var(--ae-card-hover-border);
box-shadow: var(--ae-card-hover-shadow);
transform: translateY(var(--ae-card-lift));
}
/* ---------- Изображение ---------- */
/*
Фотография отбивается от краёв так же, как текст ниже: без этого
она упирается в рамку карточки, а подпись под ней стоит с отступом —
и карточка выглядит собранной из двух разных.
Фон совпадает с карточкой: цветная подложка под товаром с прозрачным
фоном читается как рамка вокруг него, которой в макете нет.
*/
.ae-card__media {
position: relative;
display: block;
aspect-ratio: 1 / 1;
padding: var(--ae-gap-2);
background: var(--ae-surface);
overflow: hidden;
}
.ae-card__media img,
.ae-card__media picture {
width: 100%;
height: 100%;
object-fit: contain;
}
.ae-card__media img { transition: transform .3s ease, opacity .2s; }
/* Вторая картинка проявляется поверх первой, без подмены src.
Отступ повторяет отступ блока: абсолютное позиционирование его
не наследует, и без этого вторая картинка была бы крупнее первой. */
.ae-card__media .ae-card__alt {
position: absolute;
inset: var(--ae-gap-2);
opacity: 0;
transition: opacity .25s;
}
.ae-card:hover .ae-card__alt { opacity: 1; }
/* ---------- Стикеры ---------- */
/* Ширина ограничена, потому что подпись стикера пишет владелец
магазина: «Хит продаж месяца» уезжает под быстрые действия. */
.ae-stickers {
position: absolute;
top: .5em;
left: .5em;
max-width: calc(100% - 3.4em);
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .3em;
pointer-events: none;
}
.ae-sticker {
display: inline-flex;
align-items: center;
padding: .22em .6em;
border: 1px solid transparent;
border-radius: var(--ae-badge-radius);
background: var(--ae-surface-2);
color: var(--ae-text);
font-size: .72rem;
font-weight: 700;
line-height: 1.5;
letter-spacing: .01em;
}
/* Цвет стикера задаётся один раз в --ae-sticker, а вид — заливкой,
полупрозрачностью или обводкой — переключается в настройках.
Иначе на каждый из трёх видов пришлось бы держать свой набор
правил для каждого типа стикера.
У заливки — свой, отдельный --ae-sticker-bg. «Успех» и «акция»
одновременно и цвет текста («В наличии», «−20%»), и заливка стикера
с белой надписью; в тёмной теме под текст на тёмной карточке цвет
берут светлее, а тот же светлый оттенок заливкой под белую надпись
выходит блёклым. --ae-success-solid и --ae-sale-solid — тот же цвет,
но затемнённый ровно настолько, чтобы белая надпись читалась;
считается на лету из выбранного цвета, руками их не выбирают. */
.ae-sticker--sale { --ae-sticker: var(--ae-sale); --ae-sticker-bg: var(--ae-sale-solid, var(--ae-sale)); --ae-sticker-ink: #fff; }
.ae-sticker--new { --ae-sticker: var(--ae-success); --ae-sticker-bg: var(--ae-success-solid, var(--ae-success)); --ae-sticker-ink: #fff; }
.ae-sticker--hit { --ae-sticker: var(--ae-rating); --ae-sticker-bg: var(--ae-rating); --ae-sticker-ink: #1a1200; }
.ae-sticker--low { --ae-sticker: var(--ae-sticker-low); --ae-sticker-bg: var(--ae-sticker-low); --ae-sticker-ink: #fff; }
.ae-sticker[class*="ae-sticker--"] {
background: var(--ae-sticker-bg);
border-color: var(--ae-sticker-bg);
color: var(--ae-sticker-ink);
}
:root[data-aero-badge="soft"] .ae-sticker[class*="ae-sticker--"] {
background: color-mix(in srgb, var(--ae-sticker) 16%, var(--ae-surface));
border-color: transparent;
color: var(--ae-sticker);
}
:root[data-aero-badge="outline"] .ae-sticker[class*="ae-sticker--"] {
background: var(--ae-surface);
border-color: var(--ae-sticker);
color: var(--ae-sticker);
}
/* ---------- Быстрые действия ---------- */
.ae-card__quick {
position: absolute;
top: .5em;
right: .5em;
z-index: 2;
display: flex;
flex-direction: column;
gap: .3em;
opacity: 0;
transform: translateX(6px);
transition: opacity .18s, transform .18s;
}
.ae-card:hover .ae-card__quick,
.ae-card:focus-within .ae-card__quick { opacity: 1; transform: none; }
.ae-iconbtn {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: var(--ae-radius-sm);
background: var(--ae-surface);
border: 1px solid var(--ae-border);
color: var(--ae-text-muted);
transition: color .15s, border-color .15s;
}
.ae-iconbtn:hover { color: var(--ae-primary); border-color: var(--ae-primary); }
.ae-iconbtn.is-active { color: var(--ae-sale); border-color: var(--ae-sale); }
.ae-iconbtn svg { width: 17px; height: 17px; }
/*
Без наведения показать действия по-другому нельзя, но три кнопки
поверх фотографии на телефоне съедают её угол. Оставляем их
видимыми и уменьшаем: на 375 пикселей карточка шириной 170,
и каждый лишний пиксель заметен.
*/
@media (hover: none) {
.ae-card__quick { opacity: 1; transform: none; }
.ae-card__quick .ae-iconbtn { width: 30px; height: 30px; }
.ae-card__quick .ae-iconbtn svg { width: 15px; height: 15px; }
}
/* ---------- Содержимое ---------- */
.ae-card__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: .45em;
padding: var(--ae-gap-2);
}
/*
Место под две строки резервируется всегда: иначе в ряду товар
с коротким названием поднимает наличие, цену и кнопку выше,
чем у соседа, и ряд идёт лесенкой.
*/
.ae-card__name {
font-size: .92rem;
font-weight: 500;
line-height: 1.35;
min-height: 2.7em;
color: var(--ae-text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ae-card__name:hover { color: var(--ae-primary); }
.ae-card__meta { font-size: .78rem; color: var(--ae-text-muted); }
/* Пустая строка рейтинга сохраняет высоту: отзывы есть не у всех
товаров, а строй карточек в ряду от этого зависеть не должен. */
.ae-card__body .ae-rating { min-height: 1.15em; }
.ae-rating { display: flex; align-items: center; gap: .3em; font-size: .78rem; color: var(--ae-text-muted); }
.ae-stars { display: inline-flex; gap: 1px; color: var(--ae-rating); }
.ae-stars svg { width: 13px; height: 13px; }
.ae-stars .is-off { color: var(--ae-border); }
.ae-card__price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: .45em;
margin-top: auto;
padding-top: .3em;
}
.ae-price {
font-family: var(--ae-font-head);
font-size: 1.12rem;
font-weight: 700;
color: var(--ae-price);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ae-price--old {
font-size: .88rem;
font-weight: 500;
color: var(--ae-price-old);
text-decoration: line-through;
}
.ae-price--new { color: var(--ae-sale); }
.ae-price__tax { font-size: .75rem; color: var(--ae-text-muted); }
.ae-card__stock { display: flex; align-items: center; gap: .35em; font-size: .78rem; }
.ae-card__stock::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
flex: none;
}
.ae-card__stock.is-in { color: var(--ae-success); }
.ae-card__stock.is-out { color: var(--ae-text-muted); }
.ae-card__buy { display: flex; gap: .4em; margin-top: .3em; }
.ae-card__buy .ae-btn { flex: 1 1 auto; }
/* ---------- Режим списка ---------- */
@media (min-width: 768px) {
.ae-products.is-list .ae-card { flex-direction: row; }
.ae-products.is-list .ae-card__media { width: 220px; flex: none; aspect-ratio: 1 / 1; }
.ae-products.is-list .ae-card__body { padding: var(--ae-gap-3); }
.ae-products.is-list .ae-card__name { -webkit-line-clamp: 3; font-size: 1.02rem; }
.ae-products.is-list .ae-card__desc {
font-size: .87rem;
color: var(--ae-text-muted);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ae-products.is-list .ae-card__buy { max-width: 320px; }
}
.ae-products:not(.is-list) .ae-card__desc { display: none; }
/* ---------- Цвета стикеров задаются настройками ---------- */
.ae-sticker--sale { background: var(--ae-sticker-sale, var(--ae-sale)); color: #fff; }
.ae-sticker--new { background: var(--ae-sticker-new, var(--ae-success)); color: #fff; }
.ae-sticker--hit { background: var(--ae-sticker-hit, var(--ae-rating)); color: #1a1200; }
.ae-sticker--low { background: var(--ae-sticker-low, var(--ae-text-muted)); color: #fff; }
/* Подпись вместо цены: тот же вес, что у числа, но приглушённая —
это не цена, а приглашение спросить. */
.ae-card__price--ask {
color: var(--ae-text-muted);
font-weight: 600;
font-size: .95rem;
}
.ae-buybox__price--ask {
color: var(--ae-text-muted);
font-size: 1.15rem;
font-weight: 600;
}
/* ---------- Характеристики и варианты в карточке ---------- */
/* Две-три строки под названием. Плотнее, чем на странице товара:
здесь они подсказка, а не таблица. */
.ae-card__specs {
display: grid;
gap: .15em;
margin: 0;
font-size: .76rem;
line-height: 1.35;
}
.ae-card__specs > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: .4em;
}
.ae-card__specs dt {
color: var(--ae-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ae-card__specs dd { margin: 0; text-align: right; white-space: nowrap; }
/* Варианты первой опции. Задача блока — сообщить, что выбор есть,
поэтому значения не кликаются: выбирают на странице товара. */
.ae-card__options { display: flex; flex-wrap: wrap; gap: .25em; }
.ae-card__option {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.7em;
padding: .1em .45em;
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius-sm);
color: var(--ae-text-muted);
font-size: .72rem;
line-height: 1.6;
white-space: nowrap;
}
.ae-card__option.has-image { padding: 2px; }
.ae-card__option img { width: 20px; height: 20px; object-fit: cover; border-radius: 3px; }
/* ---------- Выбор варианта в карточке ----------
Кружки кликабельны там, где выбор один и из готового списка: цвет,
размер, объём. Кнопке нужен свой вид состояния — без него нажатие
не отличить от промаха. */
.ae-card__options.is-pickable .ae-card__option {
transition: border-color .15s, color .15s, box-shadow .15s;
}
.ae-card__options.is-pickable button.ae-card__option:hover {
border-color: var(--ae-primary);
color: var(--ae-text);
}
.ae-card__option.is-selected {
border-color: var(--ae-primary);
color: var(--ae-text);
/* Вторая линия внутрь, а не толстая рамка: рамка сдвигала бы
соседние кружки на пиксель при каждом выборе. */
box-shadow: inset 0 0 0 1px var(--ae-primary);
}
/* Значение с исчерпанным остатком: видно, что оно есть, но выбрать
его нельзя — корзина всё равно не примет. */
.ae-card__option.is-out {
opacity: .45;
cursor: not-allowed;
text-decoration: line-through;
}
.ae-card__option.is-out img { filter: grayscale(1); }
/* Нажали «в корзину», не выбрав обязательное. Ответ в двух
сантиметрах от кнопки — подсвечиваем его, а не отказываем. */
.ae-card__options.is-asking .ae-card__option:not(.is-out) {
border-color: var(--ae-danger);
color: var(--ae-danger);
}
.ae-card__option--more { color: var(--ae-primary); }
/* В списке карточка широкая, и характеристики там лишние — под
названием есть описание. Варианты остаются: теперь это не подсказка,
а выбор, и прятать его значит возвращать покупателя на страницу
товара за одним нажатием. */
.ae-products.is-list .ae-card__specs { display: none; }
/* На телефоне в две колонки места нет ни на то, ни на другое. */
@media (max-width: 575px) {
.ae-card__specs { display: none; }
}
/* ==================================================================
Слайдер товаров.
Реализован прокруткой с привязкой, а не подменой позиций: браузер
сам считает инерцию и свайп, а разметка остаётся той же сеткой —
при выключенном JavaScript блок просто прокручивается пальцем.
================================================================== */
.ae-slider { position: relative; }
.ae-products.is-slider {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - (var(--ae-cols, 4) - 1) * var(--ae-gap-2)) / var(--ae-cols, 4));
grid-template-columns: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: 0;
scrollbar-width: none;
padding-bottom: 2px;
}
.ae-products.is-slider::-webkit-scrollbar { display: none; }
.ae-products.is-slider > * { scroll-snap-align: start; }
@media (max-width: 991px) {
/* Ширина считается по тому же правилу, что и на десктопе: при одной
колонке прежняя формула отнимала лишний промежуток, и карточка
недотягивала до края экрана. */
.ae-products.is-slider {
grid-auto-columns: calc((100% - (var(--ae-cols-mobile, 2) - 1) * var(--ae-gap-2)) / var(--ae-cols-mobile, 2));
}
}
/* ---------- Стрелки ---------- */
.ae-slider__nav {
position: absolute;
top: 40%;
z-index: 3;
display: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--ae-radius-pill);
background: var(--ae-surface);
border: 1px solid var(--ae-border);
color: var(--ae-text);
box-shadow: var(--ae-shadow-2);
transition: opacity .15s, background-color .15s;
}
.ae-slider__nav:hover { background: var(--ae-surface-2); }
.ae-slider__nav--prev { left: -18px; }
.ae-slider__nav--next { right: -18px; }
.ae-slider__nav[disabled] { opacity: .3; pointer-events: none; }
.ae-slider__nav svg { width: 19px; height: 19px; }
@media (min-width: 992px) {
.ae-slider:hover .ae-slider__nav,
.ae-slider:focus-within .ae-slider__nav { display: flex; }
}
/* ---------- Перетаскивание ---------- */
/*
Пальцем прокручиваемую ленту листает браузер, мышью — нет, и за
компьютером слайдер между стрелками кажется мёртвым. Пока ленту
тянут, привязка снята: с ней браузер возвращал бы кадр на место
на каждый пиксель движения.
*/
.ae-products.is-slider.is-dragging,
.ae-banners__track.is-dragging,
.ae-stories__strip.is-dragging { scroll-snap-type: none; }
.is-dragging {
cursor: grabbing;
user-select: none;
}
.is-dragging a,
.is-dragging img { -webkit-user-drag: none; }
/* ==================================================================
Страница категории: заголовок, панель управления, подкатегории.
================================================================== */
.ae-cat__head { margin-bottom: var(--ae-gap-3); }
.ae-cat__title { margin-bottom: .3em; }
.ae-cat__count { font-size: .87rem; color: var(--ae-text-muted); }
/* ---------- Шапка страницы марки ----------
Логотип слева от названия: марку узнают по знаку, а не по надписи.
Подложка светлая и в тёмной теме тоже — логотипы почти всегда
нарисованы под белый фон, и на тёмном тёмные буквы пропадают. */
.ae-brandhead {
display: flex;
align-items: center;
gap: var(--ae-gap-3);
margin-bottom: var(--ae-gap-3);
}
.ae-brandhead__logo {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 132px;
height: 76px;
padding: 10px;
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius);
background: #fff;
}
.ae-brandhead__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ae-brandhead__text { min-width: 0; }
@media (max-width: 575px) {
.ae-brandhead { gap: var(--ae-gap-2); }
.ae-brandhead__logo { width: 92px; height: 56px; padding: 7px; }
}
.ae-cat__banner {
margin-bottom: var(--ae-gap-3);
border-radius: var(--ae-radius);
overflow: hidden;
}
.ae-cat__desc { margin-bottom: var(--ae-gap-3); }
/* ---------- Вступление к разделу ----------
Картинка и описание об одном и том же разделе. Порознь это полоса
баннера и оторванный от неё текст — вместе снимок и рассказ о том,
что в разделе есть.
Пропорции снимка держит aspect-ratio: без него блок прыгает по
высоте, пока картинка едет, и утаскивает за собой первый ряд
товаров. */
.ae-cat__intro {
display: grid;
gap: var(--ae-gap-3);
align-items: center;
margin-bottom: var(--ae-gap-3);
}
.ae-cat__intro-media {
border-radius: var(--ae-radius);
overflow: hidden;
background: var(--ae-surface-2);
}
.ae-cat__intro-media img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.ae-cat__intro-text > *:first-child { margin-top: 0; }
.ae-cat__intro-text > *:last-child { margin-bottom: 0; }
@media (min-width: 768px) {
/*
Снимок занимает треть, текст — остальное. Полстраницы под
фотографию раздела — много: покупатель пришёл за товарами,
а не за фотографией полки.
*/
.ae-cat__intro { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
/* Длинное описание не должно растягивать снимок на весь экран. */
.ae-cat__intro-media { align-self: start; }
.ae-cat__intro-text { max-width: 78ch; }
}
/* ---------- Подкатегории плитками ---------- */
.ae-subcats {
display: grid;
gap: var(--ae-gap-2);
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
margin-bottom: var(--ae-gap-3);
}
.ae-subcat {
display: flex;
flex-direction: column;
align-items: center;
gap: .5em;
padding: var(--ae-gap-2);
border: var(--ae-card-border) solid var(--ae-border);
border-radius: var(--ae-card-radius);
box-shadow: var(--ae-card-shadow);
background: var(--ae-surface);
color: var(--ae-text);
text-align: center;
transition: border-color .15s, transform .15s;
}
.ae-subcat:hover { border-color: var(--ae-primary); color: var(--ae-primary); transform: translateY(-2px); }
/* Картинка оформлена так же, как в стене категорий: подкатегории и
стена показывают одно и то же, и разное обрамление на одной странице
читается как две разные вёрстки. */
.ae-subcat img {
width: 72px;
height: 72px;
flex: none;
object-fit: contain;
border-radius: var(--ae-radius-sm);
background: var(--ae-surface-2);
}
/* Название прижато к низу плитки. Картинка есть не у каждой категории,
и без этого в одном ряду название безкартиночной плитки стоит наверху,
а соседнее — под фотографией: ряд встаёт лесенкой. */
.ae-subcat__name { margin-top: auto; font-size: .87rem; font-weight: 500; line-height: 1.3; }
/* ---------- Панель управления списком ---------- */
.ae-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ae-gap-1) var(--ae-gap-2);
padding: var(--ae-gap-1) var(--ae-gap-2);
margin-bottom: var(--ae-gap-2);
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius);
background: var(--ae-surface);
}
.ae-viewswitch { display: flex; gap: 2px; }
.ae-viewswitch button {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--ae-radius-sm);
color: var(--ae-text-muted);
transition: background-color .15s, color .15s;
}
.ae-viewswitch button:hover { background: var(--ae-surface-2); color: var(--ae-text); }
.ae-viewswitch button[aria-pressed="true"] { background: var(--ae-primary); color: var(--ae-on-primary); }
.ae-viewswitch svg { width: 17px; height: 17px; }
/* min-width: 0 обязателен: иначе группа не сжимается уже своего
содержимого, а ширину списку задаёт самый длинный вариант сортировки.
В категории с боковой колонкой панель из-за этого переносилась на две
строки — сортировка справа, «Показать» слева под ней. */
.ae-toolbar__group { display: flex; align-items: center; gap: .5em; min-width: 0; font-size: .87rem; }
.ae-toolbar__group label { color: var(--ae-text-muted); white-space: nowrap; }
.ae-toolbar__group select { min-width: 120px; padding: .45em .7em; font-size: .87rem; }
.ae-toolbar__spacer { margin-left: auto; }
/* Оба списка — одним блоком у правого края. Порознь они переносились
поодиночке: сортировка оставалась справа в первой строке, а «показать
по» уезжало во вторую к левому краю. */
.ae-toolbar__sorts {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ae-gap-1) var(--ae-gap-2);
margin-left: auto;
min-width: 0;
}
@media (max-width: 767px) {
.ae-toolbar__group label { display: none; }
.ae-toolbar { gap: .5em; }
/* Распорка в переносящемся ряду занимает собственную строку и
расталкивает выпадающие списки каждый на свою: панель из одной
строки превращалась в четыре. На узком экране прижимать нечего —
убираем распорку и отдаём списки одному ряду поровну. */
.ae-toolbar__spacer { display: none; }
.ae-toolbar__sorts { flex: 1 1 100%; margin-left: 0; }
.ae-toolbar__group { flex: 1 1 120px; }
.ae-toolbar__group select { min-width: 0; width: 100%; }
}
/* ---------- Кнопка догрузки ---------- */
.ae-loadmore { display: flex; justify-content: center; margin-top: var(--ae-gap-3); }
.ae-loadmore .ae-btn { min-width: 260px; }
/* ---------- Боковая колонка ---------- */
/* Обводка и скругление — те же токены, что у карточки товара:
владелец магазина выключает рамки одной настройкой и ждёт, что
пропадут все, а не половина. */
.ae-widget {
border: var(--ae-card-border) solid var(--ae-border);
border-radius: var(--ae-card-radius);
box-shadow: var(--ae-card-shadow);
background: var(--ae-surface);
margin-bottom: var(--ae-gap-2);
overflow: hidden;
}
.ae-widget__title {
margin: 0;
padding: var(--ae-gap-2);
border-bottom: 1px solid var(--ae-border);
font-size: .95rem;
font-weight: 600;
text-transform: var(--ae-head-transform);
}
.ae-widget__body { padding: var(--ae-gap-2); }
.ae-catlist { display: flex; flex-direction: column; }
.ae-catlist a {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5em;
padding: .55em var(--ae-gap-2);
color: var(--ae-text);
font-size: .9rem;
border-bottom: 1px solid var(--ae-border);
}
.ae-catlist a:last-child { border-bottom: 0; }
.ae-catlist a:hover { background: var(--ae-surface-2); color: var(--ae-primary); }
.ae-catlist a.is-active { color: var(--ae-primary); font-weight: 600; }
.ae-catlist__count { font-size: .78rem; color: var(--ae-text-muted); font-variant-numeric: tabular-nums; }
.ae-catlist--sub a { padding-left: calc(var(--ae-gap-2) * 2); font-size: .87rem; }
/* ==================================================================
Стена категорий и витрина брендов.
================================================================== */
.ae-catwall {
display: grid;
gap: var(--ae-gap-2);
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
@media (min-width: 992px) {
.ae-catwall { grid-template-columns: repeat(var(--ae-catwall-cols, 6), minmax(0, 1fr)); }
}
.ae-catwall__item {
display: flex;
flex-direction: column;
align-items: center;
gap: .5em;
padding: var(--ae-gap-2);
border: var(--ae-card-border) solid var(--ae-border);
border-radius: var(--ae-card-radius);
box-shadow: var(--ae-card-shadow);
background: var(--ae-surface);
color: var(--ae-text);
text-align: center;
transition: border-color .15s, transform .15s;
}
.ae-catwall__item:hover { border-color: var(--ae-primary); color: var(--ae-primary); transform: translateY(-2px); }
.ae-catwall__item img,
.ae-catwall__blank {
width: 76px;
height: 76px;
flex: none;
object-fit: contain;
border-radius: var(--ae-radius-sm);
background: var(--ae-surface-2);
}
.ae-catwall__name { font-size: .87rem; font-weight: 500; line-height: 1.3; }
/* Счётчик прижат к низу плитки: названия категорий разной длины, и
без этого числа в одном ряду стоят на разной высоте. */
.ae-catwall__count {
margin-top: auto;
padding-top: .2em;
font-size: .76rem;
color: var(--ae-text-muted);
font-variant-numeric: tabular-nums;
}
.ae-brands {
display: grid;
gap: var(--ae-gap-2);
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.ae-brands__item {
display: flex;
align-items: center;
justify-content: center;
min-height: 76px;
padding: var(--ae-gap-2);
border: var(--ae-card-border) solid var(--ae-border);
border-radius: var(--ae-card-radius);
box-shadow: var(--ae-card-shadow);
background: var(--ae-surface);
color: var(--ae-text);
text-align: center;
transition: border-color .15s;
}
.ae-brands__item:hover { border-color: var(--ae-primary); color: var(--ae-primary); }
.ae-brands__item img { max-height: 44px; width: auto; object-fit: contain; }
/* Магазин без логотипов получает аккуратную сетку названий, а не пустые рамки. */
.ae-brands__item.is-text { font-weight: 600; font-size: .95rem; letter-spacing: .01em; }
/* ==================================================================
Сравнение товаров.
================================================================== */
.ae-compare {
overflow-x: auto;
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius);
background: var(--ae-surface);
}
.ae-compare__table { width: 100%; border-collapse: collapse; }
.ae-compare__table th,
.ae-compare__table td {
padding: var(--ae-gap-2);
border-bottom: 1px solid var(--ae-border);
text-align: left;
vertical-align: top;
font-size: .89rem;
min-width: 190px;
}
/* Первый столбец прилипает: без него на четырёх товарах непонятно,
что с чем сравнивается. */
.ae-compare__table th:first-child {
position: sticky;
left: 0;
z-index: 1;
min-width: 170px;
background: var(--ae-surface-2);
color: var(--ae-text-muted);
font-weight: 500;
}
.ae-compare__group th {
background: var(--ae-surface-2);
font-weight: 700;
color: var(--ae-text);
text-transform: var(--ae-head-transform);
}
.ae-compare__row[hidden], .ae-compare__group[hidden] { display: none; }
.ae-compare__product { display: flex; flex-direction: column; gap: .5em; color: var(--ae-text); }
.ae-compare__product img {
width: 110px;
height: 110px;
object-fit: contain;
border-radius: var(--ae-radius-sm);
background: var(--ae-surface-2);
}
.ae-compare__product span { font-weight: 500; line-height: 1.3; }
.ae-compare__product:hover span { color: var(--ae-primary); }
/*
Ячейку с кнопками нельзя делать флексом.
display: flex снимает с | роль табличной ячейки, и строка теряет
колонки: кнопки всех товаров сваливались в первую, столбиком, и было
не понять, какая кнопка к какому товару. Кнопки и так блочные —
чтобы поставить их друг под другом, флекс не нужен, хватает отступа.
*/
.ae-compare__row.is-actions td { vertical-align: top; }
.ae-compare__row.is-actions td > * + * { margin-top: .4em; }
/* ==================================================================
Страница поиска.
Уточнение стоит над результатами, а не под ними: в стоковом шаблоне
оно было внизу страницы, и никто до него не доходил. Строка запроса
забирает свободную ширину, а раскладка сжимается до одной колонки
раньше сетки товаров — три поля в ряд на планшете уже не читаются.
================================================================== */
.ae-searchpage {
display: flex;
flex-direction: column;
gap: var(--ae-gap-2);
margin-bottom: var(--ae-gap-3);
padding: var(--ae-gap-3);
border: var(--ae-card-border) solid var(--ae-border);
border-radius: var(--ae-card-radius);
background: var(--ae-surface);
}
.ae-searchpage__row {
display: grid;
gap: var(--ae-gap-2);
grid-template-columns: minmax(0, 1fr);
align-items: end;
}
@media (min-width: 768px) {
.ae-searchpage__row { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem) auto; }
}
.ae-searchpage .ae-field { margin: 0; min-width: 0; }
/* Кнопка встаёт на одну линию с полями, а не с их подписями. */
.ae-searchpage__go { min-height: var(--ae-input-height, 44px); }
.ae-searchpage__opts {
display: flex;
flex-wrap: wrap;
gap: var(--ae-gap-2) var(--ae-gap-3);
}
.ae-searchpage__opts .ae-consent { font-size: .9rem; }
/* Разделы каталога под пустым поиском — тот же вид, что на 404. */
.ae-empty__links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .4em .9em;
max-width: 34rem;
font-size: .92rem;
}
.ae-empty__links span { color: var(--ae-text-muted); }
.ae-empty__links a { color: var(--ae-primary); }
.ae-empty__links a:hover { text-decoration: underline; }
/* ==================================================================
Страница брендов.
Плитка держит логотип в постоянной по высоте области: логотипы
приходят разной формы — от вытянутой надписи до квадратного знака, —
и без общей области сетка идёт волной. Марка без логотипа получает
своё название крупно, а не пустую рамку: пустых рамок в каталоге
обычно больше, чем логотипов.
================================================================== */
.ae-alpha {
display: flex;
flex-wrap: wrap;
gap: .3em;
margin-bottom: var(--ae-gap-3);
padding: var(--ae-gap-2);
border-radius: var(--ae-card-radius);
background: var(--ae-surface);
border: var(--ae-card-border) solid var(--ae-border);
}
.ae-alpha a {
display: flex;
align-items: center;
justify-content: center;
min-width: 2.1em;
padding: .25em .45em;
border-radius: var(--ae-radius-sm);
color: var(--ae-text);
font-weight: 600;
font-size: .9rem;
}
.ae-alpha a:hover { background: var(--ae-primary); color: var(--ae-on-primary); }
.ae-brandgroup { margin-bottom: var(--ae-gap-4); scroll-margin-top: calc(var(--ae-header-h, 64px) + var(--ae-gap-2)); }
.ae-brandgroup:last-child { margin-bottom: 0; }
.ae-brandgroup__letter {
margin: 0 0 var(--ae-gap-2);
padding-bottom: .3em;
border-bottom: 1px solid var(--ae-border);
font-size: var(--ae-fs-h4);
color: var(--ae-text-muted);
}
.ae-brandtiles {
display: grid;
gap: var(--ae-gap-2);
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.ae-brandtile {
display: flex;
flex-direction: column;
gap: .25em;
padding: var(--ae-gap-2);
border: var(--ae-card-border) solid var(--ae-border);
border-radius: var(--ae-card-radius);
background: var(--ae-surface);
box-shadow: var(--ae-card-shadow);
color: var(--ae-text);
text-align: center;
transition: border-color var(--ae-motion), box-shadow var(--ae-motion), transform var(--ae-motion);
}
.ae-brandtile:hover {
border-color: var(--ae-card-hover-border);
box-shadow: var(--ae-card-hover-shadow);
transform: translateY(var(--ae-card-lift));
color: var(--ae-text);
}
.ae-brandtile__media {
display: flex;
align-items: center;
justify-content: center;
height: 68px;
margin-bottom: .35em;
min-width: 0;
}
.ae-brandtile__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Название вместо логотипа: крупнее подписи, но с запасом на длинное
имя — «Первая мебельная фабрика» в две строки должна помещаться. */
.ae-brandtile__media b {
font-size: 1.02rem;
font-weight: 700;
line-height: 1.2;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.ae-brandtile.is-text .ae-brandtile__name { display: none; }
.ae-brandtile__name { font-size: .88rem; font-weight: 500; overflow-wrap: anywhere; }
.ae-brandtile__count { font-size: .76rem; color: var(--ae-text-muted); }
/* Списочный вид: плотный указатель для магазина без логотипов. */
.ae-brandlist {
display: grid;
gap: .1em var(--ae-gap-2);
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
margin: 0;
padding: 0;
list-style: none;
}
.ae-brandlist li { display: flex; align-items: baseline; gap: .4em; min-width: 0; padding: .25em 0; }
.ae-brandlist a { color: var(--ae-text); overflow-wrap: anywhere; }
.ae-brandlist a:hover { color: var(--ae-primary); }
.ae-brandlist i { font-style: normal; font-size: .78rem; color: var(--ae-text-muted); }
/* ==================================================================
Страница товара.
================================================================== */
/*
Колонки не растягиваются по высоте самой длинной. Иначе галерея
как элемент сетки вытягивается до высоты сведений, а картинка
внутри неё честно занимает всю выданную высоту: при пропорции 1:1
и колонке 375 пикселей область под фото становилась 916 —
вдвое выше самой фотографии.
*/
.ae-product {
display: grid;
gap: var(--ae-gap-3);
grid-template-columns: minmax(0, 1fr);
align-items: start;
margin-bottom: var(--ae-gap-4);
}
@media (min-width: 768px) {
.ae-product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1200px) {
.ae-product {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) 300px;
grid-template-areas: "gallery info buy";
}
.ae-product__gallery { grid-area: gallery; }
.ae-product__info { grid-area: info; }
.ae-product__buy { grid-area: buy; }
/*
Товар без характеристик, опций и оптовых скидок: средней колонке
нечем себя занять. Складываем страницу в две колонки — галерея
и всё остальное, — а блок покупки заодно получает place под
кнопки, которые в 300 пикселей не помещались.
*/
.ae-product--slim {
grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr);
grid-template-rows: auto 1fr;
grid-template-areas:
"gallery info"
"gallery buy";
align-items: start;
}
}
/* ---------- Галерея ---------- */
.ae-gallery { display: flex; flex-direction: column; gap: var(--ae-gap-2); position: relative; }
@media (min-width: 576px) {
.ae-gallery.is-left { flex-direction: row-reverse; }
.ae-gallery.is-left .ae-gallery__thumbs {
flex-direction: column;
width: 72px;
flex: none;
overflow-y: auto;
max-height: 520px;
}
}
/* Пропорции задаются настройкой: квадрат подходит технике, вертикаль —
одежде, «по картинке» — магазину с разнородными фотографиями. */
.ae-gallery__main {
position: relative;
flex: 1 1 auto;
aspect-ratio: var(--ae-gallery-ratio, 1 / 1);
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius);
background: var(--ae-surface);
overflow: hidden;
}
.ae-gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.ae-gallery__main .ae-stickers { top: var(--ae-gap-2); left: var(--ae-gap-2); }
.ae-gallery__zoom {
position: absolute;
right: var(--ae-gap-2);
bottom: var(--ae-gap-2);
z-index: 3;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--ae-radius-sm);
background: var(--ae-surface);
border: 1px solid var(--ae-border);
color: var(--ae-text-muted);
}
.ae-gallery__zoom:hover { color: var(--ae-primary); border-color: var(--ae-primary); }
.ae-gallery__thumbs {
display: flex;
gap: .45em;
overflow-x: auto;
scrollbar-width: thin;
}
.ae-gallery__thumb {
flex: none;
width: 64px;
height: 64px;
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius-sm);
background: var(--ae-surface);
overflow: hidden;
transition: border-color .15s;
}
.ae-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.ae-gallery__thumb.is-active { border-color: var(--ae-primary); }
/* ---------- Основные сведения ---------- */
.ae-product__title { margin-bottom: .4em; }
/* ---------- Сведения о товаре ---------- */
.ae-product__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .4em;
margin-bottom: var(--ae-gap-3);
}
/*
Каждое сведение — отдельная метка. Одной серой строкой артикул,
бренд и рейтинг сливались и читались как служебная подпись,
хотя две из трёх — ссылки, по которым идут.
*/
.ae-meta {
display: inline-flex;
align-items: baseline;
gap: .35em;
padding: .3em .7em;
border-radius: var(--ae-radius-pill);
background: var(--ae-surface-2);
color: var(--ae-text-muted);
font-size: .82rem;
line-height: 1.4;
}
.ae-meta b { color: var(--ae-text); font-weight: 600; }
a.ae-meta { transition: background var(--ae-motion), color var(--ae-motion); }
a.ae-meta:hover { background: color-mix(in srgb, var(--ae-primary) 12%, var(--ae-surface-2)); }
a.ae-meta:hover b { color: var(--ae-primary); }
/* Рейтинг встаёт первым: по нему решают, читать ли дальше. */
.ae-meta--rating { align-items: center; gap: .5em; }
.ae-meta--rating .ae-stars svg { width: 14px; height: 14px; }
.ae-meta--rating b { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
/* Краткое описание: чуть крупнее обычного текста и с воздухом —
это первое, что читают после названия. */
.ae-product__short {
margin: 0 0 var(--ae-gap-3);
max-width: 62ch;
font-size: .96rem;
line-height: 1.6;
color: var(--ae-text-soft, var(--ae-text));
}
/*
Коротко о товаре. Голый список посреди белого поля выглядел
выпиской из накладной; карточка с заголовком и выходом к полным
характеристикам читается как часть страницы.
*/
.ae-specbox {
margin-bottom: var(--ae-gap-3);
padding: var(--ae-gap-2) var(--ae-gap-3);
border: var(--ae-card-border) solid var(--ae-border);
border-radius: var(--ae-card-radius);
background: var(--ae-surface);
}
.ae-specbox__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--ae-gap-2);
margin-bottom: .7em;
padding-bottom: .6em;
border-bottom: 1px solid var(--ae-border);
}
.ae-specbox__head b { font-size: .92rem; }
.ae-specbox__head a {
color: var(--ae-primary);
font-size: .82rem;
white-space: nowrap;
}
.ae-specbox__head a:hover { text-decoration: underline; }
.ae-specbox .ae-specs { margin-bottom: 0; }
.ae-specs { display: grid; gap: .45em; margin-bottom: var(--ae-gap-2); }
.ae-specs__row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: .5em;
align-items: baseline;
font-size: .88rem;
}
.ae-specs__row dt { color: var(--ae-text-muted); position: relative; overflow: hidden; }
.ae-specs__row dt::after {
content: "";
position: absolute;
bottom: .32em;
margin-left: .4em;
width: 100%;
border-bottom: 1px dotted var(--ae-border);
}
.ae-specs__row dd { margin: 0; text-align: right; }
/* ---------- Опции ---------- */
.ae-options { display: flex; flex-direction: column; gap: var(--ae-gap-2); margin-bottom: var(--ae-gap-2); }
.ae-option__name { font-size: .87rem; font-weight: 600; margin-bottom: .4em; }
.ae-option__values { display: flex; flex-wrap: wrap; gap: .4em; }
.ae-swatch {
display: inline-flex;
align-items: center;
gap: .4em;
padding: .45em .8em;
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius-sm);
background: var(--ae-surface);
font-size: .87rem;
cursor: pointer;
transition: border-color .15s, color .15s;
}
.ae-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.ae-swatch:hover { border-color: var(--ae-primary); }
.ae-swatch:has(input:checked) { border-color: var(--ae-primary); color: var(--ae-primary); font-weight: 600; }
.ae-swatch__price { color: var(--ae-text-muted); font-size: .82em; }
.ae-swatch img { width: 26px; height: 26px; border-radius: 3px; object-fit: cover; }
/* ---------- Блок покупки ---------- */
.ae-buybox {
display: flex;
flex-direction: column;
gap: var(--ae-gap-2);
padding: var(--ae-gap-3);
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius);
background: var(--ae-surface);
}
@media (min-width: 1200px) {
.ae-buybox.is-sticky { position: sticky; top: calc(var(--ae-header-h, 64px) + var(--ae-gap-2)); }
}
.ae-buybox__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5em; }
.ae-buybox__price .ae-price { font-size: 1.75rem; }
.ae-buybox__save {
display: inline-flex;
align-items: center;
padding: .2em .6em;
border-radius: var(--ae-radius-sm);
background: color-mix(in srgb, var(--ae-sale) 14%, var(--ae-surface));
color: var(--ae-sale);
font-size: .8rem;
font-weight: 700;
}
/*
Кнопки переносятся, а не выдавливают блок: подпись задаёт магазин,
а регистр — настройка «Заглавные на кнопках». «В сравнение»
капслоком в колонку 300 пикселей рядом с «В закладки» не влезает.
*/
.ae-buybox__row {
display: flex;
flex-wrap: wrap;
gap: .5em;
align-items: stretch;
}
.ae-buybox__row .ae-btn { flex: 1 1 8.5rem; min-width: 0; }
/* Значок на кнопке закладок и сравнения. Подпись переносится, значок —
нет: он и держит кнопку узнаваемой, когда текст ушёл на вторую строку. */
.ae-buybox__row .ae-btn svg { flex: none; }
.ae-buybox__row .ae-btn span { min-width: 0; }
/* Товар уже в закладках — значок закрашивается. Понять это по одной
смене подписи покупатель не успевает. */
.ae-buybox__row .ae-btn.is-active { border-color: var(--ae-sale); color: var(--ae-sale); }
.ae-buybox__row .ae-btn.is-active svg { fill: currentColor; }
.ae-buybox__note { font-size: .82rem; color: var(--ae-text-muted); }
.ae-stock { display: flex; align-items: center; gap: .45em; font-size: .9rem; font-weight: 500; }
.ae-stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.ae-stock.is-in { color: var(--ae-success); }
.ae-stock.is-low { color: var(--ae-rating); }
.ae-stock.is-out { color: var(--ae-text-muted); }
.ae-usp { display: flex; flex-direction: column; gap: .6em; padding-top: var(--ae-gap-2); border-top: 1px solid var(--ae-border); }
.ae-usp li { display: flex; align-items: flex-start; gap: .55em; font-size: .85rem; color: var(--ae-text-muted); }
.ae-usp svg { width: 17px; height: 17px; flex: none; color: var(--ae-primary); margin-top: .1em; }
/* Значок может быть и своей картинкой — размер задаём один. */
.ae-usp img { width: 17px; height: 17px; flex: none; object-fit: contain; margin-top: .1em; }
/* ---------- Вкладки описания ---------- */
/*
Блок вкладок под карточкой.
Вкладки с содержимым стояли прямо на фоне страницы: описание,
характеристики и отзывы висели в пустоте и выглядели вставкой,
а не частью карточки товара. Собираем их в такую же панель,
как и всё остальное на странице.
*/
.ae-product__tabs {
margin-bottom: var(--ae-gap-4);
padding: var(--ae-gap-2) var(--ae-gap-3) var(--ae-gap-3);
border: var(--ae-card-border) solid var(--ae-border);
border-radius: var(--ae-card-radius);
background: var(--ae-surface);
}
/* Полоса вкладок тянется во всю ширину панели, а не только под текстом:
иначе её граница обрывается посреди карточки. */
.ae-product__tabs .ae-tabs {
margin-inline: calc(var(--ae-gap-3) * -1);
padding-inline: var(--ae-gap-3);
}
/* Длинному описанию нужна своя ширина строки: во всю панель оно
читается тяжело. */
.ae-product__tabs .ae-rte { max-width: 82ch; }
@media (max-width: 575px) {
.ae-product__tabs { padding: var(--ae-gap-2); }
.ae-product__tabs .ae-tabs {
margin-inline: calc(var(--ae-gap-2) * -1);
padding-inline: var(--ae-gap-2);
}
}
/* ---------- Отзывы ---------- */
.ae-review {
padding: var(--ae-gap-2) 0;
border-bottom: 1px solid var(--ae-border);
}
.ae-review:last-child { border-bottom: 0; }
.ae-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5em var(--ae-gap-2); margin-bottom: .5em; }
.ae-review__author { font-weight: 600; }
.ae-review__date { font-size: .82rem; color: var(--ae-text-muted); margin-left: auto; }
/* Итог за выбранное количество: подсказка, а не вторая цена. */
.ae-price__total {
flex-basis: 100%;
font-size: .84rem;
color: var(--ae-text-muted);
}
.ae-price__total b { color: var(--ae-text); font-variant-numeric: tabular-nums; }
/* ---------- Таймер акции ---------- */
.ae-timer {
display: flex;
flex-direction: column;
gap: .4em;
padding: var(--ae-gap-2);
border-radius: var(--ae-radius-sm);
background: color-mix(in srgb, var(--ae-sale) 10%, var(--ae-surface));
border: 1px solid color-mix(in srgb, var(--ae-sale) 30%, transparent);
}
.ae-timer__label { font-size: .82rem; font-weight: 600; color: var(--ae-sale); }
.ae-timer__body { display: flex; gap: .5em; }
.ae-timer__cell {
display: flex;
flex-direction: column;
align-items: center;
min-width: 44px;
padding: .3em .4em;
border-radius: var(--ae-radius-sm);
background: var(--ae-surface);
}
.ae-timer__cell b {
font-family: var(--ae-font-head);
font-size: 1.15rem;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.ae-timer__cell i { font-style: normal; font-size: .65rem; color: var(--ae-text-muted); }
/* ---------- Сводка по оценкам ---------- */
.ae-rsummary {
display: grid;
gap: var(--ae-gap-3);
grid-template-columns: minmax(0, 1fr);
align-items: center;
padding: var(--ae-gap-3);
margin-bottom: var(--ae-gap-3);
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius);
background: var(--ae-surface);
}
@media (min-width: 576px) {
.ae-rsummary { grid-template-columns: auto minmax(0, 1fr); }
}
.ae-rsummary__score { display: flex; flex-direction: column; align-items: center; gap: .2em; }
.ae-rsummary__score b { font-family: var(--ae-font-head); font-size: 2.6rem; line-height: 1; }
.ae-rsummary__score small { font-size: .8rem; color: var(--ae-text-muted); }
.ae-rsummary__bars { display: flex; flex-direction: column; gap: .3em; }
.ae-rsummary__bar { display: flex; align-items: center; gap: .6em; font-size: .82rem; }
.ae-rsummary__num { width: 1em; color: var(--ae-text-muted); font-variant-numeric: tabular-nums; }
.ae-rsummary__track {
flex: 1 1 auto;
height: 6px;
border-radius: var(--ae-radius-pill);
background: var(--ae-surface-2);
overflow: hidden;
}
.ae-rsummary__track span { display: block; height: 100%; background: var(--ae-rating); }
.ae-rsummary__count { min-width: 2em; text-align: right; color: var(--ae-text-muted); font-variant-numeric: tabular-nums; }
/* ---------- Отзыв ---------- */
.ae-review__badge {
display: inline-flex;
align-items: center;
gap: .25em;
padding: .12em .5em;
border-radius: var(--ae-radius-pill);
background: color-mix(in srgb, var(--ae-success) 14%, var(--ae-surface));
color: var(--ae-success);
font-size: .72rem;
font-weight: 600;
}
.ae-review__pros b { color: var(--ae-success); }
.ae-review__cons b { color: var(--ae-sale); }
.ae-review__pros, .ae-review__cons { font-size: .9rem; margin-bottom: .35em; }
.ae-review__photos { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .6em; }
.ae-review__photos img {
width: 84px;
height: 84px;
object-fit: cover;
border-radius: var(--ae-radius-sm);
border: 1px solid var(--ae-border);
}
.ae-review__reply {
margin-top: .7em;
padding: var(--ae-gap-2);
border-radius: var(--ae-radius-sm);
background: var(--ae-surface-2);
font-size: .9rem;
}
.ae-review__reply b { color: var(--ae-primary); }
/* ---------- Форма отзыва ---------- */
.ae-rform {
margin-top: var(--ae-gap-3);
padding: var(--ae-gap-3);
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius);
background: var(--ae-surface);
}
.ae-rform h3 { margin-bottom: var(--ae-gap-2); font-size: var(--ae-fs-h4); }
/* Звёзды-переключатели: подсветка идёт от наведённой влево,
поэтому порядок в разметке обратный визуальному. */
.ae-rstars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .15em; }
.ae-rstars label { cursor: pointer; color: var(--ae-border); transition: color .12s; }
.ae-rstars svg { width: 26px; height: 26px; display: block; }
.ae-rstars input { position: absolute; opacity: 0; pointer-events: none; }
.ae-rstars label:hover,
.ae-rstars label:hover ~ label,
.ae-rstars label:has(input:checked),
.ae-rstars label:has(input:checked) ~ label { color: var(--ae-rating); }
.ae-rstars label:focus-within { outline: 2px solid var(--ae-primary); outline-offset: 2px; border-radius: 3px; }
/* ==================================================================
Заявки из карточки: поступление, снижение цены, «нашли дешевле».
Вторичные ссылки, а не кнопки: они не должны перетягивать внимание
с «Купить», но обязаны быть на виду — это последняя развилка перед
уходом посетителя.
================================================================== */
.ae-leads {
display: flex;
flex-wrap: wrap;
gap: var(--ae-gap-1) var(--ae-gap-2);
margin-top: var(--ae-gap-2);
}
.ae-leads__btn {
background: none;
border: 0;
padding: 0;
color: var(--ae-primary);
font: inherit;
font-size: .875rem;
text-align: left;
border-bottom: 1px dashed currentColor;
cursor: pointer;
}
.ae-leads__btn:hover { color: var(--ae-primary-hover); }
.ae-leadform {
display: flex;
flex-direction: column;
gap: var(--ae-gap-3);
}
/*
Шапка формы держится своей группой: заголовок, товар и пояснение
читаются как один абзац, а не как три поля через равные промежутки.
*/
.ae-leadform__head {
display: flex;
flex-direction: column;
gap: .35em;
}
.ae-leadform__fields {
display: flex;
flex-direction: column;
gap: var(--ae-gap-2);
}
.ae-leadform__product { font-weight: 600; }
.ae-leadform__note {
margin: 0;
color: var(--ae-text-muted);
font-size: .9rem;
line-height: 1.55;
}
.ae-leadform__price {
padding: .5rem .75rem;
background: var(--ae-surface-2);
border-radius: var(--ae-radius-sm);
font-size: .9rem;
}
/* ==================================================================
Вопросы и ответы.
Вопрос и ответ различаются знаком слева, а не цветом фона: цветные
плашки на длинной ветке превращаются в полосатый шум.
================================================================== */
.ae-qa {
display: flex;
flex-direction: column;
gap: var(--ae-gap-3);
margin-bottom: var(--ae-gap-3);
}
.ae-qa__item {
padding-bottom: var(--ae-gap-3);
border-bottom: 1px solid var(--ae-border);
}
.ae-qa__item:last-child { border-bottom: 0; padding-bottom: 0; }
.ae-qa__q,
.ae-qa__a {
display: flex;
gap: var(--ae-gap-2);
}
.ae-qa__a { margin-top: var(--ae-gap-2); padding-left: var(--ae-gap-3); }
.ae-qa__q p,
.ae-qa__a p { margin: .25rem 0 0; line-height: 1.6; }
.ae-qa__mark {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--ae-surface-2);
color: var(--ae-text-muted);
font-weight: 700;
}
.ae-qa__mark--a {
background: color-mix(in srgb, var(--ae-success) 16%, transparent);
color: var(--ae-success);
}
.ae-qa__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--ae-gap-1);
}
.ae-qa__date { color: var(--ae-text-muted); font-size: .8125rem; }
.ae-qa__pending {
margin: var(--ae-gap-2) 0 0 calc(28px + var(--ae-gap-2) + var(--ae-gap-3));
color: var(--ae-text-muted);
font-size: .875rem;
font-style: italic;
}
.ae-qa__useful {
display: inline-flex;
align-items: center;
gap: .35em;
margin-top: var(--ae-gap-2);
background: none;
border: 0;
padding: 0;
color: var(--ae-text-muted);
font: inherit;
font-size: .8125rem;
cursor: pointer;
}
.ae-qa__useful:hover { color: var(--ae-primary); }
.ae-qa__useful.is-done { color: var(--ae-success); cursor: default; }
.ae-qa__useful i { font-style: normal; font-weight: 600; }
.ae-qa__empty { color: var(--ae-text-muted); }
.ae-qform {
display: flex;
flex-direction: column;
gap: var(--ae-gap-2);
max-width: 640px;
padding-top: var(--ae-gap-3);
border-top: 1px solid var(--ae-border);
}
.ae-qform__title { margin: 0; font-size: 1.05rem; }
/* ==================================================================
Купить вместе.
================================================================== */
.ae-together__body {
display: grid;
gap: var(--ae-gap-3);
align-items: center;
background: var(--ae-surface);
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius);
padding: var(--ae-gap-3);
}
@media (min-width: 992px) {
.ae-together__body { grid-template-columns: minmax(0, 1fr) 260px; }
}
.ae-together__items {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ae-gap-2);
}
.ae-together__plus {
color: var(--ae-text-muted);
font-size: 1.4rem;
line-height: 1;
}
.ae-together__item {
display: grid;
grid-template-columns: auto 84px minmax(0, 1fr);
grid-template-rows: auto auto;
align-items: center;
gap: 0 var(--ae-gap-1);
width: 250px;
cursor: pointer;
}
.ae-together__item.is-main { cursor: default; }
.ae-together__item input { grid-row: 1 / span 2; }
.ae-together__media {
grid-row: 1 / span 2;
display: block;
aspect-ratio: 1;
background: var(--ae-surface-2);
border-radius: var(--ae-radius-sm);
overflow: hidden;
}
.ae-together__media img { width: 100%; height: 100%; object-fit: contain; }
.ae-together__name {
font-size: .875rem;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ae-together__price { font-weight: 600; }
.ae-together__total {
display: flex;
flex-direction: column;
gap: var(--ae-gap-2);
}
.ae-together__sum {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--ae-gap-1);
}
.ae-together__sum b { font-size: 1.3rem; color: var(--ae-price); }
/* ==================================================================
Расчёт доставки в карточке.
================================================================== */
.ae-delivery {
margin-top: var(--ae-gap-2);
padding: var(--ae-gap-2);
background: var(--ae-surface-2);
border-radius: var(--ae-radius-sm);
}
.ae-delivery__head {
display: flex;
align-items: center;
gap: .45em;
margin-bottom: var(--ae-gap-1);
}
.ae-delivery__form {
display: grid;
gap: .4rem;
grid-template-columns: 1fr 1fr;
}
.ae-delivery__form > :nth-child(2) { grid-column: 1 / -1; }
.ae-delivery__form .ae-select,
.ae-delivery__form .ae-input { font-size: .875rem; }
.ae-delivery__result { margin-top: var(--ae-gap-2); }
.ae-delivery__list {
list-style: none;
margin: 0;
padding: 0;
font-size: .875rem;
}
.ae-delivery__list li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--ae-gap-1);
padding: .35rem 0;
border-bottom: 1px dashed var(--ae-border);
}
.ae-delivery__list li:last-child { border-bottom: 0; }
.ae-delivery__error { color: var(--ae-text-muted); font-size: .875rem; line-height: 1.5; }
/* ---------- Отзывы о магазине ---------- */
.ae-rfilters {
display: flex;
flex-wrap: wrap;
gap: .4rem;
margin-bottom: var(--ae-gap-3);
}
.ae-rfilter {
display: inline-flex;
align-items: center;
gap: .25em;
padding: .3rem .7rem;
background: var(--ae-surface-2);
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius-pill);
color: var(--ae-text);
font-size: .875rem;
}
.ae-rfilter:hover { border-color: var(--ae-primary); }
.ae-rfilter.is-active {
background: var(--ae-primary);
border-color: var(--ae-primary);
color: var(--ae-on-primary);
}
.ae-rfilter svg { color: var(--ae-rating); }
.ae-rfilter.is-active svg { color: currentColor; }
.ae-review__city { color: var(--ae-text-muted); font-size: .8125rem; }
.ae-rform--shop { margin-top: 0; }
/* ---------- Отзывы о магазине на главной ---------- */
.ae-shopreviews {
display: grid;
gap: var(--ae-gap-3);
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 576px) {
.ae-shopreviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
.ae-shopreviews { grid-template-columns: repeat(var(--ae-sr-cols, 3), minmax(0, 1fr)); }
}
.ae-shopreview {
display: flex;
flex-direction: column;
gap: var(--ae-gap-1);
background: var(--ae-surface);
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius);
padding: var(--ae-gap-3);
}
.ae-shopreview__text {
margin: 0;
flex: 1;
line-height: 1.6;
/* Пять строк: карточки в ряду одной высоты, а полный текст
покупатель читает на странице отзывов. */
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ae-shopreview__meta {
display: flex;
flex-wrap: wrap;
gap: var(--ae-gap-1);
color: var(--ae-text-muted);
font-size: .8125rem;
}
.ae-shopreview__meta b { color: var(--ae-text); }
/* ---------- Вкладки раскрывающимися секциями ----------
Второй режим блока вкладок. Полосу скрипт убирает, а кнопки
переставляет заголовками к своим панелям — разметка при этом
остаётся одна на оба режима.
Кому это нужно: длинному описанию с характеристиками и отзывами
на телефоне. Полоса вкладок там прокручивается вбок, и покупатель
не видит, что за «Описанием» есть ещё три раздела. */
.ae-product__tabs.is-sections > [data-aero-tab] {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ae-gap-1);
width: 100%;
padding: var(--ae-gap-2) 0;
border: 0;
border-top: 1px solid var(--ae-border);
background: none;
color: inherit;
font: inherit;
font-weight: 600;
text-align: left;
cursor: pointer;
}
/* Первый заголовок стоит сразу под шапкой блока: линия над ним
удваивала бы границу самой панели. */
.ae-product__tabs.is-sections > [data-aero-tab]:first-of-type {
border-top: 0;
padding-top: 0;
}
.ae-product__tabs.is-sections > [data-aero-tab]::after {
content: "";
flex: none;
width: 9px;
height: 9px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px);
transition: transform var(--ae-motion) ease;
opacity: .55;
}
.ae-product__tabs.is-sections > [data-aero-tab][aria-expanded="true"]::after {
transform: rotate(225deg) translate(-2px, -2px);
}
.ae-product__tabs.is-sections > .ae-tabpanel {
padding-bottom: var(--ae-gap-2);
}
/* Счётчик у «Вопросов» и «Отзывов» в секции не на полосе, а в строке
заголовка — прижимаем его к тексту, а не к стрелке. */
.ae-product__tabs.is-sections > [data-aero-tab] i {
margin-right: auto;
margin-left: .5em;
}
/* ---------- Таблица размеров ----------
Ссылка стоит в строке с названием опции, справа: покупатель
выбирает размер здесь же, и подсказка нужна на расстоянии взгляда,
а не отдельной строкой под кнопкой «купить». */
.ae-option__name {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ae-gap-1);
flex-wrap: wrap;
}
.ae-sizelink {
display: inline-flex;
align-items: center;
gap: .35em;
border: 0;
padding: 0;
background: none;
font: inherit;
font-size: .88em;
font-weight: 400;
color: var(--ae-primary);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.ae-sizelink:hover { color: var(--ae-primary-hover); }
.ae-sizelink svg { flex: none; }
.ae-sizechart__title { margin: 0 0 .4em; font-size: 1.15em; }
.ae-sizechart__intro { margin: 0 0 var(--ae-gap-2); color: var(--ae-text-muted); font-size: .92em; }
/* Широкая сетка прокручивается внутри окна, а не растягивает его. */
.ae-sizechart__scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.ae-sizechart__table {
width: 100%;
border-collapse: collapse;
font-size: .92em;
}
.ae-sizechart__table th,
.ae-sizechart__table td {
padding: .55em .7em;
text-align: left;
border: 1px solid var(--ae-border);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.ae-sizechart__table thead th {
background: var(--ae-surface-2);
font-size: .9em;
font-weight: 600;
}
/* Первая колонка — сам размер: он якорь строки и должен читаться
как заголовок, а не как ещё одно число. */
.ae-sizechart__table tbody th {
background: var(--ae-surface-2);
font-weight: 600;
}
.ae-sizechart__note {
margin: var(--ae-gap-2) 0 0;
color: var(--ae-text-muted);
font-size: .85em;
}
/* ---------- Условия продажи и калькулятор ----------
Покупатель узнаёт о шаге и минимуме до того, как поле само поправит
его число: молчаливая правка читается как поломка. */
.ae-unitnote {
display: flex;
flex-wrap: wrap;
gap: .4em .9em;
margin-top: .6em;
font-size: .86em;
color: var(--ae-text-muted);
}
.ae-unitnote span {
display: inline-flex;
align-items: center;
gap: .35em;
}
.ae-unitnote span + span::before {
content: "";
width: 3px;
height: 3px;
border-radius: 50%;
background: currentColor;
opacity: .5;
margin-right: .5em;
}
.ae-calc {
margin-top: var(--ae-gap-2);
padding: var(--ae-gap-2);
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius);
background: var(--ae-surface-2);
}
.ae-calc__title {
font-weight: 600;
margin-bottom: .6em;
}
.ae-calc__row {
display: flex;
gap: var(--ae-gap-1);
align-items: flex-end;
}
.ae-calc__field {
flex: 1 1 auto;
min-width: 0;
display: grid;
gap: .3em;
font-size: .85em;
color: var(--ae-text-muted);
}
/* Запасу хватает трёх знаков: это проценты, а не площадь. */
.ae-calc__field--narrow {
flex: 0 0 92px;
}
.ae-calc__out {
margin-top: .7em;
font-size: 1.05em;
}
.ae-calc__out b {
font-size: 1.25em;
color: var(--ae-primary);
}
.ae-calc__out span {
color: var(--ae-text-muted);
font-size: .88em;
}
.ae-calc [data-aero-calc-apply] {
margin-top: .7em;
}
/* ---------- Лестница оптовых цен ----------
Ступень, на которой покупатель сейчас, подсвечена: без неё таблица
читается как справка, а не как предложение. */
.ae-tiers {
margin-top: var(--ae-gap-2);
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius);
overflow: hidden;
}
.ae-tiers__title {
padding: .5em var(--ae-gap-2);
background: var(--ae-surface-2);
font-size: .88em;
font-weight: 600;
}
.ae-tiers__table {
width: 100%;
border-collapse: collapse;
font-size: .92em;
}
.ae-tiers__table td {
padding: .5em var(--ae-gap-2);
border-top: 1px solid var(--ae-border);
font-variant-numeric: tabular-nums;
}
.ae-tiers__table tr:first-child td {
border-top: 0;
}
.ae-tiers__table tr.is-on {
background: color-mix(in srgb, var(--ae-primary) 8%, transparent);
}
.ae-tiers__table tr.is-on td {
font-weight: 600;
}
.ae-tiers__qty { color: var(--ae-text-muted); }
.ae-tiers__table tr.is-on .ae-tiers__qty { color: inherit; }
.ae-tiers__price { text-align: right; }
.ae-tiers__saving {
width: 1%;
text-align: right;
white-space: nowrap;
color: var(--ae-sale);
}
.ae-tierhint {
margin-top: .6em;
font-size: .86em;
color: var(--ae-success);
}
/* ==================================================================
Корзина и оформление.
================================================================== */
.ae-cart {
display: grid;
gap: var(--ae-gap-3);
/* minmax(0, 1fr), а не 1fr: колонка с 1fr не сжимается уже своего
содержимого, и длинное название товара распирает всю страницу. */
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
@media (min-width: 992px) {
.ae-cart { grid-template-columns: minmax(0, 1fr) 340px; }
.ae-cart__summary { position: sticky; top: calc(var(--ae-header-h, 64px) + var(--ae-gap-2)); }
}
/* ---------- Строка товара ---------- */
.ae-cartline {
display: grid;
grid-template-columns: 88px minmax(0, 1fr);
gap: var(--ae-gap-2);
padding: var(--ae-gap-2) 0;
border-bottom: 1px solid var(--ae-border);
}
.ae-cartline:first-child { padding-top: 0; }
.ae-cartline:last-child { border-bottom: 0; }
.ae-cartline__media {
width: 88px;
aspect-ratio: 1 / 1;
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius-sm);
background: var(--ae-surface);
overflow: hidden;
}
.ae-cartline__media img { width: 100%; height: 100%; object-fit: contain; }
.ae-cartline__body { display: flex; flex-direction: column; gap: .4em; min-width: 0; }
.ae-cartline__name { font-weight: 500; line-height: 1.35; }
.ae-cartline__opts { font-size: .82rem; color: var(--ae-text-muted); }
.ae-cartline__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ae-gap-2); margin-top: auto; }
.ae-cartline__total { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ae-cartline__remove { color: var(--ae-text-muted); display: flex; align-items: center; gap: .3em; font-size: .82rem; }
.ae-cartline__remove:hover { color: var(--ae-danger); }
@media (min-width: 768px) {
.ae-cartline { grid-template-columns: 104px minmax(0, 1fr); }
.ae-cartline__media { width: 104px; }
}
/* ---------- Итоги ---------- */
.ae-summary {
padding: var(--ae-gap-3);
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius);
background: var(--ae-surface);
}
.ae-summary__rows { display: flex; flex-direction: column; gap: .6em; margin-bottom: var(--ae-gap-2); }
.ae-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ae-gap-2); font-size: .92rem; }
.ae-summary__row span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ae-summary__row.is-total {
padding-top: .6em;
border-top: 1px solid var(--ae-border);
font-size: 1.15rem;
font-weight: 700;
}
/* ---------- Прогресс до бесплатной доставки ---------- */
.ae-freeship { margin-bottom: var(--ae-gap-2); font-size: .85rem; }
.ae-freeship__bar {
height: 6px;
margin-top: .45em;
border-radius: var(--ae-radius-pill);
background: var(--ae-surface-2);
overflow: hidden;
}
.ae-freeship__fill {
height: 100%;
border-radius: inherit;
background: var(--ae-success);
transition: width .3s ease;
}
/* ---------- Выпадающая корзина ---------- */
.ae-minicart {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 400;
width: min(92vw, 380px);
max-height: 70vh;
display: flex;
flex-direction: column;
background: var(--ae-surface);
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius);
box-shadow: var(--ae-shadow-4);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity .16s, transform .16s, visibility .16s;
}
.ae-minicart.is-open { opacity: 1; visibility: visible; transform: none; }
.ae-minicart__body { overflow-y: auto; padding: var(--ae-gap-2); }
.ae-minicart__foot { padding: var(--ae-gap-2); border-top: 1px solid var(--ae-border); display: flex; flex-direction: column; gap: .5em; }
/* Шапка нужна только выдвижной панели: у выпадающего блока закрытие —
это клик мимо, и лишняя строка только съедает высоту. */
.ae-minicart__head { display: none; }
/* ---------- Выдвижная корзина ----------
Та же разметка, другая подача. Отдельная панель со своим содержимым
означала бы две вёрстки корзины и два места, где чинить одну ошибку. */
:root[data-aero-cart="drawer"] .ae-minicart {
position: fixed;
inset: 0 0 0 auto;
top: 0;
width: min(94vw, 420px);
max-height: none;
z-index: 1150;
border-width: 0 0 0 1px;
border-radius: 0;
transform: translateX(100%);
transition: transform .24s ease, visibility .24s;
box-shadow: var(--ae-shadow-side);
opacity: 1;
}
:root[data-aero-cart="drawer"] .ae-minicart.is-open { transform: none; }
:root[data-aero-cart="drawer"] .ae-minicart__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ae-gap-2);
padding: var(--ae-gap-2);
border-bottom: 1px solid var(--ae-border);
font-size: 1.05rem;
}
:root[data-aero-cart="drawer"] .ae-minicart__body { flex: 1 1 auto; }
/* Рекомендации не должны выдавливать итоги за нижний край экрана:
товар в корзине важнее товара, который к нему предлагают. */
:root[data-aero-cart="drawer"] .ae-minicart__rec { flex: 0 1 auto; max-height: 38%; overflow-y: auto; }
:root[data-aero-cart="drawer"] .ae-minicart__foot { flex: none; }
.ae-minicart__foot[hidden] { display: none; }
/* ---------- Рекомендации в корзине ---------- */
.ae-minicart__rec { border-top: 1px solid var(--ae-border); padding: var(--ae-gap-2); }
.ae-minicart__rec[hidden] { display: none; }
.ae-cartrec__title {
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--ae-text-muted);
margin-bottom: .6em;
}
.ae-cartrec__item { display: flex; gap: .6em; align-items: flex-start; margin-bottom: .7em; }
.ae-cartrec__item:last-child { margin-bottom: 0; }
.ae-cartrec__media { flex: none; width: 56px; height: 56px; }
.ae-cartrec__media img { width: 100%; height: 100%; object-fit: contain; }
.ae-cartrec__body { min-width: 0; flex: 1 1 auto; }
.ae-cartrec__name { font-size: .85rem; line-height: 1.3; color: var(--ae-text); }
.ae-cartrec__name:hover { color: var(--ae-primary); }
.ae-cartrec__foot { display: flex; align-items: center; justify-content: space-between; gap: .5em; margin-top: .35em; }
.ae-cartrec__foot .ae-price { font-size: .95rem; }
/* ---------- Оформление ---------- */
.ae-checkout { display: grid; gap: var(--ae-gap-3); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 992px) {
.ae-checkout { grid-template-columns: minmax(0, 1fr) 360px; }
}
.ae-step {
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius);
background: var(--ae-surface);
margin-bottom: var(--ae-gap-2);
overflow: hidden;
}
.ae-step__head {
display: flex;
align-items: center;
gap: var(--ae-gap-2);
padding: var(--ae-gap-2);
border-bottom: 1px solid var(--ae-border);
}
.ae-step__num {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--ae-radius-pill);
background: var(--ae-primary);
color: var(--ae-on-primary);
font-size: .85rem;
font-weight: 700;
flex: none;
}
.ae-step__title { margin: 0; font-size: 1rem; }
.ae-step__body { padding: var(--ae-gap-3); }
.ae-grid2 { display: grid; gap: 0 var(--ae-gap-2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) {
.ae-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ae-grid2 .is-full { grid-column: 1 / -1; }
}
/* ---------- Строки корзины на странице ---------- */
.ae-cart__lines {
padding: var(--ae-gap-2) var(--ae-gap-3);
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius);
background: var(--ae-surface);
}
.ae-cart__extra { margin-top: var(--ae-gap-2); }
.ae-cartline__price { font-size: .85rem; white-space: nowrap; }
.ae-freeship__text { display: block; font-size: .85rem; }
.ae-freeship__text.is-done { color: var(--ae-success); font-weight: 600; }
@media (max-width: 575px) {
.ae-cartline__foot { gap: .5em; }
.ae-cartline__price { display: none; }
}
/* ==================================================================
Одностраничное оформление.
================================================================== */
.ae-checkout__main { min-width: 0; }
.ae-checkout__aside { min-width: 0; }
/* Пояснение под составом заказа: без него пустое место под итогом
читается как незагрузившийся блок. */
.ae-summary__note {
margin: var(--ae-gap-2) 0 0;
font-size: .82rem;
line-height: 1.45;
color: var(--ae-text-muted);
}
@media (min-width: 992px) {
.ae-checkout__aside { position: sticky; top: calc(var(--ae-header-h, 64px) + var(--ae-gap-2)); }
}
/* Свёрнутый шаг показывает только заголовок: открытых форм на экране
должно быть ровно столько, сколько покупателю нужно прямо сейчас. */
.ae-step__body { display: none; }
.ae-step.is-open .ae-step__body { display: block; }
.ae-step.is-done .ae-step__num {
background: var(--ae-success);
font-size: 0;
}
.ae-step.is-done .ae-step__num::after {
content: "✓";
font-size: 14px;
}
.ae-step.is-done .ae-step__head { cursor: pointer; }
.ae-checkout__loading {
display: flex;
justify-content: center;
padding: var(--ae-gap-3);
}
.ae-checkout__tabs {
display: flex;
gap: .3em;
margin-bottom: var(--ae-gap-2);
border-bottom: 1px solid var(--ae-border);
}
.ae-checkout__tabs button {
padding: .6em 1em;
border-bottom: 2px solid transparent;
color: var(--ae-text-muted);
font-weight: 600;
font-size: .92rem;
}
.ae-checkout__tabs button.is-active { color: var(--ae-text); border-bottom-color: var(--ae-primary); }
/* Подписи вкладок приходят из языка магазина и бывают длинными:
«Оформить заказ без регистрации» на 375px разваливало строку вкладок
на три уровня. Прятать вторую вкладку нельзя — это вход для тех, кто
уже покупал, поэтому уменьшаем шрифт, а не скрываем. */
@media (max-width: 575px) {
.ae-checkout__tabs button {
flex: 1 1 0;
padding: .55em .4em;
font-size: .8rem;
line-height: 1.3;
text-wrap: balance;
}
}
.ae-cform__title { margin: var(--ae-gap-3) 0 var(--ae-gap-2); font-size: var(--ae-fs-h4); }
.ae-cform .ae-field { margin-bottom: var(--ae-gap-2); }
/* ---------- Способы доставки и оплаты ---------- */
.ae-methods__group { margin-bottom: var(--ae-gap-2); }
.ae-methods__title {
margin-bottom: .5em;
font-size: .8rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--ae-text-muted);
}
.ae-method {
display: flex;
align-items: center;
gap: .7em;
padding: .8em 1em;
margin-bottom: .4em;
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius-sm);
background: var(--ae-surface);
cursor: pointer;
transition: border-color .15s, background-color .15s;
}
.ae-method:hover { border-color: var(--ae-primary); }
.ae-method:has(input:checked) {
border-color: var(--ae-primary);
background: color-mix(in srgb, var(--ae-primary) 6%, var(--ae-surface));
}
.ae-method input { accent-color: var(--ae-primary); flex: none; }
.ae-method__name { flex: 1 1 auto; font-weight: 500; }
.ae-method__price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ---------- Итог ---------- */
.ae-confirm__items {
display: flex;
flex-direction: column;
gap: .5em;
max-height: 260px;
overflow-y: auto;
margin-bottom: var(--ae-gap-2);
padding-bottom: var(--ae-gap-2);
border-bottom: 1px solid var(--ae-border);
font-size: .88rem;
}
.ae-confirm__item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: .6em;
align-items: baseline;
}
/* ==================================================================
Список товаров таблицей.
Третий вид рядом с сеткой и списком — для каталогов, где товары
различаются двумя цифрами: крепёж, кабель, расходники, опт.
Строка вместо карточки, покупка не отходя от строки.
================================================================== */
/* Прокрутка вбок живёт внутри обёртки, а не у страницы: шесть колонок
на телефон не помещаются, но уезжать вбок должна таблица, а не сайт. */
.ae-tablewrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--ae-border);
border-radius: var(--ae-card-radius);
background: var(--ae-surface);
}
.ae-ptable {
width: 100%;
border-collapse: collapse;
font-size: .95em;
}
.ae-ptable th,
.ae-ptable td {
padding: .7em .8em;
text-align: left;
vertical-align: middle;
border-bottom: 1px solid var(--ae-border);
}
.ae-ptable tbody tr:last-child td {
border-bottom: 0;
}
.ae-ptable thead th {
position: sticky;
top: 0;
z-index: 1;
background: var(--ae-surface-2);
font-size: .82em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--ae-text-muted);
white-space: nowrap;
}
.ae-ptable tbody tr:hover {
background: var(--ae-surface-2);
}
/* ---------- Колонки ---------- */
.ae-ptable__pic {
width: 56px;
padding-right: 0;
}
.ae-ptable__pic img {
display: block;
width: 48px;
height: 48px;
object-fit: contain;
border-radius: var(--ae-radius-sm);
}
.ae-ptable__name {
color: inherit;
text-decoration: none;
font-weight: 500;
}
.ae-ptable__name:hover {
color: var(--ae-primary);
}
.ae-ptable__sku {
margin-top: .15em;
font-size: .82em;
color: var(--ae-text-muted);
}
/* Характеристики выровнены по колонкам, поэтому и цифры в них
должны стоять друг под другом. */
.ae-ptable__spec {
white-space: nowrap;
font-variant-numeric: tabular-nums;
color: var(--ae-text-muted);
}
.ae-ptable__stock {
white-space: nowrap;
}
.ae-ptable__price {
white-space: nowrap;
text-align: right;
font-variant-numeric: tabular-nums;
}
.ae-ptable__price b {
font-size: 1.08em;
color: var(--ae-price);
}
.ae-ptable__price .ae-price__old {
display: block;
font-size: .82em;
}
.ae-ptable__ask {
color: var(--ae-text-muted);
font-size: .9em;
}
.ae-ptable__buy {
width: 1%;
white-space: nowrap;
text-align: right;
}
.ae-ptable__order {
display: flex;
align-items: center;
justify-content: flex-end;
gap: .5em;
}
.ae-ptable__order .ae-btn {
display: inline-flex;
align-items: center;
gap: .4em;
}
.ae-ptable__order .ae-btn svg {
flex: none;
}
/* Уменьшенный счётчик количества: в строке таблицы обычный занимает
треть её высоты. */
.ae-qty--sm {
height: 34px;
}
.ae-qty--sm input {
width: 42px;
}
.ae-qty--sm button {
width: 30px;
}
.ae-ptable__print {
display: inline-flex;
align-items: center;
gap: .4em;
}
.ae-ptable__print svg {
flex: none;
}
/* ---------- Узкие экраны ----------
На телефоне фотография и характеристики уходят: там остаются
название, цена и кнопка — то, ради чего в таблицу и смотрят. */
@media (max-width: 767px) {
.ae-ptable__pic,
.ae-ptable__spec {
display: none;
}
.ae-ptable th,
.ae-ptable td {
padding: .6em .5em;
}
.ae-ptable__order {
flex-wrap: wrap;
gap: .35em;
}
}
/* На телефоне из строки уходит всё, кроме сути.
Сначала подпись на кнопке, затем счётчик количества: вместе они
занимают половину ширины экрана, и кнопка «купить» оказывалась
за краем — покупателю приходилось возить таблицу вбок, чтобы
нажать на то, ради чего он сюда и пришёл. Количество правится
в корзине, а с телефона чаще берут по одной штуке. */
@media (max-width: 575px) {
.ae-ptable__order .ae-btn span {
display: none;
}
.ae-ptable__order .ae-btn {
padding-inline: .7em;
}
.ae-ptable .ae-qty {
display: none;
}
/* Освободившееся отдаём названию: в колонке на 89 пикселей оно
разваливалось на четыре строки. */
.ae-ptable__stock,
.ae-ptable__price {
width: 1%;
white-space: nowrap;
}
}
/* ==================================================================
Модальное окно темы и быстрый просмотр.
Своё окно, а не bootstrap-модалка: нам нужен предсказуемый размер,
собственная сетка внутри и работа без jQuery.
================================================================== */
.ae-modal {
position: fixed;
inset: 0;
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
padding: var(--ae-gap-2);
}
.ae-modal[hidden] { display: none; }
.ae-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .58);
animation: ae-fade .18s ease;
}
.ae-modal__window {
position: relative;
z-index: 1;
width: min(100%, 900px);
max-height: min(90vh, 720px);
overflow-y: auto;
background: var(--ae-surface);
border-radius: var(--ae-radius);
box-shadow: var(--ae-shadow-4);
animation: ae-pop .2s ease;
}
/*
Форма из нескольких полей в окне на 900 пикселей выглядит потерянной:
подписи отрываются от полей, галочка согласия уезжает от кнопки.
*/
.ae-modal__window--narrow { width: min(100%, 520px); }
.ae-modal__close {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--ae-radius-pill);
background: var(--ae-surface);
border: 1px solid var(--ae-border);
color: var(--ae-text-muted);
}
.ae-modal__close:hover { color: var(--ae-text); background: var(--ae-surface-2); }
/*
Отступы живут на окне, а не в каждом вложенном шаблоне: содержимое
приходит с сервера, и очередная форма непременно про них забудет —
так уже вышло с заявками из карточки.
Верхний отступ считается от кнопки закрытия, иначе заголовок лезет
под крестик на узком экране.
*/
.ae-modal__body {
min-height: 120px;
padding: var(--ae-gap-3);
}
.ae-modal__body > :first-child { margin-top: 0; }
.ae-modal__body > :last-child { margin-bottom: 0; }
.ae-modal__title {
margin: 0;
font-size: var(--ae-fs-h4);
line-height: 1.25;
}
/* Заголовок не должен подлезать под крестик. */
.ae-modal__body h2,
.ae-modal__body h3,
.ae-modal__body .ae-modal__title { padding-right: 44px; }
@media (max-width: 575px) {
.ae-modal { padding: 0; align-items: flex-end; }
/*
На телефоне окно прижимается к низу и занимает ширину экрана:
так до кнопки достаёт большой палец, а не только вторая рука.
*/
.ae-modal__window,
.ae-modal__window--narrow {
width: 100%;
max-height: 92vh;
border-radius: var(--ae-radius) var(--ae-radius) 0 0;
}
.ae-modal__body { padding: var(--ae-gap-2); }
}
.ae-modal__loading {
display: flex;
align-items: center;
justify-content: center;
min-height: 260px;
}
@keyframes ae-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ae-pop {
from { opacity: 0; transform: translateY(12px) scale(.98); }
to { opacity: 1; transform: none; }
}
/* ---------- Крутилка ---------- */
.ae-spinner {
width: 30px;
height: 30px;
border-radius: 50%;
border: 2.5px solid var(--ae-border);
border-top-color: var(--ae-primary);
animation: ae-spin .7s linear infinite;
}
@keyframes ae-spin { to { transform: rotate(360deg); } }
/* ---------- Быстрый просмотр ---------- */
.ae-qv {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--ae-gap-3);
}
@media (min-width: 768px) {
.ae-qv { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
.ae-qv__main {
aspect-ratio: 1 / 1;
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius);
background: var(--ae-surface);
overflow: hidden;
margin-bottom: var(--ae-gap-2);
}
.ae-qv__main img { width: 100%; height: 100%; object-fit: contain; }
.ae-qv__body { display: flex; flex-direction: column; gap: var(--ae-gap-2); min-width: 0; }
.ae-qv__title { margin: 0; font-size: var(--ae-fs-h3); }
.ae-qv__foot {
display: flex;
flex-direction: column;
gap: var(--ae-gap-2);
margin-top: auto;
padding-top: var(--ae-gap-2);
border-top: 1px solid var(--ae-border);
}
/* ---------- Быстрый заказ ---------- */
.ae-qo { display: flex; flex-direction: column; gap: var(--ae-gap-2); }
.ae-qo__title { margin: 0; font-size: var(--ae-fs-h3); }
.ae-qo .ae-field { margin: 0; }
.ae-qo__items {
display: flex;
flex-direction: column;
gap: .5em;
padding: var(--ae-gap-2);
border-radius: var(--ae-radius-sm);
background: var(--ae-surface-2);
font-size: .88rem;
max-height: 220px;
overflow-y: auto;
}
.ae-qo__item { display: flex; align-items: center; gap: .6em; }
.ae-qo__item img { width: 44px; height: 44px; object-fit: contain; border-radius: 4px; background: var(--ae-surface); flex: none; }
.ae-qo__item span { flex: 1 1 auto; min-width: 0; }
.ae-qo__item b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ae-qo__total {
display: flex;
justify-content: space-between;
padding-top: .5em;
border-top: 1px solid var(--ae-border);
font-size: 1rem;
}
.ae-qo__done {
display: flex;
flex-direction: column;
align-items: center;
gap: .6em;
padding: var(--ae-gap-4) var(--ae-gap-2);
text-align: center;
color: var(--ae-success);
}
.ae-qo__done h3 { margin: 0; color: var(--ae-text); font-size: var(--ae-fs-h4); }
/* ==================================================================
Блог: лента, статья, комментарии.
Ширина текста статьи ограничена отдельно от сетки страницы: строка
длиной во весь экран читается тяжело независимо от того, сколько
места отдал макет.
================================================================== */
/* ---------- Лента ---------- */
.ae-posts {
display: grid;
gap: var(--ae-gap-3);
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 576px) {
.ae-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
.ae-posts { grid-template-columns: repeat(var(--ae-post-cols, 3), minmax(0, 1fr)); }
}
.ae-post {
display: flex;
flex-direction: column;
background: var(--ae-surface);
border: var(--ae-card-border) solid var(--ae-border);
border-radius: var(--ae-card-radius);
box-shadow: var(--ae-card-shadow);
overflow: hidden;
transition: border-color var(--ae-motion), box-shadow var(--ae-motion), transform var(--ae-motion);
}
.ae-post:hover {
border-color: var(--ae-card-hover-border);
box-shadow: var(--ae-card-hover-shadow);
transform: translateY(var(--ae-card-lift));
}
.ae-post__media {
display: block;
aspect-ratio: 16 / 10;
background: var(--ae-surface-2);
overflow: hidden;
}
.ae-post__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .35s;
}
.ae-post:hover .ae-post__media img { transform: scale(1.04); }
.ae-post__noimg {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: var(--ae-text-muted);
}
.ae-post__noimg svg { width: 40px; height: 40px; }
.ae-post__body {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--ae-gap-1);
padding: var(--ae-gap-2);
}
.ae-post__meta {
display: flex;
flex-wrap: wrap;
gap: var(--ae-gap-1);
color: var(--ae-text-muted);
font-size: .8125rem;
}
.ae-post__meta > * + *::before {
content: '·';
margin-right: .4em;
}
.ae-post__title {
margin: 0;
font-size: 1.0625rem;
line-height: 1.35;
text-wrap: balance;
}
.ae-post__title a { color: inherit; }
.ae-post__title a:hover { color: var(--ae-primary); }
.ae-post__intro {
margin: 0;
color: var(--ae-text-muted);
font-size: .9rem;
line-height: 1.55;
/* Три строки анонса: карточки в ряду остаются одной высоты,
даже когда тексты у авторов разной длины. */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ae-post__more {
display: inline-flex;
align-items: center;
gap: .35em;
margin-top: auto;
padding-top: var(--ae-gap-1);
font-size: .9rem;
font-weight: 600;
}
.ae-post__more svg { transition: transform .15s; }
.ae-post:hover .ae-post__more svg { transform: translateX(3px); }
/* ---------- Боковая колонка ---------- */
.ae-blog-aside {
display: flex;
flex-direction: column;
gap: var(--ae-gap-3);
}
.ae-blog-aside__box {
background: var(--ae-surface);
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius);
padding: var(--ae-gap-2);
}
.ae-blog-aside__title {
margin: 0 0 var(--ae-gap-1);
font-size: 1rem;
text-transform: var(--ae-head-transform);
}
.ae-blog-aside__list {
list-style: none;
margin: 0;
padding: 0;
}
.ae-blog-aside__list li + li { border-top: 1px solid var(--ae-border); }
.ae-blog-aside__list a {
display: block;
padding: .5rem 0;
color: inherit;
font-size: .9375rem;
}
.ae-blog-aside__list a:hover { color: var(--ae-primary); }
/* ---------- Метки ---------- */
.ae-tagcloud {
display: flex;
flex-wrap: wrap;
gap: .4rem;
}
.ae-tag {
display: inline-flex;
align-items: center;
gap: .35em;
padding: .3rem .6rem;
background: var(--ae-surface-2);
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius-pill);
color: var(--ae-text);
font-size: .8125rem;
line-height: 1.2;
}
.ae-tag:hover {
border-color: var(--ae-primary);
color: var(--ae-primary);
}
.ae-tag i {
font-style: normal;
color: var(--ae-text-muted);
font-size: .75em;
}
/* ---------- Статья ---------- */
.ae-article {
background: var(--ae-surface);
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius);
padding: var(--ae-gap-3);
margin-bottom: var(--ae-gap-4);
}
.ae-article__title {
margin: 0 0 var(--ae-gap-1);
font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
line-height: 1.2;
text-wrap: balance;
}
.ae-article__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ae-gap-2);
color: var(--ae-text-muted);
font-size: .875rem;
padding-bottom: var(--ae-gap-2);
border-bottom: 1px solid var(--ae-border);
}
.ae-article__views {
display: inline-flex;
align-items: center;
gap: .3em;
}
.ae-article__cover {
display: block;
width: 100%;
max-height: 460px;
object-fit: cover;
border-radius: var(--ae-radius-sm);
margin: var(--ae-gap-3) 0;
}
.ae-article__body {
max-width: 68ch;
font-size: 1.0625rem;
line-height: 1.7;
}
.ae-article__tags { margin-top: var(--ae-gap-3); }
.ae-article__products,
.ae-article__related { margin-bottom: var(--ae-gap-4); }
/* ---------- Поделиться ---------- */
.ae-share {
display: flex;
align-items: center;
gap: var(--ae-gap-2);
margin-top: var(--ae-gap-3);
padding-top: var(--ae-gap-2);
border-top: 1px solid var(--ae-border);
}
.ae-share__label { color: var(--ae-text-muted); font-size: .875rem; }
.ae-share__btn {
display: inline-flex;
align-items: center;
gap: .4em;
padding: .4rem .75rem;
background: var(--ae-surface-2);
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius-sm);
color: inherit;
font: inherit;
font-size: .875rem;
cursor: pointer;
}
.ae-share__btn:hover { border-color: var(--ae-primary); color: var(--ae-primary); }
.ae-share__btn.is-done { border-color: var(--ae-success); color: var(--ae-success); }
/* ---------- Комментарии ---------- */
.ae-comments { margin-bottom: var(--ae-gap-4); }
.ae-comments__count {
color: var(--ae-text-muted);
font-weight: 400;
}
.ae-comments__empty { color: var(--ae-text-muted); }
.ae-comments__list {
list-style: none;
margin: 0 0 var(--ae-gap-3);
padding: 0;
display: flex;
flex-direction: column;
gap: var(--ae-gap-2);
}
.ae-comments__list--nested {
margin: var(--ae-gap-2) 0 0;
padding-left: var(--ae-gap-3);
border-left: 2px solid var(--ae-border);
}
.ae-comment {
background: var(--ae-surface);
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius-sm);
padding: var(--ae-gap-2);
}
.ae-comment__head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--ae-gap-1);
margin-bottom: .5rem;
}
.ae-comment__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: color-mix(in srgb, var(--ae-primary) 16%, transparent);
color: var(--ae-primary);
font-weight: 600;
font-size: .875rem;
}
.ae-comment__author { font-weight: 600; }
.ae-comment__date { color: var(--ae-text-muted); font-size: .8125rem; }
.ae-comment__reply {
margin-left: auto;
background: none;
border: 0;
padding: 0;
color: var(--ae-primary);
font: inherit;
font-size: .8125rem;
cursor: pointer;
}
.ae-comment__text { line-height: 1.6; }
.ae-comment-form {
display: flex;
flex-direction: column;
gap: var(--ae-gap-2);
max-width: 640px;
}
.ae-comment-form__replying {
display: flex;
align-items: center;
gap: var(--ae-gap-1);
padding: .45rem .7rem;
background: var(--ae-surface-2);
border-radius: var(--ae-radius-sm);
font-size: .875rem;
}
.ae-comment-form__replying button {
margin-left: auto;
background: none;
border: 0;
color: var(--ae-text-muted);
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
}
@media (max-width: 991px) {
.ae-blog .ae-blog-aside { order: 2; }
.ae-article { padding: var(--ae-gap-2); }
}
/* ==================================================================
Служебные страницы: 404, «спасибо», техработы, контакты, статьи.
================================================================== */
.ae-page__title {
margin: 0 0 var(--ae-gap-3);
font-size: var(--ae-fs-h1);
text-wrap: balance;
}
/* ---------- 404 и техработы ---------- */
.ae-errorpage {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--ae-gap-2);
max-width: 620px;
margin: 0 auto;
padding: var(--ae-gap-4) 0;
text-align: center;
}
.ae-errorpage__code {
font-size: clamp(4rem, 2rem + 12vw, 9rem);
font-weight: 800;
line-height: 1;
letter-spacing: -.04em;
/* Цифра фоном, а не сообщением: она объясняет, что случилось,
но внимание должно достаться поиску и ссылкам ниже. */
color: color-mix(in srgb, var(--ae-primary) 22%, transparent);
}
/* Пустая корзина или пустой список возвратов приходят в этот же
шаблон. Там вместо цифры ошибки стоит значок: ничего не сломалось,
просто пока пусто. */
.ae-errorpage__icon {
display: flex;
align-items: center;
justify-content: center;
width: 96px;
height: 96px;
border-radius: 50%;
background: var(--ae-surface-2);
color: var(--ae-text-muted);
}
.ae-errorpage__icon svg { width: 44px; height: 44px; }
.ae-errorpage__title { margin: 0; font-size: var(--ae-fs-h2); }
.ae-errorpage--empty .ae-errorpage__title { font-size: var(--ae-fs-h3); }
.ae-errorpage__text {
margin: 0;
color: var(--ae-text-muted);
line-height: 1.6;
}
.ae-errorpage__search {
display: flex;
gap: .5rem;
width: 100%;
max-width: 460px;
margin-top: var(--ae-gap-1);
}
.ae-errorpage__search .ae-input { flex: 1; }
.ae-errorpage__links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .4rem var(--ae-gap-2);
font-size: .9375rem;
}
.ae-errorpage__links span { color: var(--ae-text-muted); }
/* ---------- Успешное действие ---------- */
.ae-successpage {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--ae-gap-2);
max-width: 620px;
margin: 0 auto;
padding: var(--ae-gap-4) 0;
text-align: center;
}
.ae-successpage__mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 68px;
height: 68px;
border-radius: 50%;
background: color-mix(in srgb, var(--ae-success) 16%, transparent);
color: var(--ae-success);
}
.ae-successpage__title { margin: 0; font-size: var(--ae-fs-h1); }
.ae-successpage__text { color: var(--ae-text-muted); line-height: 1.65; }
/* ---------- Контакты ---------- */
/* ==================================================================
Страница контактов.
Первым идёт не адрес и не карта, а способы связи: покупатель пришёл
сюда с вопросом «как дозвониться», а не «где вы находитесь».
================================================================== */
.ae-contactpage__head { margin-bottom: var(--ae-gap-3); }
.ae-contactpage__intro {
max-width: 68ch;
margin-top: .6em;
color: var(--ae-text-muted);
font-size: 1rem;
line-height: 1.6;
}
.ae-contactpage__grid { display: grid; gap: var(--ae-gap-3); align-items: start; }
@media (min-width: 992px) {
.ae-contactpage__grid.has-map { grid-template-columns: minmax(0, 1fr) minmax(320px, 46%); }
}
/* ---------- Отделы ----------
Карточки одной высоты не нужны: у отдела продаж пять строк, у склада
две, и растягивание короткой карточки до длинной только добавляет
пустоты. Плитка выравнивается по верху. */
.ae-depts {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--ae-gap-2);
align-items: start;
}
.ae-dept {
background: var(--ae-surface);
border: var(--ae-card-border) solid var(--ae-border);
border-radius: var(--ae-card-radius);
padding: var(--ae-gap-3);
display: flex;
flex-direction: column;
gap: .8em;
transition: border-color var(--ae-motion), box-shadow var(--ae-motion);
}
.ae-dept:hover { border-color: var(--ae-card-hover-border); box-shadow: var(--ae-card-hover-shadow); }
/* Магазин — главная карточка: занимает две колонки, если они есть. */
@media (min-width: 720px) {
.ae-dept--main { grid-column: span 2; }
}
.ae-dept__image {
display: block;
width: 100%;
max-height: 150px;
object-fit: cover;
border-radius: var(--ae-radius-sm);
}
.ae-dept__head { display: flex; align-items: flex-start; gap: .7em; }
.ae-dept__icon { flex: none; width: 22px; height: 22px; color: var(--ae-primary); margin-top: .15em; }
.ae-dept__name { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.ae-dept__note {
margin: .25em 0 0;
font-size: .85rem;
font-style: normal;
color: var(--ae-text-muted);
line-height: 1.45;
}
.ae-dept__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; }
/* Подпись над значением, а не слева от него: в узкой карточке
«режим работы» не помещается в колонку и переносится, из-за чего
строки перестают выстраиваться друг под другом. */
.ae-dept__lines li { display: grid; gap: .1em; }
.ae-dept__label {
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--ae-text-muted);
}
.ae-dept__value { font-size: .95rem; color: var(--ae-text); }
a.ae-dept__value { color: var(--ae-primary); }
a.ae-dept__value:hover { text-decoration: underline; }
.ae-dept__map {
display: inline-flex;
align-items: center;
gap: .4em;
font-size: .85rem;
color: var(--ae-primary);
margin-top: auto;
}
.ae-dept__map:hover { text-decoration: underline; }
.ae-dept__comment { margin: 0; font-size: .85rem; color: var(--ae-text-muted); line-height: 1.5; }
/* ---------- Карта ----------
Код карты вставляет владелец магазина, и приходит он с чужими
width и height. Поэтому размеры навязываются здесь, иначе карта
вылезает за контейнер на мобильном. */
.ae-map {
margin: var(--ae-gap-3) 0;
border-radius: var(--ae-card-radius);
overflow: hidden;
border: var(--ae-card-border) solid var(--ae-border);
background: var(--ae-surface-2);
line-height: 0;
}
.ae-contactpage__map .ae-map { margin: 0; }
.ae-map iframe,
.ae-map > div,
.ae-map object,
.ae-map embed {
display: block;
width: 100% !important;
height: var(--ae-map-h, 420px) !important;
border: 0;
}
@media (max-width: 575px) {
.ae-map iframe,
.ae-map > div { height: min(var(--ae-map-h, 420px), 280px) !important; }
}
/* ---------- Форма и реквизиты ---------- */
.ae-contactpage__bottom {
display: grid;
gap: var(--ae-gap-3);
margin-top: var(--ae-gap-4);
align-items: start;
}
@media (min-width: 992px) {
/* Реквизиты — необязательный блок: у розничного магазина их обычно
нет. Пока колонки объявлялись безусловно, форма связи занимала
62% ширины, а справа от неё оставалось 360 пустых пикселей.
Вторая колонка появляется, только когда её есть чем занять. */
.ae-contactpage__bottom:has(> :nth-child(2)) { grid-template-columns: minmax(0, 1fr) minmax(280px, 38%); }
}
.ae-contactform,
.ae-requisites {
background: var(--ae-surface);
border: var(--ae-card-border) solid var(--ae-border);
border-radius: var(--ae-card-radius);
padding: var(--ae-gap-3);
}
.ae-contactform .ae-h2,
.ae-requisites .ae-h2 { margin: 0 0 .3em; }
.ae-contactform__note { margin: 0 0 var(--ae-gap-2); font-size: .87rem; color: var(--ae-text-muted); }
.ae-contactform form { display: grid; gap: var(--ae-gap-2); }
.ae-contactform__row { display: grid; gap: var(--ae-gap-2); }
@media (min-width: 576px) {
.ae-contactform__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ae-requisites__list { margin: var(--ae-gap-2) 0 0; display: grid; gap: .55em; }
.ae-requisites__list > div { display: grid; gap: .1em; }
.ae-requisites__list dt {
font-size: .76rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--ae-text-muted);
}
.ae-requisites__list dd {
margin: 0;
font-size: .92rem;
/* Счета и ИНН читают по цифрам и переносят целиком: разрыв номера
посреди строки превращает копирование в ошибку. */
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.ae-requisites__note { margin: var(--ae-gap-2) 0 0; font-size: .82rem; color: var(--ae-text-muted); line-height: 1.5; }
/* ==================================================================
SEO-текст.
Свёрнутая часть остаётся в разметке: скрытый высотой текст поисковик
читает целиком, а догруженный по клику — нет. Отсюда max-height,
а не display: none.
================================================================== */
.ae-seotext { margin: var(--ae-gap-4) 0; }
.ae-seotext--card {
background: var(--ae-surface);
border: var(--ae-card-border) solid var(--ae-border);
border-radius: var(--ae-card-radius);
padding: var(--ae-gap-3);
}
.ae-seotext__title { font-size: var(--ae-fs-h2); margin-bottom: var(--ae-gap-2); }
/* Ширина строки ограничена: длинная строка читается тяжело, а SEO-текст
и без того редко читают до конца. С картинкой сбоку колонка шире —
иначе текст сжимается в лесенку. */
.ae-seotext__body { max-width: 78ch; }
.ae-seotext__body.has-image { max-width: 104ch; }
.ae-seotext__body p { line-height: 1.65; }
/* ---------- Картинка к материалу ---------- */
.ae-seotext__figure { margin: 0 0 var(--ae-gap-2); }
.ae-seotext__figure img {
display: block;
width: 100%;
border-radius: var(--ae-radius);
background: var(--ae-surface-2);
}
.ae-seotext__figure figcaption {
margin-top: .4em;
color: var(--ae-text-muted);
font-size: .82rem;
line-height: 1.4;
}
/*
Обтекание — только на просторном экране. На телефоне картинка
в 40% ширины оставляет под текст полосу в полтора слова.
*/
@media (min-width: 768px) {
.is-img-right .ae-seotext__figure,
.is-img-left .ae-seotext__figure { width: 38%; max-width: 420px; }
.is-img-right .ae-seotext__figure { float: right; margin-left: var(--ae-gap-3); }
.is-img-left .ae-seotext__figure { float: left; margin-right: var(--ae-gap-3); }
/* Подзаголовки не должны залезать под картинку сбоку: у обтекания
нет способа сказать «начни с новой строки» иначе. */
.is-img-right .ae-seotext__block h3,
.is-img-left .ae-seotext__block h3 { clear: none; }
}
/* Блок с обтеканием обязан закрыть поток, иначе следующая секция
страницы заедет под картинку. */
.ae-seotext__body::after { content: ""; display: table; clear: both; }
/*
Широкий экран: текст и картинка колонками во всю ширину.
Ограничение строки в 104 знака нужно, чтобы текст читался, но на
контейнере в полторы тысячи точек оно оставляло справа пустую
треть страницы — блок выглядел недоделанным рядом с витринами,
идущими во всю ширину.
Колонки решают обе задачи разом: строка остаётся той же длины,
что и была, а место справа занимает картинка, а не пустота.
Обтекание при этом пропадает — с колонкой в 78 знаков тексту всё
равно некуда затекать под картинку.
*/
@media (min-width: 1200px) {
.ae-seotext__body.has-image.is-img-right,
.ae-seotext__body.has-image.is-img-left {
display: grid;
gap: 0 var(--ae-gap-4);
align-items: start;
max-width: none;
}
.ae-seotext__body.has-image.is-img-right { grid-template-columns: minmax(0, 78ch) minmax(260px, 1fr); }
.ae-seotext__body.has-image.is-img-left { grid-template-columns: minmax(260px, 1fr) minmax(0, 78ch); }
/* Текст идёт своей колонкой, картинка — соседней во всю высоту:
так подпись под ней не разрывает поток абзацев. */
.ae-seotext__body.has-image.is-img-right > * { grid-column: 1; }
.ae-seotext__body.has-image.is-img-left > * { grid-column: 2; }
.ae-seotext__body.has-image.is-img-right > .ae-seotext__figure,
.ae-seotext__body.has-image.is-img-left > .ae-seotext__figure {
grid-row: 1 / span 9999;
float: none;
width: auto;
max-width: none;
margin: 0;
position: sticky;
top: calc(var(--ae-header-h, 64px) + var(--ae-gap-2));
}
.ae-seotext__body.has-image.is-img-right > .ae-seotext__figure { grid-column: 2; }
.ae-seotext__body.has-image.is-img-left > .ae-seotext__figure { grid-column: 1; }
}
/* ---------- Оглавление ---------- */
.ae-seotext__toc {
margin: var(--ae-gap-2) 0;
padding: var(--ae-gap-2);
border-left: 3px solid var(--ae-primary);
border-radius: 0 var(--ae-radius-sm) var(--ae-radius-sm) 0;
background: var(--ae-surface-2);
font-size: .92rem;
}
.ae-seotext__toc b { display: block; margin-bottom: .4em; }
.ae-seotext__toc ol { margin: 0; padding-left: 1.2em; display: grid; gap: .2em; }
.ae-seotext__toc a { color: var(--ae-text); }
.ae-seotext__toc a:hover { color: var(--ae-primary); }
/* ---------- Полезные ссылки ---------- */
.ae-seotext__links {
margin-top: var(--ae-gap-3);
padding-top: var(--ae-gap-2);
border-top: 1px solid var(--ae-border);
font-size: .92rem;
}
.ae-seotext__links b { display: block; margin-bottom: .45em; }
.ae-seotext__links ul {
display: flex;
flex-wrap: wrap;
gap: .4em .5em;
margin: 0;
padding: 0;
list-style: none;
}
.ae-seotext__links a {
display: inline-flex;
padding: .3em .8em;
border-radius: var(--ae-radius-pill);
background: var(--ae-surface-2);
color: var(--ae-text);
}
.ae-seotext__links a:hover { background: var(--ae-primary); color: var(--ae-on-primary); }
.ae-seotext__block { margin-top: var(--ae-gap-3); }
.ae-seotext__block h3 { font-size: var(--ae-fs-h4); margin-bottom: .5em; scroll-margin-top: calc(var(--ae-header-h, 64px) + var(--ae-gap-2)); }
/* Свёрнутое состояние: текст обрезан по высоте и уходит в градиент,
чтобы обрыв не выглядел ошибкой вёрстки. */
.ae-seotext.is-collapsible.is-folded .ae-seotext__body {
max-height: var(--ae-seotext-h, 260px);
overflow: hidden;
position: relative;
mask-image: linear-gradient(#000 60%, transparent);
-webkit-mask-image: linear-gradient(#000 60%, transparent);
}
.ae-seotext__toggle {
margin-top: var(--ae-gap-2);
color: var(--ae-primary);
font-weight: 600;
font-size: .92rem;
border-bottom: 1px dashed currentColor;
background: none;
border-width: 0 0 1px;
padding: 0;
cursor: pointer;
}
.ae-seotext__toggle[hidden] { display: none; }
/* ---------- Вопросы и ответы ---------- */
.ae-seofaq { margin-top: var(--ae-gap-3); display: grid; gap: .5em; }
.ae-seofaq__item {
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius-sm);
background: var(--ae-surface);
overflow: hidden;
}
.ae-seofaq__item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: .8em;
padding: .8em var(--ae-gap-2);
font-weight: 600;
font-size: .95rem;
cursor: pointer;
list-style: none;
}
.ae-seofaq__item summary::-webkit-details-marker { display: none; }
.ae-seofaq__item summary::after {
content: "";
flex: none;
width: 9px;
height: 9px;
border-right: 2px solid var(--ae-text-muted);
border-bottom: 2px solid var(--ae-text-muted);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform .18s;
}
.ae-seofaq__item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.ae-seofaq__item > div { padding: 0 var(--ae-gap-2) var(--ae-gap-2); font-size: .92rem; line-height: 1.6; }
/* ==================================================================
Плавающая кнопка связи.
Живёт над содержимым, поэтому её z-index выше карточек и липкой
шапки, но ниже модального окна: открытая форма должна перекрывать
кнопку, а не наоборот.
================================================================== */
.ae-contactbtn {
position: fixed;
bottom: var(--ae-gap-3);
z-index: 60;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--ae-gap-1);
}
.ae-contactbtn--right { right: var(--ae-gap-3); }
.ae-contactbtn--left { left: var(--ae-gap-3); align-items: flex-start; }
/* На мобильном внизу живёт панель навигации — поднимаем кнопку. */
@media (max-width: 767px) {
.ae-contactbtn { bottom: calc(var(--ae-gap-3) + var(--ae-tabbar-h, 56px)); }
}
.ae-contactbtn__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border: 0;
border-radius: 50%;
background: var(--ae-primary);
color: var(--ae-on-primary);
box-shadow: var(--ae-shadow-accent);
cursor: pointer;
transition: transform .15s, background .15s;
}
.ae-contactbtn__toggle:hover { background: var(--ae-primary-hover); transform: translateY(-2px); }
.ae-contactbtn__toggle svg { width: 26px; height: 26px; }
.ae-contactbtn__close { display: none; }
.ae-contactbtn.is-open .ae-contactbtn__open { display: none; }
.ae-contactbtn.is-open .ae-contactbtn__close { display: block; }
/* ---------- Панель ---------- */
.ae-contactbtn__panel {
width: 260px;
background: var(--ae-surface);
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius);
box-shadow: var(--ae-shadow-4);
overflow: hidden;
animation: ae-contactbtn-in .16s ease-out;
}
@keyframes ae-contactbtn-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.ae-contactbtn__panel { animation: none; }
.ae-contactbtn__toggle { transition: none; }
}
.ae-contactbtn__hours {
padding: .6rem var(--ae-gap-2);
background: var(--ae-surface-2);
color: var(--ae-text-muted);
font-size: .8125rem;
text-align: center;
}
.ae-contactbtn__list {
list-style: none;
margin: 0;
padding: 0;
}
.ae-contactbtn__list li + li { border-top: 1px solid var(--ae-border); }
.ae-contactbtn__item {
display: flex;
align-items: center;
gap: var(--ae-gap-2);
width: 100%;
padding: .7rem var(--ae-gap-2);
background: none;
border: 0;
color: var(--ae-text);
font: inherit;
font-size: .9375rem;
text-align: left;
cursor: pointer;
}
.ae-contactbtn__item:hover { background: var(--ae-surface-2); color: var(--ae-primary); }
.ae-contactbtn__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--ae-surface-2);
color: var(--ae-text-muted);
}
.ae-contactbtn__icon svg { width: 17px; height: 17px; }
/* Цвета мессенджеров узнаются быстрее подписи, поэтому они здесь
не украшение: значок работает как указатель. */
.is-whatsapp .ae-contactbtn__icon { background: #25d36620; color: #1faa53; }
.is-telegram .ae-contactbtn__icon { background: #229ed920; color: #229ed9; }
.is-viber .ae-contactbtn__icon { background: #7360f220; color: #7360f2; }
.is-vk .ae-contactbtn__icon { background: #0077ff20; color: #0077ff; }
/* Свой канал: цвет приходит из настроек переменной. Без него берётся
основной цвет магазина — серый значок среди цветных читается как
выключенный. */
.is-custom .ae-contactbtn__icon {
background: color-mix(in srgb, var(--ae-channel, var(--ae-primary)) 14%, transparent);
color: var(--ae-channel, var(--ae-primary));
}
.is-custom .ae-contactbtn__icon img { width: 20px; height: 20px; object-fit: contain; }
.is-phone .ae-contactbtn__icon,
.is-callback .ae-contactbtn__icon {
background: color-mix(in srgb, var(--ae-primary) 14%, transparent);
color: var(--ae-primary);
}
/* ---------- Подсказка ---------- */
.ae-contactbtn__hint {
position: relative;
max-width: 240px;
padding: .6rem 1.8rem .6rem .8rem;
background: var(--ae-surface);
border: 1px solid var(--ae-border);
border-radius: var(--ae-radius);
box-shadow: var(--ae-shadow-3);
font-size: .875rem;
line-height: 1.45;
}
.ae-contactbtn__hint button {
position: absolute;
top: .25rem;
right: .4rem;
background: none;
border: 0;
color: var(--ae-text-muted);
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
}
/* ---------- Подписка в подвале ---------- */
.ae-subscribe.is-done .ae-input,
.ae-subscribe.is-done .ae-btn { display: none; }
.ae-subscribe__done {
color: var(--ae-success);
font-size: .9rem;
}
/* ==================================================================
Личный кабинет.
Два десятка экранов на одной раскладке: слева разделы, справа
содержимое. Раньше здесь работали стоковые шаблоны OpenCart —
покупатель проходил витрину и после входа попадал в другой сайт.
================================================================== */
.ae-account {
display: grid;
grid-template-columns: 232px minmax(0, 1fr);
gap: var(--ae-gap-3);
align-items: start;
}
.ae-account__body {
min-width: 0;
display: grid;
gap: var(--ae-gap-2);
}
/* ---------- Разделы ---------- */
.ae-acnav {
position: sticky;
top: var(--ae-gap-2);
border: 1px solid var(--ae-border);
border-radius: var(--ae-card-radius);
background: var(--ae-surface);
overflow: hidden;
}
.ae-acnav__hello {
padding: var(--ae-gap-2);
border-bottom: 1px solid var(--ae-border);
background: var(--ae-surface-2);
font-weight: 600;
font-size: .95em;
}
.ae-acnav__list {
margin: 0;
padding: 0;
list-style: none;
}
.ae-acnav__list a {
display: block;
padding: .62em var(--ae-gap-2);
color: inherit;
text-decoration: none;
border-left: 3px solid transparent;
}
.ae-acnav__list a:hover {
background: var(--ae-surface-2);
}
.ae-acnav__list a.is-on {
border-left-color: var(--ae-primary);
background: var(--ae-surface-2);
font-weight: 600;
}
/* Выход отделён чертой: это не соседний раздел, а конец работы. */
.ae-acnav__out {
border-top: 1px solid var(--ae-border);
margin-top: .3em;
}
.ae-acnav__out a {
color: var(--ae-text-muted);
}
/* ---------- Плитки обзора ---------- */
.ae-tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--ae-gap-2);
}
.ae-tile {
display: grid;
gap: .35em;
padding: var(--ae-gap-2);
border: 1px solid var(--ae-border);
border-radius: var(--ae-card-radius);
background: var(--ae-surface);
color: inherit;
text-decoration: none;
transition: border-color var(--ae-motion) ease, transform var(--ae-motion) ease;
}
.ae-tile:hover {
border-color: var(--ae-primary);
transform: translateY(-2px);
}
.ae-tile svg { color: var(--ae-primary); }
.ae-tile b { font-size: 1.02em; }
.ae-tile span { color: var(--ae-text-muted); font-size: .86em; }
/* ---------- Общие блоки ---------- */
.ae-card-block {
padding: var(--ae-gap-2);
border: 1px solid var(--ae-border);
border-radius: var(--ae-card-radius);
background: var(--ae-surface);
}
.ae-block__title {
font-weight: 600;
margin-bottom: .7em;
}
.ae-empty {
padding: var(--ae-gap-4) var(--ae-gap-2);
text-align: center;
color: var(--ae-text-muted);
border: 1px dashed var(--ae-border);
border-radius: var(--ae-card-radius);
}
.ae-results {
margin-top: .6em;
color: var(--ae-text-muted);
font-size: .88em;
}
/* Список «поле — значение». Двухколоночная сетка вместо таблицы:
значения переносятся, а подписи остаются на своей стороне. */
.ae-facts {
display: grid;
grid-template-columns: minmax(140px, auto) minmax(0, 1fr);
gap: .45em var(--ae-gap-2);
margin: 0;
}
.ae-facts dt { color: var(--ae-text-muted); }
.ae-facts dd { margin: 0; }
.ae-facts__dim { color: var(--ae-text-muted); font-size: .9em; }
/* ---------- Вход ---------- */
.ae-login {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--ae-gap-2);
align-items: start;
}
.ae-login__box {
padding: var(--ae-gap-3);
border: 1px solid var(--ae-border);
border-radius: var(--ae-card-radius);
background: var(--ae-surface);
}
.ae-login__box--soft { background: var(--ae-surface-2); }
.ae-login__title { margin: 0 0 var(--ae-gap-2); font-size: 1.2em; }
.ae-login__lead { color: var(--ae-text-muted); margin: 0 0 var(--ae-gap-2); }
.ae-login__forgot {
display: inline-block;
margin-top: .4em;
font-size: .88em;
}
/* ---------- Вкладки способа входа ---------- */
.ae-login__tabs {
display: flex;
gap: .25em;
margin: 0 0 var(--ae-gap-2);
padding: .25em;
border-radius: var(--ae-input-radius);
background: var(--ae-surface-2);
}
.ae-login__tabs button {
flex: 1 1 0;
padding: .55em .8em;
border: 0;
border-radius: calc(var(--ae-input-radius) - 2px);
background: transparent;
color: var(--ae-text-muted);
font: inherit;
cursor: pointer;
transition: background var(--ae-motion), color var(--ae-motion);
}
.ae-login__tabs button.is-active {
background: var(--ae-surface);
color: var(--ae-text);
box-shadow: var(--ae-shadow-1);
}
/* ---------- Вход по телефону ---------- */
.ae-phone__lead {
margin: 0;
color: var(--ae-text-muted);
font-size: .9em;
}
.ae-phone__sent {
margin: 0;
color: var(--ae-text-muted);
font-size: .92em;
}
/*
Код набирают вслепую, глядя на уведомление телефона: крупные цифры
вразрядку видно, не приглядываясь, и опечатка заметна сразу.
*/
.ae-phone__code {
font-size: 1.5em;
letter-spacing: .4em;
text-align: center;
font-variant-numeric: tabular-nums;
}
.ae-phone__foot {
display: flex;
flex-wrap: wrap;
gap: var(--ae-gap-1);
align-items: center;
justify-content: space-between;
font-size: .88em;
}
.ae-phone__link {
padding: 0;
border: 0;
background: none;
color: var(--ae-primary);
font: inherit;
cursor: pointer;
text-decoration: underline;
text-underline-offset: .2em;
}
.ae-phone__wait { color: var(--ae-text-muted); }
.ae-phone__error {
padding: .6em .8em;
border-radius: var(--ae-input-radius);
background: color-mix(in srgb, var(--ae-danger) 12%, transparent);
color: var(--ae-danger);
font-size: .92em;
}
.ae-phone-quick { margin-bottom: var(--ae-gap-2); }
/*
Разделитель между коротким и длинным путём: черта по обе стороны
от слова, чтобы «или» читалось как развилка, а не как подпись
к форме над ним.
*/
.ae-phone-or {
display: flex;
align-items: center;
gap: var(--ae-gap-2);
margin: var(--ae-gap-2) 0;
color: var(--ae-text-muted);
font-size: .9em;
}
.ae-phone-or::before,
.ae-phone-or::after {
content: '';
flex: 1 1 0;
height: 1px;
background: var(--ae-border);
}
/* ---------- Формы ---------- */
.ae-form { display: grid; gap: var(--ae-gap-2); }
.ae-form--card {
padding: var(--ae-gap-3);
border: 1px solid var(--ae-border);
border-radius: var(--ae-card-radius);
background: var(--ae-surface);
}
.ae-form fieldset {
border: 0;
margin: 0;
padding: 0;
display: grid;
gap: var(--ae-gap-2);
}
.ae-form legend {
width: 100%;
padding: 0 0 .5em;
margin-bottom: .3em;
border-bottom: 1px solid var(--ae-border);
font-weight: 600;
font-size: 1.02em;
}
.ae-field { display: grid; gap: .35em; }
.ae-field > label { font-size: .9em; color: var(--ae-text-muted); }
.ae-field--narrow { max-width: 220px; }
/* Две колонки полей на широком экране, одна на узком. Имя и фамилия
рядом читаются как одно поле, а не как два разных вопроса. */
.ae-field-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--ae-gap-2);
}
.ae-req { color: var(--ae-danger); }
.ae-error { color: var(--ae-danger); font-size: .85em; }
.ae-hint { color: var(--ae-text-muted); font-size: .82em; }
.ae-field.has-error .ae-input { border-color: var(--ae-danger); }
.ae-choices { display: flex; flex-wrap: wrap; gap: .4em var(--ae-gap-2); }
.ae-choices--column { flex-direction: column; gap: .4em; }
.ae-choice {
display: inline-flex;
align-items: center;
gap: .5em;
cursor: pointer;
}
.ae-form__actions {
display: flex;
flex-wrap: wrap;
gap: var(--ae-gap-1);
justify-content: flex-end;
align-items: center;
}
/* ---------- Адреса ---------- */
.ae-addresses {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--ae-gap-2);
}
.ae-address {
display: flex;
flex-direction: column;
gap: var(--ae-gap-2);
padding: var(--ae-gap-2);
border: 1px solid var(--ae-border);
border-radius: var(--ae-card-radius);
background: var(--ae-surface);
}
.ae-address__text { flex: 1 1 auto; line-height: 1.5; }
.ae-address__actions { display: flex; gap: .4em; }
.ae-address__del { color: var(--ae-danger); }
/* ---------- Заказы ---------- */
.ae-orders { display: grid; gap: var(--ae-gap-1); }
.ae-order {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: .3em var(--ae-gap-2);
padding: var(--ae-gap-2);
border: 1px solid var(--ae-border);
border-radius: var(--ae-card-radius);
background: var(--ae-surface);
color: inherit;
text-decoration: none;
transition: border-color var(--ae-motion) ease;
}
.ae-order:hover { border-color: var(--ae-primary); }
.ae-order__head {
display: flex;
align-items: center;
gap: var(--ae-gap-1);
flex-wrap: wrap;
}
.ae-order__status {
padding: .12em .6em;
border-radius: var(--ae-radius-pill);
background: var(--ae-surface-2);
font-size: .82em;
color: var(--ae-text-muted);
}
.ae-order__meta {
grid-column: 1;
display: flex;
gap: var(--ae-gap-2);
color: var(--ae-text-muted);
font-size: .86em;
}
.ae-order__total {
grid-row: 1 / span 2;
grid-column: 2;
align-self: center;
font-weight: 700;
font-size: 1.05em;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.ae-orderhead {
display: flex;
flex-wrap: wrap;
gap: var(--ae-gap-1) var(--ae-gap-3);
justify-content: space-between;
align-items: baseline;
}
.ae-orderhead__id { font-size: 1.1em; font-weight: 700; }
.ae-orderhead__date,
.ae-orderhead__invoice { color: var(--ae-text-muted); font-size: .9em; }
.ae-orderinfo {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--ae-gap-2);
}
.ae-orderinfo__box {
padding: var(--ae-gap-2);
border: 1px solid var(--ae-border);
border-radius: var(--ae-card-radius);
background: var(--ae-surface);
}
.ae-orderinfo__title { font-weight: 600; margin-bottom: .5em; }
.ae-orderinfo__text { line-height: 1.55; }
.ae-orderinfo__note { margin-top: .6em; color: var(--ae-text-muted); font-size: .9em; }
.ae-ordertable tfoot td { font-weight: 600; }
.ae-ordertable tfoot tr:last-child td { font-size: 1.05em; }
.ae-orderacts { display: flex; flex-wrap: wrap; gap: .4em; margin-top: var(--ae-gap-2); }
/* ---------- История статусов ----------
Лентой с точками: это последовательность событий, и читается она
сверху вниз, а не по колонкам таблицы. */
.ae-history {
list-style: none;
margin: 0;
padding: 0 0 0 var(--ae-gap-2);
border-left: 2px solid var(--ae-border);
display: grid;
gap: var(--ae-gap-2);
}
.ae-history li { position: relative; }
.ae-history li::before {
content: "";
position: absolute;
left: calc(var(--ae-gap-2) * -1 - 5px);
top: .45em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ae-primary);
}
.ae-history__status { font-weight: 600; }
.ae-history__date { color: var(--ae-text-muted); font-size: .85em; }
.ae-history__comment { margin-top: .3em; }
/* ---------- Избранное ---------- */
.ae-wishlist { display: grid; gap: var(--ae-gap-1); }
.ae-wish {
display: grid;
grid-template-columns: 72px minmax(0, 1fr) auto auto;
gap: var(--ae-gap-2);
align-items: center;
padding: var(--ae-gap-2);
border: 1px solid var(--ae-border);
border-radius: var(--ae-card-radius);
background: var(--ae-surface);
}
.ae-wish__pic img {
width: 72px;
height: 72px;
object-fit: contain;
border-radius: var(--ae-radius-sm);
}
.ae-wish__name { color: inherit; text-decoration: none; font-weight: 500; }
.ae-wish__name:hover { color: var(--ae-primary); }
.ae-wish__sku,
.ae-wish__stock { color: var(--ae-text-muted); font-size: .85em; }
.ae-wish__price { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.ae-wish__actions { display: flex; gap: .4em; }
/* ---------- Узкие экраны ----------
Разделы кабинета превращаются в ленту: вертикальный список
из тринадцати пунктов отодвигал бы содержимое за нижний край. */
@media (max-width: 991px) {
.ae-account { grid-template-columns: minmax(0, 1fr); }
.ae-acnav { position: static; }
.ae-acnav__list {
display: flex;
overflow-x: auto;
scrollbar-width: none;
}
.ae-acnav__list::-webkit-scrollbar { display: none; }
.ae-acnav__list a {
white-space: nowrap;
border-left: 0;
border-bottom: 3px solid transparent;
}
.ae-acnav__list a.is-on {
border-left: 0;
border-bottom-color: var(--ae-primary);
}
.ae-acnav__out { border-top: 0; margin-top: 0; }
}
@media (max-width: 575px) {
.ae-form--card,
.ae-login__box { padding: var(--ae-gap-2); }
.ae-wish {
grid-template-columns: 60px minmax(0, 1fr);
}
.ae-wish__price { grid-column: 2; text-align: left; }
.ae-wish__actions { grid-column: 1 / -1; }
.ae-form__actions .ae-btn { flex: 1 1 auto; }
}
/* ==================================================================
Утилиты. Держим набор коротким: всё, что нужно чаще трёх раз.
================================================================== */
.ae-flex { display: flex; }
.ae-flex-col { display: flex; flex-direction: column; }
.ae-items-center { align-items: center; }
.ae-justify-between { justify-content: space-between; }
.ae-wrap { flex-wrap: wrap; }
.ae-grow { flex: 1 1 auto; min-width: 0; }
.ae-none { flex: none; }
.ae-gap-1 { gap: var(--ae-gap-1); }
.ae-gap-2 { gap: var(--ae-gap-2); }
.ae-gap-3 { gap: var(--ae-gap-3); }
.ae-mt-1 { margin-top: var(--ae-gap-1); }
.ae-mt-2 { margin-top: var(--ae-gap-2); }
.ae-mt-3 { margin-top: var(--ae-gap-3); }
.ae-mb-1 { margin-bottom: var(--ae-gap-1); }
.ae-mb-2 { margin-bottom: var(--ae-gap-2); }
.ae-mb-3 { margin-bottom: var(--ae-gap-3); }
.ae-mb-0 { margin-bottom: 0; }
.ae-muted { color: var(--ae-text-muted); }
.ae-danger { color: var(--ae-danger); }
.ae-success { color: var(--ae-success); }
.ae-sale { color: var(--ae-sale); }
.ae-center { text-align: center; }
.ae-right { text-align: right; }
.ae-nowrap { white-space: nowrap; }
.ae-nums { font-variant-numeric: tabular-nums; }
.ae-hide { display: none !important; }
@media (max-width: 767px) {
.ae-hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
.ae-only-mobile { display: none !important; }
}
.ae-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Обрезка текста заданным числом строк. */
.ae-clamp-1, .ae-clamp-2, .ae-clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ae-clamp-1 { -webkit-line-clamp: 1; }
.ae-clamp-2 { -webkit-line-clamp: 2; }
.ae-clamp-3 { -webkit-line-clamp: 3; }
/* Скелетон на время загрузки AJAX-содержимого. */
.ae-skeleton {
position: relative;
overflow: hidden;
background: var(--ae-surface-2);
border-radius: var(--ae-radius-sm);
color: transparent !important;
}
.ae-skeleton::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
animation: ae-shimmer 1.3s infinite;
}
@keyframes ae-shimmer {
to { transform: translateX(100%); }
}
.ae-busy { opacity: .5; pointer-events: none; transition: opacity .15s; }
/* ==================================================================
Панель демонстрации.
Живёт только на демо-сайте. Своя палитра, не зависящая от переменных
темы: панель должна оставаться читаемой во всех вариантах, которые
она же и переключает — в том числе в чёрно-белом и в тёмном.
================================================================== */
.ae-demo {
--demo-ink: #12161d;
--demo-bg: #fff;
--demo-line: #e4e8ef;
--demo-accent: #3f52d4;
position: fixed;
top: 50%;
transform: translateY(-50%);
/* Ниже выдвижных панелей и модальных окон: переключатель демо
не должен закрывать собой то, что показывает. */
z-index: 1000;
font-size: 13px;
line-height: 1.4;
color: var(--demo-ink);
}
.ae-demo--right { right: 0; }
.ae-demo--left { left: 0; }
/* ---------- Язычок и кнопка покупки ---------- */
/*
Две кнопки стоят столбиком в одном контейнере, а не каждая со своим
top и transform: высота язычка зависит от длины его подписи, и
вторую кнопку пришлось бы двигать вслед за чужим текстом.
*/
.ae-demo__tabs {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 6px;
}
.ae-demo--right .ae-demo__tabs { right: 100%; align-items: flex-end; }
.ae-demo--left .ae-demo__tabs { left: 100%; align-items: flex-start; }
.ae-demo__handle,
.ae-demo__buy {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 12px;
border: 0;
background: var(--demo-accent);
color: #fff;
cursor: pointer;
white-space: nowrap;
box-shadow: 0 6px 24px -8px rgba(0, 0, 0, .5);
font: inherit;
text-decoration: none;
}
.ae-demo__handle svg,
.ae-demo__buy svg { width: 18px; height: 18px; flex: none; }
/* Кнопка покупки — единственное на демо-сайте, что зовёт не смотреть,
а купить. Цвет свой, зелёный, чтобы она не сливалась с язычком
настроек и читалась как другое действие. */
.ae-demo__buy { background: #17864b; color: #fff; font-weight: 600; }
.ae-demo__buy:hover { background: #12693b; color: #fff; }
/* Кнопки прижаты к краю экрана: горизонтальные съедают его край,
а на телефоне ещё и накрывают кнопки товара. */
.ae-demo--right .ae-demo__handle,
.ae-demo--right .ae-demo__buy { border-radius: 8px 0 0 8px; }
.ae-demo--left .ae-demo__handle,
.ae-demo--left .ae-demo__buy { border-radius: 0 8px 8px 0; }
/* ---------- Окно ---------- */
.ae-demo__body {
width: min(92vw, 320px);
max-height: min(86vh, 760px);
display: flex;
flex-direction: column;
background: var(--demo-bg);
border: 1px solid var(--demo-line);
box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .45);
}
.ae-demo__body[hidden] { display: none; }
.ae-demo--right .ae-demo__body { border-radius: 10px 0 0 10px; border-right: 0; }
.ae-demo--left .ae-demo__body { border-radius: 0 10px 10px 0; border-left: 0; }
.ae-demo__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid var(--demo-line);
}
.ae-demo__head button {
border: 0;
background: none;
font-size: 22px;
line-height: 1;
color: #8a93a5;
cursor: pointer;
}
.ae-demo__scroll { overflow-y: auto; padding: 4px 14px 12px; flex: 1 1 auto; }
.ae-demo__group { padding: 12px 0; border-bottom: 1px solid var(--demo-line); }
.ae-demo__group:last-child { border-bottom: 0; }
.ae-demo__title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .06em;
color: #8a93a5;
margin-bottom: 8px;
}
.ae-demo__note { font-size: 12px; color: #8a93a5; margin: -4px 0 8px; }
/* ---------- Список вариантов ---------- */
.ae-demo__list { display: grid; gap: 4px; }
.ae-demo__item {
display: block;
padding: 8px 10px;
border: 1px solid var(--demo-line);
border-radius: 7px;
color: var(--demo-ink);
text-decoration: none;
}
.ae-demo__item:hover { border-color: #c3cad8; text-decoration: none; }
.ae-demo__item.is-active { border-color: var(--demo-accent); box-shadow: inset 0 0 0 1px var(--demo-accent); }
.ae-demo__item b { display: block; font-weight: 600; font-size: 13px; }
.ae-demo__item small { display: block; color: #8a93a5; font-size: 11.5px; margin-top: 2px; }
/* ---------- Цвета ---------- */
.ae-demo__swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.ae-demo__swatch {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--ae-demo-swatch, #fff);
border: 2px solid transparent;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
display: flex;
align-items: center;
justify-content: center;
color: #8a93a5;
font-style: normal;
text-decoration: none;
}
.ae-demo__swatch.is-active { border-color: var(--demo-ink); }
.ae-demo__swatch i { font-size: 15px; }
/* ---------- Ряд кнопок ---------- */
.ae-demo__row { display: flex; flex-wrap: wrap; gap: 5px; }
.ae-demo__chip {
padding: 5px 10px;
border: 1px solid var(--demo-line);
border-radius: 20px;
font-size: 12px;
color: var(--demo-ink);
text-decoration: none;
}
.ae-demo__chip:hover { border-color: #c3cad8; text-decoration: none; }
.ae-demo__chip.is-active { background: var(--demo-accent); border-color: var(--demo-accent); color: #fff; }
/* ---------- Низ ---------- */
.ae-demo__foot { padding: 12px 14px; border-top: 1px solid var(--demo-line); display: grid; gap: 8px; }
.ae-demo__reset { font-size: 12px; color: #8a93a5; text-align: center; }
@media (max-width: 575px) {
/* На телефоне панель разворачивается снизу: сбоку она закрывает
половину экрана и мешает смотреть то, ради чего её открыли. */
.ae-demo { top: auto; bottom: 0; left: 0; right: 0; transform: none; }
.ae-demo__tabs {
position: static;
transform: none;
flex-direction: row;
justify-content: flex-end;
margin-right: 12px;
}
.ae-demo--right .ae-demo__tabs,
.ae-demo--left .ae-demo__tabs { align-items: stretch; }
.ae-demo--right .ae-demo__handle,
.ae-demo--left .ae-demo__handle,
.ae-demo--right .ae-demo__buy,
.ae-demo--left .ae-demo__buy { border-radius: 8px 8px 0 0; }
.ae-demo__body { width: 100%; max-height: 70vh; border-radius: 12px 12px 0 0; border-right: 1px solid var(--demo-line); border-left: 1px solid var(--demo-line); }
}
/* На телефоне язычок уходит выше нижней панели: посередине экрана он
перекрывает товары, а внизу налезает на «Корзину». */
@media (max-width: 767px) {
.ae-demo {
top: auto;
bottom: calc(var(--ae-tabbar-h, 62px) + 12px);
transform: none;
}
.ae-demo__body {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: auto;
width: auto;
max-height: 78vh;
border-radius: 14px 14px 0 0;
border-left: 0;
border-right: 0;
}
}
/* ==================================================================
Приложение и уведомления.
Оба окна — просьбы, а не сообщения: они появляются, когда
покупатель занят чем-то своим. Поэтому оба узкие, оба у края
и оба закрываются одним движением.
================================================================== */
/* ---------- Полоса «установить приложение» ---------- */
.ae-install {
position: fixed;
left: 50%;
bottom: 16px;
z-index: 1200;
width: min(calc(100% - 24px), 520px);
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: var(--ae-radius-lg, 14px);
background: var(--ae-bg-card, #fff);
color: var(--ae-text, #1c1f24);
box-shadow: var(--ae-shadow-4);
border: 1px solid var(--ae-border, rgba(0, 0, 0, .08));
/* Полоса въезжает снизу, а не появляется рывком: резкое
появление у нижнего края читается как ошибка вёрстки. */
transform: translate(-50%, calc(100% + 24px));
opacity: 0;
transition: transform .28s ease, opacity .28s ease;
}
.ae-install.is-on {
transform: translate(-50%, 0);
opacity: 1;
}
.ae-install__icon {
flex: none;
width: 48px;
height: 48px;
border-radius: 12px;
object-fit: cover;
}
.ae-install__text {
flex: 1 1 auto;
margin: 0;
font-size: 14px;
line-height: 1.35;
}
.ae-install .ae-btn {
flex: none;
}
.ae-install__close {
flex: none;
width: 28px;
height: 28px;
display: grid;
place-items: center;
border: 0;
padding: 0;
border-radius: 50%;
background: transparent;
color: inherit;
opacity: .5;
cursor: pointer;
}
.ae-install__close:hover {
opacity: 1;
background: var(--ae-bg-soft, rgba(0, 0, 0, .05));
}
/* Кнопка установки в подвале. Скрыта, пока браузер не сообщил
о готовности: предлагать установку там, где она невозможна,
значит обещать несуществующее. */
[data-aero-install][hidden] {
display: none !important;
}
/* ---------- Подсказка для iPhone ---------- */
.ae-ios__title {
margin: 0 0 14px;
font-size: 18px;
}
.ae-ios__steps {
margin: 0;
padding-left: 20px;
display: grid;
gap: 10px;
font-size: 15px;
line-height: 1.45;
}
.ae-ios__icon {
display: inline-grid;
place-items: center;
width: 26px;
height: 26px;
vertical-align: -7px;
border-radius: 7px;
background: var(--ae-bg-soft, rgba(0, 0, 0, .06));
color: var(--ae-primary, #2563eb);
}
/* ---------- Окно «разрешить уведомления» ---------- */
.ae-push-ask {
position: fixed;
z-index: 1200;
top: 16px;
left: 50%;
width: min(calc(100% - 24px), 420px);
padding: 16px;
border-radius: var(--ae-radius-lg, 14px);
background: var(--ae-bg-card, #fff);
color: var(--ae-text, #1c1f24);
border: 1px solid var(--ae-border, rgba(0, 0, 0, .08));
box-shadow: var(--ae-shadow-4);
/* Сверху и по центру — там же, где системный запрос браузера.
Взгляд не придётся переводить, когда следом появится он. */
transform: translate(-50%, -20px);
opacity: 0;
transition: transform .28s ease, opacity .28s ease;
}
.ae-push-ask.is-on {
transform: translate(-50%, 0);
opacity: 1;
}
.ae-push-ask__body {
display: flex;
gap: 12px;
align-items: flex-start;
}
.ae-push-ask__mark {
flex: none;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 50%;
background: color-mix(in srgb, var(--ae-primary, #2563eb) 12%, transparent);
color: var(--ae-primary, #2563eb);
}
.ae-push-ask__copy {
flex: 1 1 auto;
min-width: 0;
}
.ae-push-ask__title {
display: block;
font-size: 15px;
line-height: 1.3;
margin-bottom: 4px;
}
.ae-push-ask__text {
margin: 0;
font-size: 13px;
line-height: 1.45;
opacity: .78;
}
.ae-push-ask__row {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 14px;
}
/* ---------- Кнопка-переключатель уведомлений ---------- */
[data-aero-push-toggle][hidden] {
display: none !important;
}
[data-aero-push-toggle].is-active svg {
fill: currentColor;
}
/* ---------- Внутри установленного приложения ---------- */
@media (display-mode: standalone) {
/* Полосы для установки в приложении быть не может по смыслу. */
.ae-install {
display: none !important;
}
/* Вырез экрана и полоса жестов принадлежат системе: без отступов
шапка уезжает под часы, а нижняя панель — под полосу «домой». */
.ae-header {
padding-top: env(safe-area-inset-top);
}
.ae-tabbar {
padding-bottom: env(safe-area-inset-bottom);
}
}
@media (max-width: 575px) {
.ae-install {
flex-wrap: wrap;
}
.ae-install__text {
flex: 1 1 100%;
order: 2;
}
.ae-install .ae-btn {
order: 3;
flex: 1 1 auto;
}
}
/* ---------- Блок в подвале ---------- */
.ae-fapp {
display: grid;
gap: 8px;
justify-items: start;
}
.ae-fapp__btn {
display: inline-flex;
align-items: center;
gap: 8px;
}
.ae-fapp__btn svg {
flex: none;
}
|