/* ============================================================================ ВИТРИНА КАТЕГОРИИ /product-category/… — переодеваем живую вёрстку Woodmart в вид макета (карточка .pc, фильтр .fbox, блок ссылок .sbox из maket_glavnaya.html + kit/b2btara_kit/assets/css/styles.css). Разметка не меняется, форм не добавляется, корзина не возвращается. Область действия — только body.tax-product_cat. Класс снят с живой страницы: . Шапка и подвал не задеты: их блоки .bt-root (bt-price-head, bt-foot-cols) лежат вне .site-content / .sidebar-container / .products. ПОРЯДОК ПОДКЛЮЧЕНИЯ (снято из живого html): 46 plugins/woocommerce-products-filter/css/front.css 63 themes/woodmart-child/bt/assets/css/vnedrenie.css ← наш файл 66+ themes/woodmart-new/css/parts (в т.ч. base.min.css со сбросом) 6711 plugins/woocommerce-products-filter/ext/sections/css/sections.css Наш файл идёт РАНЬШЕ темы и раньше sections.css, поэтому селекторы намеренно длиннее чужих — берём специфичностью. !important оставлен только там, где он реально стоит у чужого файла (проверено grep-ом): bootstrap-light: .align-items-start{align-items:flex-start!important} woof front.css: .woof_checkbox_label{margin-left:7px!important} woof front.css: .woof_price_filter_txt{width:75px!important} ⚠ ФАКТ, важный для чтения комментариев ниже: файла theme.css со стилями .blok_filtr (серый фон #f1f1f1, рамка #bebebe), .woof_price_filter_txt_slider input{border:#83B735;width:47%!important}, картинки height:250px и .product-grid-item:hover{margin-bottom:80px} на этой странице НЕТ. Скачаны и проверены все 67 стилей страницы — ни в одном нет ни .blok_filtr, ни #83B735, ни margin-bottom:80px. Правила «против theme.css» из черновика убраны. ========================================================================== */ /* Токены дизайн-системы Б2БТАРА на весь экран категории. Имена свои (--bt-*), чтобы не пересечься ни с переменными темы (--wd-… и --color-…), ни с --red / --ink комплекта внутри .bt-root в шапке и подвале. */ body.home, body.tax-product_cat { --bt-red: #CF000D; --bt-red-dark: #A80009; --bt-red-050: #FBEAEA; --bt-ink: #16181D; --bt-body: #3C424B; --bt-muted: #6B7480; --bt-line: #E4E4E7; --bt-line-hover: #CDD4DD; --bt-base: #FAFAF9; --bt-link: #33465C; --bt-radius: 10px; --bt-radius-lg: 14px; --bt-onest: 'Onest', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --bt-golos: 'Golos', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; } /* Светлый фон страницы (ground #FAFAF9 из макета), на котором белые карточки и белый фильтр читаются как отдельные плашки. Единственное правило во всём файле, которое выходит за область контента — если шапка или подвал начнут выглядеть иначе, убирать надо именно его. */ body.home, body.tax-product_cat { background-color: var(--bt-base); } /* ===================== ШАПКА ВИТРИНЫ ===================================== */ /* H1 категории — Onest 800 графитом, как .ch h1 в макете (29px). Живая разметка: .site-content.shop-content-area > .term-description.pr-flex > h1 */ body.home .site-content .term-description h1, body.tax-product_cat .site-content .term-description h1 { font-family: var(--bt-onest); font-weight: 800; font-size: 29px; line-height: 1.2; letter-spacing: -.02em; color: var(--bt-ink); } /* Хлебные крошки — 13px приглушённым, как .crumbs в макете */ body.home .shop-loop-head .wd-breadcrumbs nav.woocommerce-breadcrumb, body.tax-product_cat .shop-loop-head .wd-breadcrumbs nav.woocommerce-breadcrumb { font-family: var(--bt-golos); font-size: 13px; line-height: 1.4; color: var(--bt-muted); } body.home .shop-loop-head .wd-breadcrumbs nav.woocommerce-breadcrumb a.breadcrumb-link, body.tax-product_cat .shop-loop-head .wd-breadcrumbs nav.woocommerce-breadcrumb a.breadcrumb-link { color: var(--bt-muted); text-decoration: none; } /* В макете у крошек нет подчёркивания — на наведении меняем только цвет */ body.home .shop-loop-head .wd-breadcrumbs nav.woocommerce-breadcrumb a.breadcrumb-link:hover, body.tax-product_cat .shop-loop-head .wd-breadcrumbs nav.woocommerce-breadcrumb a.breadcrumb-link:hover { color: var(--bt-red); } body.home .shop-loop-head .wd-breadcrumbs nav.woocommerce-breadcrumb .breadcrumb-last, body.tax-product_cat .shop-loop-head .wd-breadcrumbs nav.woocommerce-breadcrumb .breadcrumb-last { color: var(--bt-body); } /* «Показаны все (19)» — подпись под заголовком, как .ch .cnt в макете */ body.home .shop-loop-head p.woocommerce-result-count, body.tax-product_cat .shop-loop-head p.woocommerce-result-count { margin: 6px 0 0; font-family: var(--bt-golos); font-size: 14px; color: var(--bt-muted); } /* Панель инструментов витрины (сортировка, «Показать по», вид сетки) — приглушаем, чтобы она не спорила с заголовком */ body.home .shop-loop-head .wd-shop-tools .wd-products-per-page, body.tax-product_cat .shop-loop-head .wd-shop-tools .wd-products-per-page, body.home .shop-loop-head .wd-shop-tools .wd-products-shop-view, body.tax-product_cat .shop-loop-head .wd-shop-tools .wd-products-shop-view, body.home .shop-loop-head .wd-shop-tools .woocommerce-ordering, body.tax-product_cat .shop-loop-head .wd-shop-tools .woocommerce-ordering { font-family: var(--bt-golos); font-size: 13px; color: var(--bt-muted); } /* Активное значение «Показать по» и наведение на переключатель сетки — красным */ body.home .shop-loop-head .wd-products-per-page a.per-page-variation.current-variation, body.tax-product_cat .shop-loop-head .wd-products-per-page a.per-page-variation.current-variation, body.home .shop-loop-head .wd-products-shop-view a.shop-view:hover, body.tax-product_cat .shop-loop-head .wd-products-shop-view a.shop-view:hover { color: var(--bt-red); } body.home .shop-loop-head .woocommerce-ordering select.orderby, body.tax-product_cat .shop-loop-head .woocommerce-ordering select.orderby { font-family: var(--bt-golos); font-size: 13.5px; color: var(--bt-ink); } /* Кнопка «Показать фильтры» — контурная кнопка .btn.btn-line из комплекта. Тема показывает её только до 1024px (opt-off-canvas-sidebar.min.css, @media max-width:768.98px и 769–1024px), сама видимость не трогается: красим ссылку внутри, а display:none у контейнера остаётся темовый. */ body.home .wd-show-sidebar-btn > a, body.tax-product_cat .wd-show-sidebar-btn > a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--bt-radius); box-shadow: inset 0 0 0 1.5px var(--bt-line); background: #fff; font-family: var(--bt-onest); font-weight: 700; font-size: 14px; color: var(--bt-ink); text-decoration: none; } body.home .wd-show-sidebar-btn > a:hover, body.tax-product_cat .wd-show-sidebar-btn > a:hover { box-shadow: inset 0 0 0 1.5px var(--bt-ink); } /* ===================== ЛЕВАЯ КОЛОНКА: ФИЛЬТР ПОД .fbox ==================== */ /* Коробка фильтра: белая плашка, тонкая рамка, скругление 14px, без тени — ровно как .fbox в макете */ body.home .sidebar-container .blok_filtr, body.tax-product_cat .sidebar-container .blok_filtr { background: #fff; border: 1px solid var(--bt-line); border-radius: var(--bt-radius-lg); overflow: hidden; } /* Секция фильтра = .fsec макета: поля 14px 18px и линия-разделитель сверху. Перебиваем woof front.css (.woof_container{padding-bottom:5px;margin-bottom:9px}) */ body.home .sidebar-container .blok_filtr .woof_container, body.tax-product_cat .sidebar-container .blok_filtr .woof_container { padding: 14px 18px; margin-bottom: 0; border-top: 1px solid var(--bt-line); } /* Первая секция (Цена) упирается в край плашки — верхней линии не нужно */ body.home .sidebar-container .blok_filtr .woof_container.woof_price_filter, body.tax-product_cat .sidebar-container .blok_filtr .woof_container.woof_price_filter { border-top: 0; } /* Заголовок секции — капслок Onest приглушённым, как .fsec .fl в макете. Отступ снизу отдан самому содержимому (см. ниже): списки значений плагин сворачивает через JS (класс .woof_closed_block), и margin у h4 оставлял бы в свёрнутой секции пустые 10px. */ body.home .sidebar-container .blok_filtr h4, body.tax-product_cat .sidebar-container .blok_filtr h4 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 0; font-family: var(--bt-onest); font-weight: 600; font-size: 10.5px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--bt-muted); } /* Отступ от подписи к содержимому секции — на самом содержимом */ body.home .sidebar-container .blok_filtr .woof_block_html_items, body.tax-product_cat .sidebar-container .blok_filtr .woof_block_html_items, body.home .sidebar-container .blok_filtr .woof_price_filter_txt_slider, body.tax-product_cat .sidebar-container .blok_filtr .woof_price_filter_txt_slider { margin-top: 10px; } /* Плюсик разворота секции — аккуратная квадратная кнопка. woof front.css задаёт a.woof_front_toggle{float:right} — снимаем float, раскладку делает flex у h4 */ body.home .sidebar-container .blok_filtr h4 a.woof_front_toggle, body.tax-product_cat .sidebar-container .blok_filtr h4 a.woof_front_toggle { float: none; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--bt-line); border-radius: 6px; font-family: var(--bt-onest); font-size: 14px; line-height: 1; color: var(--bt-muted); text-decoration: none; transition: border-color .15s ease, color .15s ease; } body.home .sidebar-container .blok_filtr h4 a.woof_front_toggle:hover, body.tax-product_cat .sidebar-container .blok_filtr h4 a.woof_front_toggle:hover { border-color: var(--bt-red); color: var(--bt-red); } /* Список значений — горизонтальная россыпь «чипсов», как .fchips в макете. margin и list-style плагин уже ставит с !important (ul.woof_list{margin:0 !important;list-style:none !important}) — свои копии не дублируем. */ body.home .sidebar-container .blok_filtr ul.woof_list, body.tax-product_cat .sidebar-container .blok_filtr ul.woof_list { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; } /* woof front.css: ul.woof_list li{margin:0 3px 4px 3px} — снимаем, шаг даёт gap */ body.home .sidebar-container .blok_filtr ul.woof_list li, body.tax-product_cat .sidebar-container .blok_filtr ul.woof_list li { margin: 0; padding: 0; line-height: 1; } /* Родную галочку убираем с глаз, но НЕ через display:none — так чекбокс остаётся доступен с клавиатуры, а клик по