/* ============================================================ ДАЛИНИ · стыковка макета с OpenCart Здесь только то, чего нет в theme.css: оформление виджетов, разметку которых диктует движок (корзина в шапке, меню каталога). theme.css остаётся зеркалом макета из design/ и правится там. ============================================================ */ /* ---------- гасим протечки из stylesheet.css стандартной темы ---------- Он подключён ради страниц, ещё не перенесённых в тему, и задаёт #logo, #search и #cart нижний отступ 10px. В шапке это флекс-ряд с align-items:center, поэтому такой отступ поднимает элемент на 5px. */ .header #search, .header #cart, .header #logo{margin:0} /* ---------- корзина в шапке ---------- */ .hcart{position:relative;flex:none} .hcart > button{width:64px} .hcart > button::after{display:none} /* стрелка bootstrap-дропдауна не нужна */ /* У .hact иконка и подпись — прямые потомки, а корзину common.js оборачивает в #cart-total и переписывает её при каждом изменении. Убрать обёртку нельзя, поэтому повторяем раскладку .hact внутри неё, иначе блок съезжает вверх. */ .hcart #cart-total{ display:flex;flex-direction:column;align-items:center; width:100%;line-height:inherit; gap:0; /* см. ниже — зазор задаём маргином */ } /* gap здесь нельзя: бейдж .cnt хоть и position:absolute, но как потомок флекс-контейнера всё равно добавляет один зазор, и блок корзины становится на 3px выше соседних. Отступ вешаем прямо на подпись. */ .hcart #cart-total .hact__t{margin-top:3px} .hcart__drop{ left:auto;right:0;min-width:340px;padding:14px;margin-top:8px; border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-l); } .hcart__table{width:100%;margin:0 0 10px;font-size:13px} .hcart__table td{padding:8px 6px;border-top:1px solid var(--line-2);vertical-align:middle} .hcart__table tr:first-child td{border-top:0} .hcart__table img{width:44px;height:44px;object-fit:contain;border:1px solid var(--line-2);border-radius:8px} .hcart__totals{width:100%;margin:0 0 12px;font-size:13px} .hcart__totals td{padding:3px 6px} .hcart__actions{display:flex;gap:8px;justify-content:flex-end;margin:0} .hcart__empty{margin:0;padding:18px 6px;color:var(--muted);text-align:center} /* ---------- страницы, ещё не перенесённые в тему ---------- Они отрисовываются шаблонами default на Bootstrap. Глобальное правило section{padding:88px 0} из theme.css протекает в их разметку — гасим. Скоуп именно .container: перенесённые страницы бутстраповскую обёртку не используют, и их собственные
отступы сохраняют. */ .container section{padding:0} /* ---------- витрина товаров (модули featured / bestseller / latest / special) ---------- */ /* Колонка-флекс, а не обычный блок. Причина в отступах модулей ниже: в блочном потоке смежные вертикальные margin схлопываются, и 44 снизу плюс 44 сверху дали бы 44, а не 88. У флекс-элементов margin не схлопываются — арифметика становится такой же, как у padding. */ .page-home > #content{display:flex;flex-direction:column} .mod-products{padding:56px 0 0} .mod-products .sechead{margin-bottom:24px} /* .card__img в макете — div; у нас это ссылка на товар, ей нужен block */ .card__img{display:block} .card__name{display:block;color:inherit} .card__name:hover{color:var(--amber-d)} .card__foot .price small{display:inline;margin-left:6px;font-size:12px;color:var(--muted)} /* ---------- мобильная раскладка ---------- В макете кнопка корзины — третий ребёнок .hactions, и правило .hact:nth-child(1),.hact:nth-child(2){display:none} прячет «Закладки» и «Кабинет». У нас корзина обёрнута в #cart и внутри него становится первым ребёнком, попадая под то же правило. Возвращаем её. */ @media(max-width:820px){ .hcart > .hact:nth-child(1){display:flex} } /* ---------- страница категории ---------- */ /* Подкатегории. Отдельный класс: .chipset в макете занят активными фильтрами Mega Filter, смешивать их с навигацией нельзя. */ .subcats{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:22px} .subcats a{display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1px solid var(--line);border-radius:99px;font-size:13px;background:var(--surface);transition:.18s var(--ease)} .subcats a:hover{background:#fff;border-color:var(--ink)} /* Пагинацию рисует system/library/pagination.php —