/* ==========================================================================
magazinus.css — стили темы magazinus
Подключается в catalog/view/theme/magazinus/template/common/header.twig
сразу ПОСЛЕ дефолтного stylesheet.css, поэтому всё, что здесь написано,
перекрывает дефолт. Дефолтную тему не трогаем никогда.
Один обычный файл, обычный , то
, и без этого низ блока прыгает. */
p:last-child,
ul:last-child,
ol:last-child {
margin-bottom: 0;
}
small, .small {
font-size: var(--fs-sm);
}
/* Дефолт уменьшает текст описаний и категорий до 13px — отменяем.
Селектор повторён точь-в-точь: у него два id, меньшей специфичностью
его не перебить. */
#product-category #content,
#product-product #tab-description,
#information-information #content {
font-size: inherit;
}
a {
color: var(--c-accent);
}
a:hover,
a:focus {
color: var(--c-accent-hover);
}
/* Картинка не вылезает из своей колонки, даже без класса img-responsive. */
img {
max-width: 100%;
height: auto;
}
/* --------------------------------------------------------------------------
Отступы секций
-------------------------------------------------------------------------- */
#content {
padding-bottom: var(--space-7);
}
footer {
margin-top: var(--space-7);
padding-top: var(--space-6);
padding-bottom: var(--space-6);
}
/* Хлебные крошки — см. отдельный блок ниже (шаг 14): стрелки дефолта из
повёрнутых квадратов пришлось убрать целиком, они не переносились на вторую
строку и на телефоне выталкивали страницу за экран. */
/* --------------------------------------------------------------------------
Формы
Поля ввода набираем на размер мельче текста — так принято в плотных
интерфейсах, и так уже сделано в bootstrap (14px).
⚠ Дефолтная тема сажает их на 12px длинным списком селекторов вида
input[type="text"].form-control — перебить его коротким .form-control
нельзя, специфичность ниже. Поэтому список повторён.
⚠ height: auto обязателен: bootstrap жёстко ставит .form-control высоту
34px под свой 14px/1.43, и на мобильных 16px (см. ниже) текст обрезало бы.
-------------------------------------------------------------------------- */
.form-control,
select.form-control,
textarea.form-control,
input[type="text"].form-control,
input[type="password"].form-control,
input[type="email"].form-control,
input[type="tel"].form-control,
input[type="number"].form-control,
input[type="search"].form-control,
input[type="url"].form-control,
input[type="date"].form-control {
font-size: var(--fs-form);
height: auto;
min-height: 36px;
}
/* Приставка к полю (иконка, «грн») — дефолт держит её на 30px, поле стало
36px, и они разъезжались по высоте. */
.input-group .input-group-addon {
font-size: var(--fs-form);
height: auto;
}
label {
font-size: var(--fs-form);
font-weight: 600;
margin-bottom: var(--space-1);
}
/* --------------------------------------------------------------------------
Мобильные
Заголовки на 360px должны быть заметно меньше десктопных, иначе h1
в три строки съедает первый экран.
⚠ Поля ввода наоборот вырастают до 16px — не ради красоты: Safari на iOS
зумит страницу при фокусе в поле мельче 16px, и вернуть масштаб потом
может только сам покупатель.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
:root {
--fs-h1: 23px;
--fs-h2: 20px;
--fs-h3: 17px;
--fs-form: 16px;
}
#content {
padding-bottom: var(--space-6);
}
}
/* --------------------------------------------------------------------------
ИКОНКИ — шаг 4.
Иконка вставляется пустым , а рисуется
CSS-маской: файл задаёт форму, цвет берётся из currentColor. Поэтому иконка
меняет цвет вместе с текстом (наведение, тёмная плашка) и не завязана
на гамму — в самих .svg цвет не имеет значения вовсе.
Почему не общий twig-шаблон с иконками: в ocStore шаблон рендерится
через ArrayLoader, в котором лежит ровно один файл
(`system/library/template/twig.php:31`). {% include %} и {% import %}
не работают в принципе — общей разметки между шаблонами не бывает,
общими могут быть только CSS-классы.
Почему не Font Awesome, хотя он уже подключён: там сплошные глифы
образца 2013 года, а редизайн натамоды нарисован тонкой линией.
-------------------------------------------------------------------------- */
.mz-icon {
display: inline-block;
width: 20px;
height: 20px;
flex: none;
background-color: currentColor;
-webkit-mask: no-repeat center / contain;
mask: no-repeat center / contain;
}
.mz-icon--search { -webkit-mask-image: url('../image/icon/search.svg'); mask-image: url('../image/icon/search.svg'); }
.mz-icon--phone { -webkit-mask-image: url('../image/icon/phone.svg'); mask-image: url('../image/icon/phone.svg'); }
.mz-icon--user { -webkit-mask-image: url('../image/icon/user.svg'); mask-image: url('../image/icon/user.svg'); }
.mz-icon--mail { -webkit-mask-image: url('../image/icon/mail.svg'); mask-image: url('../image/icon/mail.svg'); }
.mz-icon--cart { -webkit-mask-image: url('../image/icon/cart.svg'); mask-image: url('../image/icon/cart.svg'); }
/* --------------------------------------------------------------------------
ШАПКА — шаг 4 (разметка и раскладка).
Один этаж вместо двух: логотип — поиск — телефон — вход — корзина.
Тонкая полоса #top дефолтной темы убрана из шаблона целиком, см. комментарий
в header.twig.
Раскладка на flex, а не на сетке bootstrap: колонки col-sm-* дают фиксированные
доли, а нам нужно, чтобы поиск забирал всё свободное место при любой длине
названия магазина и номера телефона.
-------------------------------------------------------------------------- */
.mz-header {
background-color: var(--c-bg);
border-bottom: 1px solid var(--c-border);
padding: var(--space-4) 0;
margin-bottom: var(--space-5);
}
.mz-header__inner {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-4) var(--space-5);
}
/* ⚠ Bootstrap вешает на `.container` клирфикс `::before`/`::after`
(`content: " "; display: table`). В обычном блоке они невидимы, но
`.mz-header__inner` — это ещё и flex-контейнер, а там псевдоэлементы
становятся полноценными flex-элементами нулевой ширины и съедают
по одному column-gap с каждой стороны.
Наружу это вылезало так: логотип стоял на 16px правее поля поиска,
а корзина — на 16px левее кнопки поиска. Найдено 2026-08-23 замером
`getBoundingClientRect` (на глаз причину не видно вообще: разметка
и отступы правильные, лишние элементы в вёрстке отсутствуют). */
.mz-header__inner::before,
.mz-header__inner::after {
display: none;
}
/* Витрина одноязычная, `common/language.twig` ничего не рисует — но сам блок
остаётся flex-элементом и добавляет свой gap справа от корзины (ещё 4px
к тем 16). Прячем именно пустой: появится `/ru/` — вернётся сам. */
.mz-header__lang:empty {
display: none;
}
/* ⚠ `flex: 1 1 0`, а НЕ `flex: none` и не `0 1 auto`. База именно НОЛЬ,
и это главное.
Раньше стояло `none`: логотип не сжимался ни при какой тесноте и на узком
экране выталкивал панель значков на вторую строку — шапка вставала
в три этажа.
⚠ Промежуточная попытка `0 1 auto; min-width: 0` НЕ помогла, и это стоит
помнить: при `flex-wrap: wrap` браузер сначала решает, что переносить,
и только потом сжимает то, что осталось на строке. Пока база элемента
равна его содержимому, он участвует в решении о переносе своей полной
шириной — и выталкивает соседа, вместо того чтобы ужаться.
База 0 убирает логотип из этого расчёта совсем: перенос считается
по одной панели значков, а логотип потом занимает остаток строки.
Картинка внутри упирается в потолок высоты, а на тесных экранах
уменьшается вместе с остатком. */
.mz-header__logo {
flex: 1 1 0;
min-width: 0;
}
/* ⚠ Ссылка обязана быть блочной: `max-width: 100%` у картинки считается
от ширины РОДИТЕЛЯ, а строчный `` шириной не управляет — картинка
мерила бы себя от чего угодно и не ужималась. */
.mz-header__logo a {
display: block;
max-width: 100%;
}
.mz-header__logo img {
max-height: 44px;
max-width: 100%;
width: auto;
}
/* Текстовый логотип — пока не выбрано название магазина. */
.mz-logo {
display: inline-block;
font-size: 22px;
font-weight: 700;
line-height: var(--lh-tight);
color: var(--c-text);
white-space: nowrap;
}
.mz-logo:hover,
.mz-logo:focus {
color: var(--c-accent);
}
/* Поиск забирает остаток строки, но не сжимается уже 220px. */
.mz-header__search {
flex: 1 1 220px;
min-width: 220px;
}
.mz-header__actions {
display: flex;
align-items: center;
gap: var(--space-4);
margin-left: auto;
}
/* ⚠️ Обёртка меню аккаунта — блочная (`.dropdown` от bootstrap), и ссылка
внутри неё сидит на базовой линии строки: высота блока выходила 26px против
20px у самой ссылки, а лишние 6px висели снизу. В ряду шапки блоки
центрируются по своей высоте, поэтому «Авторизація» оказывалась на 3px выше
почты — при одинаковых шрифтах и одинаковом `align-items: center`.
Выпадающее меню внутри позиционировано абсолютно, из потока выпадает,
поэтому flex ему не мешает. */
.mz-header__account {
display: flex;
align-items: center;
}
.mz-header__phone,
.mz-header__action {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--c-text);
white-space: nowrap;
}
.mz-header__phone:hover,
.mz-header__phone:focus,
.mz-header__action:hover,
.mz-header__action:focus {
color: var(--c-accent);
text-decoration: none;
}
.mz-header__action-label {
font-size: var(--fs-sm);
}
.mz-header__cart {
min-width: 170px;
}
/* Дефолтная тема вешает на эти блоки нижний отступ 10px — в строке на flex
он сдвигал бы всё вверх относительно центра. */
#logo,
#search,
#cart {
margin-bottom: 0;
}
/* Кнопка корзины: дефолт рисует её как btn-inverse — тёмный градиент bootstrap.
Полная отделка шапки идёт шагом 5, здесь достаточно убрать градиент,
чтобы кнопка не спорила с остальной строкой. */
/* ⚠ Корзина осталась ЗАЛИТОЙ, скруглена только форма. Это единственное
цветное пятно в шапке, и так и задумано: поиск ушёл в тон, а дорога
к оформлению заказа должна оставаться заметной.
⚠ Тем и отличаемся от svitbra, где залитого нет вовсе и непустая корзина
ничем не выделяется. Здесь эта беда не возникает. */
/* ⚠ Геометрия корзины (скругление, высота, отступы) живёт НЕ здесь,
а в блоке «Шапка: отделка» ниже по файлу: там правило более специфичное
(`#cart > .btn.btn-lg`) и стоит позже. Здесь только цвет и типографика.
Первая попытка поставить капсулу в этом блоке ничего не дала —
скругление молча перебивалось. */
#cart > .btn {
background-color: var(--c-accent);
background-image: none;
border: 0;
box-shadow: none;
color: var(--c-text-inverse);
font-size: var(--fs-form);
line-height: var(--lh-tight);
padding: 10px 14px;
text-shadow: none;
}
#cart > .btn:hover,
#cart > .btn:focus,
#cart.open > .btn {
background-color: var(--c-accent-hover);
background-image: none;
color: var(--c-text-inverse);
border: 0;
box-shadow: none;
}
/* --- Шапка на узком экране ------------------------------------------------
Полноценная мобильная шапка (бургер, поиск отдельной строкой) — шаг 6.
Здесь только то, что не даёт ей рассыпаться прямо сейчас: строка
переносится, поиск занимает всю ширину, номер телефона прячется
за иконку. */
@media (max-width: 767px) {
.mz-header__inner {
gap: var(--space-3);
}
.mz-header__search {
order: 3;
flex: 1 1 100%;
min-width: 0;
}
.mz-header__phone-number,
.mz-header__action-label {
display: none;
}
.mz-header__cart {
min-width: 0;
}
}
/* --------------------------------------------------------------------------
ШАПКА: отделка — шаг 5.
Источник — секция «top» из `stylesheet_natamoda.css` (строки 126–202),
но переложена, а не скопирована: там стили писались под другую разметку
(.white, .headfix, плавающая корзина, обратный звонок, режим работы,
мессенджеры). Взято то, что относится к внешнему виду, а не к чужим блокам:
• белая шапка с тонкой тенью вместо жирной рамки;
• поиск — светло-серое поле, кнопка сплошным вторым акцентом;
• подписи действий мелкими капсами, номер телефона крупнее и жирнее;
• счётчик корзины — плашка акцентного цвета.
-------------------------------------------------------------------------- */
.mz-header {
box-shadow: var(--shadow-header);
}
/* --- Поиск ---------------------------------------------------------------
Дефолт рисует поле и кнопку как обычную bootstrap-группу с рамками и
градиентом. У натамоды поле «утоплено» в серый, а кнопка — сплошной
цветной квадрат без рамки. */
/* ⚠ Поиск здесь — КАПСУЛА в тон, а не прямоугольник с залитой кнопкой
(решение владельца 2026-08-30).
Причина в знаке: «Статна» написана от руки, сплошными скруглёнными
росчерками. Прямой угол рядом с такой строкой спорит с ней, а два
тёмно-розовых прямоугольника подряд — поиск и корзина — читались
как два одинаковых по важности пятна, хотя действие тут одно.
⚠ Заливка `--c-accent-soft` — это `#faeff0`, взятый побайтово
из подложки фирменной иконки. То есть поле окрашено ровно тем же,
чем плашка знака, а не «похожим розовым».
⚠ Залитым осталось ОДНО пятно — корзина. Она единственная ведёт
к оформлению заказа, и пусть будет единственной заметной.
⚠ У svitbra поиск устроен иначе — линией-подчёркиванием. Не копируем
одно в другое намеренно: там монохромная антиква, здесь рукописная роза,
и магазины должны отличаться не только цветом. */
#search .form-control,
#search .input-lg {
height: 42px;
padding: 0 0 0 18px;
font-size: var(--fs-form);
line-height: 42px;
background-color: var(--c-accent-soft);
border: 0;
border-radius: 999px 0 0 999px;
box-shadow: none;
}
/* ⚠ Фокус показываем кольцом на ВСЕЙ группе, а не рамкой на поле:
поле и кнопка — два соседних элемента одной капсулы, и рамка на одном
из них разрезала бы её пополам. `:focus-within` срабатывает и когда
курсор в поле, и когда фокус ушёл на кнопку. */
#search .form-control:focus {
background-color: var(--c-bg);
box-shadow: none;
}
#search:focus-within {
border-radius: 999px;
box-shadow: 0 0 0 1px var(--c-accent);
}
#search:focus-within .form-control,
#search:focus-within .btn {
background-color: var(--c-bg);
}
/* ⚠ Кнопка поиска красится основным акцентом, тем же, что «Купити».
Сначала здесь стоял второй акцент — так у натамоды: у них кнопка поиска
сливовая (#814275), а кнопки покупки синие (#597AB2), то есть два цвета
по разным ролям. В нашей нейтральной заглушке-палитре это читалось просто
как несогласованность. Второй акцент остался там, где он несёт смысл:
цена по акции и обводка фокуса. */
/* Кнопка — правый край той же капсулы: та же заливка, значок акцентом.
Своей тёмной заливки у неё больше нет, поэтому и ширина меньше 52:
добирать площадь под палец здесь нечем, а лишняя ширина отодвигала бы
значок от текста. */
#search .btn,
#search .btn-lg {
width: 46px;
height: 42px;
padding: 0;
border: 0;
border-radius: 0 999px 999px 0;
background-color: var(--c-accent-soft);
background-image: none;
color: var(--c-accent);
box-shadow: none;
text-shadow: none;
}
#search .btn:hover,
#search .btn:focus,
#search .btn-lg:hover,
#search .btn-lg:focus {
background-color: var(--c-accent-soft);
color: var(--c-accent-hover);
color: var(--c-text-inverse);
}
/* Иконка внутри кнопки — своя, вместо Font Awesome. Сам
остаётся в разметке: шаблон поиска мы не копировали (к нему привязан
штатный JS), поэтому глиф просто прячем. */
#search .btn .fa {
display: none;
}
#search .btn::before {
content: '';
display: inline-block;
width: 22px;
height: 22px;
vertical-align: middle;
background-color: currentColor;
-webkit-mask: url('../image/icon/search.svg') no-repeat center / contain;
mask: url('../image/icon/search.svg') no-repeat center / contain;
}
/* --- Телефон и вход ------------------------------------------------------ */
/* Метрики те же, что у ссылки авторизации рядом (`.mz-header__action-label`).
Было 17px полужирным против её 12px обычных — почта выглядела крупнее
и сидела на другой высоте: при `align-items: center` центры строк совпадают,
а базовые линии у разных кеглей расходятся, и глаз видит ступеньку.
Решение владельца 2026-08-26: «пусть всё будет как авторизация».
⚠️ Кроме капса и разрядки: адрес почты набирают как есть, uppercase
исказил бы его, а `letter-spacing` мешает читать строчные. */
.mz-header__phone-number {
font-size: var(--fs-xs);
line-height: var(--lh-tight);
}
.mz-header__action-label {
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: .04em;
line-height: var(--lh-tight);
}
/* --- Корзина -------------------------------------------------------------
Кнопка той же высоты, что поиск, со своей иконкой и счётчиком-плашкой. */
.mz-header__cart {
min-width: 0;
}
/* ⚠ Здесь и решается форма корзины — это правило специфичнее и позже
того, что задаёт ей цвет. Скругление 999px делает капсулу под стать
рукописному знаку и капсуле поиска рядом; на узком экране, где ширина
становится 52px, та же строчка даёт круг. */
#cart > .btn,
#cart > .btn.btn-lg {
display: inline-flex;
align-items: center;
gap: var(--space-2);
width: auto;
height: 42px;
padding: 0 var(--space-5);
border-radius: 999px;
font-size: var(--fs-sm);
}
#cart > .btn .fa {
display: none;
}
#cart > .btn::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
flex: none;
background-color: currentColor;
-webkit-mask: url('../image/icon/cart.svg') no-repeat center / contain;
mask: url('../image/icon/cart.svg') no-repeat center / contain;
}
#cart-total {
white-space: nowrap;
}
/* Выпадающая корзина: дефолт растягивает её по ширине кнопки, а кнопка теперь
узкая — списку товаров нужно своё пространство. */
#cart .dropdown-menu {
min-width: 300px;
border-radius: 0;
border-color: var(--c-border);
}
/* Ссылки в выпадающей корзине разнесены по краям: «Переглянути кошик»
слева, «Оформити замовлення» справа (решение владельца 2026-08-27).
В дефолтном шаблоне у абзаца стоит bootstrap-класс `text-right`,
и обе ссылки слипались в один ком у правого края.
⚠ Правим стилем, а не копией шаблона: ради одной строки
в `common/cart.twig` пришлось бы завести в теме весь файл, а каждая
лишняя копия не обновится при апдейте движка (наследование пофайловое).
⚠ Между ссылками в разметке стоят три ` `. Во flex-контейнере они
становятся отдельным анонимным элементом, поэтому `space-between`
разводит именно ссылки по краям, а пробелы остаются посередине
и не видны. Убирать их из шаблона не нужно. */
#cart .dropdown-menu p.text-right {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-3);
/* ⚠ Нижний отступ обязателен: без него ссылки прилипают к рамке
выпадашки. Первая редакция гасила его `margin-bottom: 0` — заметил
владелец. */
margin: var(--space-2) 0 var(--space-3);
}
/* --- Выпадающие меню -----------------------------------------------------
Дефолт красит пункт при наведении синим градиентом bootstrap — это цвет
заводской темы, к нашей гамме отношения не имеющий. */
.dropdown-menu {
border-radius: 0;
border-color: var(--c-border);
box-shadow: var(--shadow-menu);
}
.dropdown-menu li > a {
padding: var(--space-2) var(--space-4);
color: var(--c-text);
}
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus {
background-color: var(--c-accent-soft);
background-image: none;
color: var(--c-accent-hover);
}
@media (max-width: 767px) {
#cart .dropdown-menu {
min-width: 0;
width: 100%;
}
}
/* --------------------------------------------------------------------------
ШАПКА НА УЗКОМ ЭКРАНЕ — шаг 6.
Шапка сжимается тремя ступенями, а не одной: между 1170 и 360 текста в ней
ровно столько, что он перестаёт помещаться задолго до телефонной ширины.
Порядок отказа от лишнего выбран по ценности: первой уходит подпись «Вхід»
(иконка человечка понятна и без неё), потом номер телефона и состав корзины,
и только на телефоне поиск переезжает на отдельную строку.
≥ 1200 логотип · поиск · телефон с номером · вход с подписью · корзина с суммой
992-1199 то же, но у входа только иконка
768-991 телефон и корзина тоже сворачиваются в иконки
< 768 иконки в одну строку с логотипом, поиск — строкой ниже
⚠ Бургера в шапке нет намеренно. Категорий всего две («Бюстгальтери»,
«Трусики»), и на 360px они помещаются в строку меню целиком — прятать их
за кнопку значит добавить лишнее нажатие на ровном месте. Появится третий
уровень или десяток категорий — вернуться к вопросу в шаге 7, где живёт меню.
-------------------------------------------------------------------------- */
@media (max-width: 1199px) {
.mz-header__action-label {
display: none;
}
}
@media (max-width: 991px) {
.mz-header__inner {
gap: var(--space-3) var(--space-4);
}
.mz-header__phone-number {
display: none;
}
/* Корзина превращается в квадратную кнопку с одной иконкой.
⚠ Состав («Товарів: 0 (0.00 грн.)») при этом теряется целиком, а не
сокращается до числа: контроллер отдаёт это одной готовой строкой
(`common/cart.php`, sprintf по text_items), отдельного счётчика в данных
шаблона нет. Разделить их можно только правкой контроллера — не в этом
шаге и не ради мобильной шапки. */
#cart-total {
display: none;
}
/* ⚠ Связка с кнопкой поиска РАЗОРВАНА 2026-08-30. Раньше здесь стояло
«ширина ровно как у `#search .btn`, 52px»: обе кнопки были залиты одним
цветом, вставали друг под другом у правого края, и разная ширина
читалась бы как недосмотр. Теперь кнопка поиска — часть светлой
капсулы, залита только корзина, пары больше нет.
52px остаётся собственным размером корзины: со скруглением 999px
она превращается в аккуратный круг 52x42. Менять `#search .btn`
можно свободно, сюда это больше не тянется. */
#cart > .btn,
#cart > .btn.btn-lg {
width: 52px;
padding: 0;
justify-content: center;
}
}
@media (max-width: 767px) {
.mz-header {
padding: var(--space-3) 0;
margin-bottom: var(--space-4);
}
.mz-logo {
font-size: 18px;
}
/* ⚠ Дыра между знаком и значками закрывается ЗНАКОМ, а не разгоном
значков (решение владельца 2026-08-30, после снимков).
На узком экране первая строка — это логотип и три значка, а поиск
уходит на вторую. Логотип в 44px занимал меньше трети ширины,
значки жались к правому краю, и между ними зияло около 130px пустоты.
Разгонять значки по остатку (`justify-content: space-between`)
пробовали и отклонили: три значка — это одна панель действий,
и разнесённые по ширине они читаются как не связанные между собой,
а корзина теряет соседство с остальными. Дыра при этом никуда
не девается, просто дробится на три.
Логотип на 52px съедает пустоту сам и заодно перестаёт теряться:
на телефоне знак и так был непропорционально мелким.
⚠ Промежуток между значками — 12px, а не 4: четырёх пикселей мало
пальцу, соседние цели слипаются. То же число стоит в мобильной
шапке svitbra. */
/* ⚠ 52px здесь — ПОТОЛОК, а не фиксированный размер. Пока места хватает,
знак закрывает пустоту собой; когда экран уже, он сжимается вместе
с местом и остаётся в строке со значками.
⚠ Первая редакция ставила 52px при `flex: none` у контейнера,
и на ширине чуть меньше 430 значки уезжали на вторую строку —
шапка вставала в три этажа. Проверено было ровно на одной ширине;
правило теперь проверяется по диапазону 320-767. */
.mz-header__logo img {
max-height: 52px;
}
.mz-header__actions {
gap: var(--space-3);
}
/* Пальцу нужна цель не меньше 40px, а иконка сама по себе 20px —
добираем отступами вокруг. */
.mz-header__phone,
.mz-header__action {
padding: var(--space-2);
}
/* ⚠ Здесь были правила, уменьшавшие поиск на мобильном до 40px высоты
и 44px ширины кнопки. Они не работали никогда: `.mz-header__search .btn`
это (0,2,0), а выше по файлу стоит `#search .btn` — (1,1,0), и id
перебивает класс независимо от порядка и медиазапроса. Замер на 402
показывал 52×42, то есть десктопные числа.
Убраны, а не починены: одинаковый размер поиска на всех ширинах и есть
то, что нужно, а кнопка корзины теперь подогнана под него. Правило,
которое врёт о результате, хуже отсутствующего. */
}
/* --------------------------------------------------------------------------
МЕНЮ КАТЕГОРИЙ — шаг 7, переделано 2026-08-31 (шаг 3 EXPANSION.md).
Дефолт рисует его синей плашкой с градиентом — заводским цветом ocStore.
У натамоды меню, наоборот, белое: тонкая линия сверху и мелкие капсы
(`#menu`, строки 286–303 их CSS). Берём этот вид — он не спорит с товаром,
а на странице каталога главное всё-таки товар.
Своя разметка (`common/menu.twig`) вместо `.navbar`: bootstrap-навбар тянет
за собой свою отделку, а нам от него нужны были только выпадающие списки
и сворачивание на телефоне — и то и другое здесь сделано двумя десятками
строк CSS.
⚠ Две несущие вещи, которые легко сломать по отдельности:
• ДЕСКТОП — панель выпадает ПО НАВЕДЕНИЮ (`:hover`), плюс `:focus-within`
ради клавиатуры. Ни одной строки JS здесь не участвует. Так же сделано
и в редизайне натамоды (`mouseover` + `slideDown`);
• ТЕЛЕФОН — строка ссылок сворачивается в кнопку, панель ВЫЕЗЖАЕТ СЛЕВА.
Решение владельца 2026-08-31, «как в нтест». У натамоды это делал
сторонний jquery.mmenu (35 КБ JS + 44 КБ CSS, написан под jQuery 2);
здесь панель целиком на CSS, а скрипт в шаблоне только ставит `is-open`.
⚠ Порог ровно один — 767px. В этом файле есть и вторая мобильная ступень,
991px, и лежит она НИЖЕ по файлу: ставя что-то для меню в блоке 767,
проверяй, не перекрывает ли его блок 991. Меню в 991 не упоминается вовсе,
и пусть так и остаётся.
-------------------------------------------------------------------------- */
.mz-menu {
background-color: var(--c-bg);
border-bottom: 1px solid var(--c-border);
margin-bottom: var(--space-5);
}
.mz-menu__list {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.mz-menu__link {
display: block;
padding: var(--space-3) 0;
margin-right: var(--space-6);
font-size: var(--fs-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--c-text-muted);
border-bottom: 2px solid transparent;
}
.mz-menu__link:hover,
.mz-menu__link:focus {
color: var(--c-text);
border-bottom-color: var(--c-accent);
text-decoration: none;
}
/* ⚠ Подсветки текущей категории нет: контроллер меню не передаёт в шаблон,
какая страница открыта, а сравнивать href с адресом страницы в twig не с чем
(`common/menu.php` отдаёт только список категорий). Понадобится — это
правка контроллера, а не шаблона. */
.mz-menu__sub {
margin: 0;
padding: 0;
list-style: none;
}
.mz-menu__sublink {
display: block;
font-size: var(--fs-sm);
color: var(--c-text-muted);
}
.mz-menu__sublink:hover,
.mz-menu__sublink:focus {
color: var(--c-text);
background-color: var(--c-bg-soft);
text-decoration: none;
}
/* --------------------------- десктоп: наведение --------------------------- */
@media (min-width: 768px) {
/* Всё, что нужно только телефону, здесь не существует. */
.mz-menu__burger,
.mz-menu__panel-head,
.mz-menu__expander,
.mz-menu__shade {
display: none;
}
.mz-menu__item {
position: relative;
}
/* ⚠ `top: 100%` — это низ пункта, а он совпадает с низом полосы меню.
Зазора между ссылкой и панелью не возникает, и наведение не срывается
при переходе мышью вниз. Появится вертикальный отступ у пункта —
зазор появится вместе с ним, и меню начнёт моргать. */
.mz-menu__sub {
position: absolute;
z-index: 30;
top: 100%;
left: 0;
min-width: 232px;
padding: var(--space-2) 0;
background-color: var(--c-bg);
border: 1px solid var(--c-border);
border-top: 0;
box-shadow: var(--shadow-menu);
opacity: 0;
visibility: hidden;
transition: opacity .12s ease;
}
.mz-menu__item--parent:hover .mz-menu__sub,
.mz-menu__item--parent:focus-within .mz-menu__sub {
opacity: 1;
visibility: visible;
}
.mz-menu__sublink {
padding: var(--space-2) var(--space-4);
}
}
/* ------------------------- телефон: выезжающее меню ----------------------- */
@media (max-width: 767px) {
.mz-menu {
margin-bottom: var(--space-4);
}
/* Замок прокрутки страницы под открытой панелью. У натамоды был свой,
такой же по смыслу (`html.open, html.open body { overflow: hidden }`). */
html.mz-menu-open,
html.mz-menu-open body {
overflow: hidden;
}
.mz-menu__burger {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) 0;
background: none;
border: 0;
font-family: inherit;
font-size: var(--fs-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--c-text-muted);
}
.mz-menu__burger:hover,
.mz-menu__burger:focus {
color: var(--c-text);
}
.mz-menu__bars,
.mz-menu__bars::before,
.mz-menu__bars::after {
display: block;
width: 18px;
height: 2px;
background-color: currentColor;
}
.mz-menu__bars {
position: relative;
}
.mz-menu__bars::before,
.mz-menu__bars::after {
content: '';
position: absolute;
left: 0;
}
.mz-menu__bars::before { top: -6px; }
.mz-menu__bars::after { top: 6px; }
/* ⚠ Панель и затемнение прячутся через `visibility`, а не `display`:
у `display` нет промежуточных состояний, и выезд не анимировался бы
вовсе. Задержка `visibility 0s linear .22s` при закрытии держит панель
видимой ровно столько, сколько едет `transform`. */
.mz-menu__panel {
position: fixed;
z-index: 1050;
top: 0;
left: 0;
bottom: 0;
width: 82%;
max-width: 320px;
background-color: var(--c-bg);
box-shadow: var(--shadow-menu);
overflow-y: auto;
visibility: hidden;
transform: translateX(-100%);
transition: transform .22s ease, visibility 0s linear .22s;
}
.mz-menu.is-open .mz-menu__panel {
visibility: visible;
transform: none;
transition: transform .22s ease, visibility 0s;
}
.mz-menu__shade {
position: fixed;
z-index: 1040;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(42, 35, 38, .45);
opacity: 0;
visibility: hidden;
transition: opacity .22s ease, visibility 0s linear .22s;
}
.mz-menu.is-open .mz-menu__shade {
opacity: 1;
visibility: visible;
transition: opacity .22s ease, visibility 0s;
}
.mz-menu__panel-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--c-border);
}
.mz-menu__panel-title {
font-size: var(--fs-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--c-text);
}
.mz-menu__close {
position: relative;
width: 32px;
height: 32px;
padding: 0;
background: none;
border: 0;
color: var(--c-text-muted);
}
.mz-menu__close::before,
.mz-menu__close::after {
content: '';
position: absolute;
top: 15px;
left: 7px;
width: 18px;
height: 2px;
background-color: currentColor;
}
.mz-menu__close::before { transform: rotate(45deg); }
.mz-menu__close::after { transform: rotate(-45deg); }
.mz-menu__list {
display: block;
}
/* ⚠ Строка пункта собрана флексом, а кнопка раскрытия НЕ позиционируется
абсолютно. Абсолютной ей пришлось бы задать высоту числом, а число
разъехалось бы с высотой строки при первой же правке шрифта; так она
тянется по строке сама. Подкатегории берут всю ширину и падают вниз. */
.mz-menu__item {
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid var(--c-border);
}
.mz-menu__link {
flex: 1 1 auto;
margin-right: 0;
padding: var(--space-4);
border-bottom: 0;
color: var(--c-text);
}
.mz-menu__link:hover,
.mz-menu__link:focus {
border-bottom-color: transparent;
background-color: var(--c-bg-soft);
}
.mz-menu__expander {
position: relative;
flex: 0 0 56px;
padding: 0;
background: none;
border: 0;
border-left: 1px solid var(--c-border);
color: var(--c-text-muted);
}
.mz-menu__expander::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translate(-50%, -70%) rotate(45deg);
transition: transform .18s ease;
}
.mz-menu__item.is-expanded .mz-menu__expander::before {
transform: translate(-50%, -30%) rotate(225deg);
}
.mz-menu__sub {
flex: 0 0 100%;
display: none;
background-color: var(--c-bg-soft);
border-top: 1px solid var(--c-border);
}
.mz-menu__item.is-expanded .mz-menu__sub {
display: block;
}
.mz-menu__sublink {
padding: var(--space-3) var(--space-4) var(--space-3) var(--space-6);
}
}
/* --------------------------------------------------------------------------
ПОДВАЛ — шаг 8.
Дефолт красит подвал в тёмно-серый #303030 — тяжёлая плита под лёгкой
светлой страницей. У натамоды подвал белый с тонкой линией сверху
(`footer`, строка 314 их CSS), и это честнее: подвал — служебная зона,
а не второй по важности блок страницы.
-------------------------------------------------------------------------- */
.mz-footer {
background-color: var(--c-bg);
border-top: 1px solid var(--c-border);
color: var(--c-text);
margin-top: var(--space-8);
padding: var(--space-7) 0 var(--space-6);
}
.mz-footer__title {
font-size: var(--fs-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--c-text);
margin-bottom: var(--space-3);
}
.mz-footer__list {
margin: 0;
font-size: var(--fs-sm);
}
.mz-footer__list li + li {
margin-top: var(--space-2);
}
.mz-footer__list a {
color: var(--c-text-muted);
}
.mz-footer__list a:hover,
.mz-footer__list a:focus {
color: var(--c-accent);
text-decoration: underline;
}
.mz-footer__copy {
margin: var(--space-6) 0 0;
padding-top: var(--space-4);
border-top: 1px solid var(--c-border);
font-size: var(--fs-sm);
color: var(--c-text-muted);
}
@media (max-width: 767px) {
.mz-footer {
margin-top: var(--space-6);
padding: var(--space-6) 0 var(--space-5);
}
/* На телефоне колонки идут одна под другой — им нужен воздух между собой. */
.mz-footer__cols > [class^="col-"] + [class^="col-"] {
margin-top: var(--space-5);
}
}
/* --------------------------------------------------------------------------
ЛИСТИНГ КАТЕГОРИИ: сетка — шаг 10.
Число колонок задаётся здесь, а не классами на плитке: у дефолта на каждом
товаре висело `col-lg-3 col-md-4 col-sm-6`, и любое изменение сетки означало
правку шаблона. CSS grid держит это в одном месте.
≥ 1200 4 в ряд
992-1199 3
768-991 2
< 768 2 (плитка 165px на 360-м экране — читается)
-------------------------------------------------------------------------- */
/* ⚠ Числа литеральные, из редизайна, и оба были прочитаны неверно до 2026-08-23.
Ошибка одна и та же: бралось общее правило bootstrap, а не то, которым
редизайн его перекрывает на странице категории.
было 30px по горизонтали — это гуттер bootstrap (два поля по 15px);
на самом деле `#product-category .product-layout { padding: 0 4px !important }`
плюс `#product-category .products { padding: 0 4px }`, то есть
4 + 4 = **8px между изображениями**;
было 10px по вертикали — это общее `.product-layout { margin-bottom: 10px }`
(строка 453 исходника); на странице категории оно перекрыто
`#product-category .product-layout { margin-bottom: 20px }` (строка 1729).
В bootstrap промежуток набирается полями соседних ячеек, у CSS grid — это
сам `gap`, поэтому 4 + 4 записываются одним числом 8. Поля контейнера
при этом тоже 8 (4 от `.products` + 4 от ячейки) — см.
`#product-category.container-fluid` ниже. */
.mz-products {
display: grid;
/* ⚠ minmax(0, 1fr), а не 1fr: у грид-ячейки минимальная ширина по умолчанию
равна min-content, и на 360px плитка распирала ряд шире окна
(замер: документ 391 при окне 360). Ноль снимает этот минимум. */
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px 8px;
margin-bottom: var(--space-6);
}
/* Четыре в ряд держатся до 992 — это `col-md-3` натамоды. Ниже 992 у них
`col-sm-6`, то есть две; на телефоне у них одна, но мы оставляем две
(решение владельца по плану: «1-2 на телефоне»). */
@media (max-width: 991px) {
.mz-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Страница категории — единственная во всю ширину окна. Ограничение
сверху — чтобы превью 470px не растягивалось.
⚠ Поля здесь 8px, а не общие --layout-gutter (15px): в редизайне
`#product-category .products` гасит родительские 15px отрицательными
margin'ами и ставит свои `padding: 0 4px`, к которым добавляются 4px
ячейки. От края окна до картинки — 8px, ровно как между картинками. */
#product-category.container-fluid {
max-width: var(--layout-max-listing);
margin: 0 auto;
padding-left: 8px;
padding-right: 8px;
}
/* --- Панель сортировки --------------------------------------------------- */
.mz-toolbar {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--space-3) var(--space-5);
margin-bottom: var(--space-5);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--c-border);
}
.mz-toolbar__field {
display: flex;
align-items: center;
gap: var(--space-2);
}
.mz-toolbar__label {
margin: 0;
font-size: var(--fs-sm);
font-weight: 400;
color: var(--c-text-muted);
white-space: nowrap;
}
.mz-toolbar__field .form-control {
width: auto;
border-radius: 0;
}
/* --- Описание категории и подкатегории ----------------------------------- */
/* Описание категории лежит под товарами и в обычном контейнере — см. шаблон. */
.mz-category__text,
.mz-brand__text {
margin-top: var(--space-7);
color: var(--c-text-muted);
}
.mz-category__text h2,
.mz-category__text h3,
.mz-brand__text h2,
.mz-brand__text h3 {
color: var(--c-text);
}
/* --- страница бренда -------------------------------------------------------
Разметка листинга у неё общая с категорией (.mz-products / .mz-product),
поэтому здесь только шапка с логотипом и текст под товарами.
⚠ Текст бренда переиспользует правила текста категории: это один и тот же
блок «читаемая простыня под листингом», и разводить их значило бы держать
две одинаковые копии, которые разойдутся при первой же правке. */
.mz-brand__head {
display: flex;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-5);
}
.mz-brand__head h1 {
margin: 0;
}
/* Логотипы у брендов разной пропорции — от вытянутых до почти квадратных,
поэтому ограничена ВЫСОТА, а ширина считается сама. */
.mz-brand__logo {
height: 48px;
width: auto;
flex: none;
}
@media (max-width: 767px) {
.mz-brand__head {
gap: var(--space-3);
}
.mz-brand__logo {
height: 36px;
}
}
.mz-subcats {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin: 0 0 var(--space-5);
padding: 0;
list-style: none;
}
/* ⚠ Значок и подпись живут в ОДНОЙ ссылке, а не рядом: подкатегория —
одна цель, и промахнуться мимо неё, попав между картинкой и словом,
покупатель не должен. Отсюда и flex здесь, а не на `li`. */
.mz-subcats a {
display: flex;
align-items: center;
gap: var(--space-3);
/* ⚠ Ширина ОДНА НА ВСЕХ, а не по длине подписи. Замер до правки дал
176, 224, 225 и 267 — разброс в 91 пиксель, и строка плашек читалась
как случайная. 300 взято по самой длинной подписи (181px в одну
строку) с запасом на счётчик товаров: «(0)» станет «(16)».
⚠ Подпись длиннее — перенесётся на вторую строку, и это ничего
не стоит: высоту плашки задаёт картинка (112), две строки по 13px
в неё помещаются. Поэтому `nowrap` здесь не нужен. */
width: 300px;
padding-right: var(--space-4);
background-color: var(--c-bg-soft);
border: 1px solid var(--c-border);
color: var(--c-text);
font-size: var(--fs-sm);
}
.mz-subcats a:hover,
.mz-subcats a:focus {
border-color: var(--c-border-strong);
text-decoration: none;
}
/* ⚠ Размер задан числами, а не `auto`: файл приходит ровно 80x112
(`theme_<тема>_image_category_*`), и жёсткие числа держат высоту плашки
постоянной ещё до загрузки картинки — иначе строка плашек дёргается
по мере подгрузки.
⚠ Пропорция 1.4 — та же, что у товарных превью (470x657, 555x777,
293x410). Заводские 80x80 квадратные: квадратный значок рядом
с портретными плитками товара читается как чужой. Меняешь одно —
меняй и второе, число в настройке и число здесь обязаны совпадать. */
.mz-subcats__image {
display: block;
flex: 0 0 auto;
width: 80px;
height: 112px;
}
.mz-subcats__label {
font-weight: 600;
}
/* ⚠ НА ТЕЛЕФОНЕ ЗНАЧКОВ НЕТ — решение владельца 2026-08-31.
Вместе со значком уходит и фиксированная ширина: без картинки плашка
снова становится пилюлей по длине подписи, и четыре пилюли занимают
одну-две строки вместо четырёх плашек по 114px. Ровнять их по ширине
на телефоне незачем — там они и так идут в столбик или по две.
⚠ Заодно снимается вопрос узкого экрана: 300px фиксированной ширины
на 320px вылезали бы за край и давали горизонтальную прокрутку всей
странице. Теперь ширины нет вовсе, и страховка не нужна.
⚠ Картинка прячется через `display: none`, но из разметки НЕ убирается:
убрать её в шаблоне значило бы решать за десктоп из мобильного правила.
Байты картинки браузер при этом всё равно скачает — если это когда-нибудь
станет важно, лечится `` с пустым источником, а не правкой здесь. */
@media (max-width: 767px) {
.mz-subcats__image {
display: none;
}
.mz-subcats a {
width: auto;
padding: var(--space-2) var(--space-4);
}
}
@media (max-width: 767px) {
/* На узком экране поля переносятся на две строки, и подписи разной длины
(«Сортування:» против «Показати:») разводили селекты по разным местам.
Сетка из двух колонок ставит подписи в первую, поля во вторую —
левые края полей совпадают.
`display: contents` растворяет обёртку поля, чтобы её label и select
стали прямыми ячейками сетки. Колонки `max-content`, а не `1fr`:
селекты сохраняют свою natural-ширину («16» не растягивается на всю
строку следом за «За замовчуванням»). */
.mz-toolbar {
display: grid;
grid-template-columns: max-content max-content;
justify-content: start;
justify-items: start;
align-items: center;
gap: var(--space-3) var(--space-2);
}
.mz-toolbar__field {
display: contents;
}
}
/* --------------------------------------------------------------------------
ПЛИТКА ТОВАРА — шаг 11.
Четыре вещи: картинка, название, цена, кнопка. Описание из плитки убрано
(в дефолте там 100 символов текста) — в сетке из четырёх колонок оно
превращается в серый шум и ломает выравнивание.
⚠ `aspect-ratio` на картинке обязателен. Превью 470×657 приходят по сети
и без зарезервированной высоты вёрстка прыгает на каждой загрузке: сначала
плитки схлопнуты, потом раздвигаются. Пропорция та же, что у превью.
⚠ Названия у нас длинные (бренд + модель + цвет, до трёх строк). Обрезка
тремя строками нужна не ради красоты: без неё соседние плитки в ряду
разъезжаются по высоте, и кнопки «Купити» стоят на разных уровнях.
-------------------------------------------------------------------------- */
/* Плитка отделяется от страницы фоном, а не рамкой — как в редизайне
(`.product-thumb { border: 0; background-color: #FFF }` поверх более
раннего правила с рамкой). Белое на сером. */
.mz-product {
display: flex;
flex-direction: column;
background-color: var(--c-bg);
}
.mz-product__image {
display: block;
aspect-ratio: 470 / 657;
overflow: hidden;
background-color: var(--c-bg-soft);
}
.mz-product__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Подпись плотнее, чем стандартные 16px по кругу: у редизайна внутри плитки
воздуха мало (`.caption { padding: 0 20px }`, заголовок 10px, цена в одну
строку с кнопкой). Мы не уходим в их 10px шрифта, но и лишний воздух
внутри плитки не держим. */
.mz-product__body {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-3) var(--space-4) var(--space-4);
}
.mz-product__name {
margin: 0;
font-size: var(--fs-base);
font-weight: 600;
line-height: 1.35;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.mz-product__name a {
color: var(--c-text);
}
.mz-product__name a:hover,
.mz-product__name a:focus {
color: var(--c-accent);
text-decoration: none;
}
/* margin-top: auto прижимает цену и кнопку к низу плитки — тогда они стоят
на одной линии во всём ряду, сколько бы строк ни занял заголовок. */
.mz-product__price {
margin-top: auto;
font-size: var(--fs-lead);
font-weight: 700;
color: var(--c-text);
}
.mz-product__price-new {
color: var(--c-accent-2);
}
.mz-product__price-old {
margin-left: var(--space-2);
font-size: var(--fs-sm);
font-weight: 400;
color: var(--c-text-muted);
text-decoration: line-through;
}
/* Кнопки «Купити» в плитке нет — решение владельца 2026-08-28.
Она не могла добавить товар в корзину и никогда этого не делала:
размер и цвет у нас `required`, а ядро при незаполненной обязательной
опции отдаёт `json['redirect']` на страницу товара
(`catalog/controller/checkout/cart.php:379`), и common.js делает
`location = …` (`common.js:155`). То есть кнопка тратила AJAX-запрос
ради перехода, который и так даёт клик по картинке или названию.
Класс `.mz-product__buy` удалён вместе с ней. */
@media (max-width: 767px) {
.mz-product__body {
gap: var(--space-2);
padding: var(--space-3);
}
.mz-product__name {
font-size: var(--fs-sm);
}
.mz-product__price {
font-size: var(--fs-base);
}
}
/* --------------------------------------------------------------------------
КНОПКИ — заодно на шаге 11.
Bootstrap 3 красит `.btn-primary` в свой синий, а дефолтная тема добавляет
поверх градиенты. Кнопки встречаются на всех служебных страницах (контакты,
вход, корзина), и синяя кнопка рядом с нашей плиткой выглядит чужой.
Отделка самих форм — шаги 24-25, здесь только цвет и форма.
-------------------------------------------------------------------------- */
.btn {
border-radius: 0;
font-size: var(--fs-form);
text-shadow: none;
}
.btn-primary {
background-color: var(--c-accent);
background-image: none;
border-color: var(--c-accent);
color: var(--c-text-inverse);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
background-color: var(--c-accent-hover);
background-image: none;
border-color: var(--c-accent-hover);
color: var(--c-text-inverse);
}
.btn-default {
background-color: var(--c-bg);
background-image: none;
border-color: var(--c-border);
color: var(--c-text);
}
.btn-default:hover,
.btn-default:focus {
background-color: var(--c-bg-soft);
background-image: none;
border-color: var(--c-border-strong);
color: var(--c-text);
}
/* --------------------------------------------------------------------------
ПАГИНАЦИЯ И СЧЁТЧИК — шаг 12.
Разметку страниц рисует ядро (`system/library/pagination.php`) — это
`