/* ========================================================================== ФІЛЬТРИ КАТАЛОГУ — Filter Everything Pro під дизайн-систему Medlink Вантажиться лише на каталозі (inc/filters-wpc.php), після main.css. Не скоуплено до .catalog: мобільну шторку плагін виносить у кінець , поза розмітку сторінки. Класи wpc-* трапляються тільки у віджетах фільтрів, тож звертаємось до них напряму. Токени беремо з main.css — жодних власних кольорів. Тіні в темі вимкнені (--sh-*: none), тож і тут тільки 1px межі. ========================================================================== */ .wpc-filters-main-wrap, .wpc-filters-widget-content { font-family: var(--font); color: var(--ink); } /* Технічний рядок «знайдено N» плагін малює навіть порожнім — прибираємо, лічильник товарів у нас свій, у тулбарі. */ .wpc-posts-found { display: none !important; } /* Кнопка «редагувати набір фільтрів» видно тільки адмінам — нам не треба. */ .wpc-edit-filter-set { display: none !important; } /* -------------------------------------------------------------------------- 1. Кнопка «Фільтри» — рідна кнопка WPC у вигляді нашої .btn--ghost.btn--sm -------------------------------------------------------------------------- */ .wpc-filters-open-button-container { display: inline-flex; } a.wpc-filters-open-widget { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; /* Рівно як .select у тулбарі — інакше кнопка й сортування різної висоти. */ height: 44px; padding: 0 18px !important; border: 1px solid var(--line-input) !important; border-radius: var(--r-m) !important; background: transparent !important; color: var(--ink) !important; font-family: var(--font) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: -.008em; text-decoration: none !important; white-space: nowrap; transition: border-color .15s, background .15s; } a.wpc-filters-open-widget:hover { border-color: var(--ink) !important; } a.wpc-filters-open-widget:active { background: var(--line-2) !important; } .wpc-filters-open-widget .wpc-button-inner { display: inline-flex !important; align-items: center; gap: 10px; } /* На десктопі фільтри стоять у сайдбарі — кнопка не потрібна. Прибираємо ту копію, що плагін малює всередині самого віджета. */ .ml-filters .wpc-filters-open-button-container { display: none !important; } /* -------------------------------------------------------------------------- 2. Сайдбар: віджет видно одразу, без шторок -------------------------------------------------------------------------- */ .ml-filters { margin-bottom: 22px; } /* Розкладаємо віджет у звичайну колонку ТІЛЬКИ на десктопі. На мобільному цей самий елемент — нижня шторка плагіна: вона тримається на position:fixed + transform, і якщо перебити їх тут, шторка згортається в нуль по висоті й не відкривається взагалі (перевірено). */ @media (min-width: 761px) { .ml-filters .wpc-filters-widget-content { position: static !important; transform: none !important; visibility: visible !important; opacity: 1 !important; width: auto !important; max-height: none !important; height: auto !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; } .ml-filters .wpc-widget-close-container { display: none !important; } .ml-filters .wpc-filters-scroll-container { max-height: none !important; overflow: visible !important; } } /* -------------------------------------------------------------------------- 3. Секція фільтра — як старий .f-block: розділювач знизу, без фону -------------------------------------------------------------------------- */ .wpc-filters-section { background: none !important; border: 0 !important; border-bottom: 1px solid var(--line-2) !important; border-radius: 0 !important; margin: 0 !important; /* Було 16px — ряди чекбоксів стояли надто розріджено. */ padding: 0 0 12px !important; } .wpc-filters-section:last-child { border-bottom: 0 !important; } .wpc-filter-header { margin: 0 !important; } .wpc-filter-title, .wpc-filter-title.widget-title { font-family: var(--font) !important; font-size: 14.5px !important; font-weight: 500 !important; line-height: 1.3; color: var(--ink) !important; text-transform: none !important; letter-spacing: -.008em; margin: 0 !important; padding: 16px 0 12px !important; background: none !important; border: 0 !important; } .wpc-filter-content { margin: 0 !important; padding: 0 !important; } /* -------------------------------------------------------------------------- 4. Список значень і чекбокси — повторюємо .check із main.css -------------------------------------------------------------------------- */ ul.wpc-filters-ul-list, .wpc-filter-content ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 0; } li.wpc-term-item { margin: 0 !important; padding: 0 !important; } .wpc-term-item-content-wrapper, li.wpc-term-item label { display: flex !important; align-items: center; gap: 11px; cursor: pointer; font-family: var(--font) !important; font-size: 14.5px !important; font-weight: 400 !important; line-height: 1.3 !important; color: var(--ink) !important; /* Було 38px. Тап-ціль лишається комфортною, а список став компактнішим: на мобільному висоту повертаємо в медіазапиті нижче. */ min-height: 32px; margin: 0 !important; } li.wpc-term-item a { color: var(--ink) !important; text-decoration: none !important; } li.wpc-term-item:hover .wpc-term-item-content-wrapper { color: var(--ink) !important; } /* Квадрат 20×20 з помаранчевою заливкою — рівно як .check .box у темі. */ li.wpc-term-item input[type="checkbox"], li.wpc-term-item input[type="radio"] { appearance: none !important; -webkit-appearance: none !important; width: 20px !important; height: 20px !important; min-width: 20px !important; flex: 0 0 20px; margin: 0 !important; padding: 0 !important; border: 1.5px solid var(--line-input) !important; border-radius: var(--r-xs) !important; background: var(--white) !important; cursor: pointer; position: relative; transition: border-color .15s, background .15s; } li.wpc-term-item input[type="radio"] { border-radius: 50% !important; } li.wpc-term-item:hover input[type="checkbox"], li.wpc-term-item:hover input[type="radio"] { border-color: var(--ink) !important; } li.wpc-term-item input[type="checkbox"]:checked { background-color: var(--orange) !important; border-color: var(--orange) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7L6 10L11 4' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 13px 13px !important; } li.wpc-term-item input[type="radio"]:checked { background-color: var(--orange) !important; border-color: var(--orange) !important; box-shadow: inset 0 0 0 3.5px var(--white) !important; } li.wpc-term-item input:focus-visible { outline: 2px solid var(--ink) !important; outline-offset: 3px; } /* Лічильник товарів праворуч — як .check .n */ .wpc-term-count, .wpc-term-count-value { color: var(--muted) !important; font-size: 13px !important; font-weight: 400 !important; margin-left: auto !important; } /* Прокрутка довгих списків — як .f-list */ .wpc-filter-layout-checkboxes .wpc-filter-content > ul { max-height: 264px; overflow: auto; padding-right: 4px; scrollbar-width: thin; } .wpc-filter-content > ul::-webkit-scrollbar { width: 6px; } .wpc-filter-content > ul::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; } /* -------------------------------------------------------------------------- 5. «Показати більше / менше» Тільки вигляд: видимістю керує сам плагін класами стану, тож display не чіпаємо. -------------------------------------------------------------------------- */ .wpc-filter-more-less .wpc-toggle-a, .wpc-see-more-control, .wpc-see-less-control { font-family: var(--font) !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--muted) !important; text-decoration: underline !important; text-underline-offset: 3px; background: none !important; border: 0 !important; padding: 0 !important; margin: 8px 0 0 !important; cursor: pointer; transition: color .15s; } .wpc-filter-more-less .wpc-toggle-a:hover, .wpc-see-more-control:hover, .wpc-see-less-control:hover { color: var(--ink) !important; } /* -------------------------------------------------------------------------- 6. Пошук усередині фільтра (виробник, речовина, кому можна) -------------------------------------------------------------------------- */ .wpc-filter-search-wrapper { position: relative; margin: 0 0 10px; } input.wpc-filter-search-field { width: 100% !important; height: 40px !important; /* Ліворуч місце під лупу (плагін ставить її absolute на left:12px), праворуч — під хрестик очищення. Без цього лупа лягала просто на плейсхолдер. */ padding: 0 36px 0 40px !important; font-family: var(--font) !important; font-size: 14px !important; color: var(--ink) !important; background: var(--white) !important; border: 1px solid var(--line-input) !important; border-radius: var(--r-s) !important; box-shadow: none !important; } input.wpc-filter-search-field:focus { border-color: var(--ink) !important; outline: none !important; } .wpc-filter-search-wrapper .wpc-search-icon { display: flex !important; align-items: center; justify-content: center; width: 20px !important; height: 40px !important; color: var(--muted) !important; pointer-events: none; } .wpc-filter-search-wrapper .wpc-search-clear { width: 34px; height: 40px; display: inline-flex !important; align-items: center; justify-content: center; background: none !important; border: 0 !important; color: var(--muted) !important; cursor: pointer; } .wpc-filter-search-wrapper .wpc-search-clear:hover { color: var(--ink) !important; } /* -------------------------------------------------------------------------- 7. Ціна: два поля і повзунок -------------------------------------------------------------------------- */ .wpc-filters-range-wrapper { display: flex !important; align-items: center; gap: 10px; } .wpc-filters-range-column { position: relative; flex: 1 1 0; min-width: 0; } input.wpc-filters-range-min, input.wpc-filters-range-max { width: 100% !important; height: 44px !important; padding: 0 12px !important; font-family: var(--font) !important; font-size: 14.5px !important; color: var(--ink) !important; background: var(--white) !important; border: 1px solid var(--line-input) !important; border-radius: var(--r-s) !important; box-shadow: none !important; -moz-appearance: textfield; } input.wpc-filters-range-min::-webkit-outer-spin-button, input.wpc-filters-range-min::-webkit-inner-spin-button, input.wpc-filters-range-max::-webkit-outer-spin-button, input.wpc-filters-range-max::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input.wpc-filters-range-min:focus, input.wpc-filters-range-max:focus { border-color: var(--ink) !important; outline: none !important; } .wpc-range-clear { color: var(--muted) !important; background: none !important; border: 0 !important; } .wpc-filters-range-slider-wrapper { margin: 18px 4px 4px; } .wpc-filters-range-slider-control.ui-slider, .wpc-filters-range-slider-control { height: 3px !important; background: var(--line) !important; border: 0 !important; border-radius: 2px !important; } .wpc-filters-range-slider-control .ui-slider-range { background: var(--orange) !important; border-radius: 2px !important; } .wpc-filters-range-slider-control .ui-slider-handle { width: 18px !important; height: 18px !important; top: -8px !important; margin-left: -9px !important; background: var(--white) !important; border: 2px solid var(--orange) !important; border-radius: 50% !important; cursor: grab; } .wpc-filters-range-slider-control .ui-slider-handle:focus { outline: none; border-color: var(--ink) !important; } /* -------------------------------------------------------------------------- 8. Чіпси обраних фільтрів -------------------------------------------------------------------------- */ .wpc-filters-widget-top-container { margin: 0 0 4px; padding: 0; } ul.wpc-filter-chips-list { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none !important; margin: 0 0 10px !important; padding: 0 !important; } ul.wpc-filter-chips-list.wpc-empty-chips-container { display: none !important; margin: 0 !important; } .wpc-filter-chip { margin: 0 !important; padding: 0 !important; list-style: none !important; } .wpc-filter-chip > a { display: inline-flex !important; align-items: center; gap: 7px; height: 34px; padding: 0 12px !important; font-family: var(--font) !important; font-size: 13.5px !important; font-weight: 500 !important; line-height: 1; color: var(--ink) !important; text-decoration: none !important; background: var(--white) !important; border: 1px solid var(--line) !important; border-radius: var(--r-pill) !important; transition: border-color .15s, background .15s, color .15s; } .wpc-filter-chip > a:hover { border-color: var(--ink) !important; } .wpc-filter-chip .wpc-chip-remove-icon { color: var(--muted); font-size: 15px; line-height: 1; } .wpc-filter-chip > a:hover .wpc-chip-remove-icon { color: var(--ink); } /* «Скинути все» — помаранчевий, це дія */ .wpc-filter-chip.wpc-chip-reset-all > a { background: var(--orange) !important; border-color: var(--orange) !important; color: #fff !important; } .wpc-filter-chip.wpc-chip-reset-all > a:hover { background: var(--orange-soft) !important; border-color: var(--orange-soft) !important; } .wpc-filter-chip.wpc-chip-reset-all .wpc-chip-remove-icon { color: #fff; } /* -------------------------------------------------------------------------- 9. Мобільна шторка плагіна -------------------------------------------------------------------------- */ .wpc-filters-overlay { background: rgba(27, 26, 23, .45) !important; } body.wpc_show_bottom_widget .wpc-filters-widget-content, .wpc-bottom-widget .wpc-filters-widget-content { background: var(--cream) !important; border-radius: var(--r-xl) var(--r-xl) 0 0 !important; border: 0 !important; box-shadow: none !important; } .wpc-widget-close-container { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px !important; border-bottom: 1px solid var(--line-2); } .wpc-widget-popup-title { order: -1; font-family: var(--font) !important; font-size: 16px !important; font-weight: 600 !important; color: var(--ink) !important; text-transform: none !important; letter-spacing: -.01em; } .wpc-widget-close-icon { width: 36px; height: 36px; display: inline-flex !important; align-items: center; justify-content: center; border-radius: var(--r-s); cursor: pointer; } .wpc-widget-close-icon:hover { background: var(--line-2); } .wpc-widget-close-icon .wpc-icon-html-wrapper { position: relative; width: 18px; height: 18px; display: block; } .wpc-widget-close-icon .wpc-icon-line-1, .wpc-widget-close-icon .wpc-icon-line-2 { position: absolute; top: 50%; left: 0; width: 18px; height: 1.8px; background: var(--ink); border-radius: 2px; } .wpc-widget-close-icon .wpc-icon-line-1 { transform: translateY(-50%) rotate(45deg); } .wpc-widget-close-icon .wpc-icon-line-2 { transform: translateY(-50%) rotate(-45deg); } .wpc-widget-close-icon .wpc-icon-line-3 { display: none; } .wpc-filters-scroll-container { padding: 0 18px; } /* Нижні кнопки шторки: «Показати» помаранчева, «Скинути» — текстова */ .wpc-filters-widget-controls, .wpc-filters-widget-bottom-container { display: flex !important; align-items: center; gap: 12px; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)) !important; background: var(--cream) !important; border-top: 1px solid var(--line-2); } .wpc-filters-apply-button, .wpc-filters-widget-controls-one a { flex: 1 1 auto; display: inline-flex !important; align-items: center; justify-content: center; height: 50px; padding: 0 24px !important; background: var(--orange) !important; color: #fff !important; border: 0 !important; border-radius: var(--r-m) !important; font-family: var(--font) !important; font-size: 15.5px !important; font-weight: 500 !important; letter-spacing: -.008em; text-decoration: none !important; } .wpc-filters-apply-button:hover, .wpc-filters-widget-controls-one a:hover { background: var(--orange-soft) !important; } .wpc-filters-close-button, .wpc-filters-widget-controls-two a { flex: 0 0 auto; font-family: var(--font) !important; font-size: 14px !important; font-weight: 500 !important; color: var(--muted) !important; text-decoration: underline !important; text-underline-offset: 3px; } .wpc-filters-close-button:hover, .wpc-filters-widget-controls-two a:hover { color: var(--ink) !important; } /* Спінер під час AJAX — у брендовому помаранчевому */ .wpc-spinner > div, .wpc-filters-loader { background: var(--orange) !important; } /* -------------------------------------------------------------------------- 10. Тулбар і сайдбар на вузьких екранах -------------------------------------------------------------------------- */ @media (max-width: 760px) { /* На телефоні ряди лишаються повноцінними тап-цілями — 44px за гайдлайном, компактність потрібна лише десктопному сайдбару. */ .wpc-term-item-content-wrapper, li.wpc-term-item label { min-height: 44px; } /* .ml-filters не ховаємо: всередині нього живе шторка плагіна. Сам блок у потоці порожній — вміст винесено у fixed-шторку, тож місця не займає. */ .ml-filters { margin: 0; } .wpc-filters-scroll-container { max-height: 62vh; overflow-y: auto; } a.wpc-filters-open-widget { height: 44px; width: 100%; } } /* -------------------------------------------------------------------------- 11. Доведення після перевірки в браузері -------------------------------------------------------------------------- */ /* Лічильник значень: плагін малює «( 19 )» окремими спанами під дужки. У темі лічильник іде без дужок (.check .n) — прибираємо їх, а не весь блок, бо саме число корисне. */ .wpc-term-count-brackets-open, .wpc-term-count-brackets-close { display: none !important; } .wpc-term-count { margin-left: auto !important; color: var(--muted) !important; font-size: 13px !important; } /* Шапка шторки: назва ліворуч, хрестик праворуч. Плагін кладе іконку першою в DOM, тож розкладаємо явно, а не покладаємось на порядок. */ .wpc-widget-close-container { justify-content: flex-start !important; position: relative; } .wpc-widget-popup-title { order: -1; margin-right: auto; } .wpc-widget-close-icon { order: 1; flex: 0 0 36px; } /* Тіло шторки прозоре — крізь нього видно кремовий фон самої шторки. */ .wpc-filters-widget-content .wpc-filters-scroll-container, .wpc-filters-widget-content .wpc-filters-widget-wrapper, .wpc-filters-widget-containers-wrapper { background: transparent !important; } /* На десктопі сайдбар стоїть на кремовому фоні сторінки — прибираємо білу підкладку, яку плагін дає контенту. */ @media (min-width: 761px) { .ml-filters .wpc-filters-scroll-container, .ml-filters .wpc-filters-widget-wrapper { background: transparent !important; } } /* Заголовок шторки плагін робить absolute на всю ширину — через це хрестик опинявся під назвою. Повертаємо в потік: назва ліворуч, хрестик праворуч, як у решти модалок теми. */ .wpc-widget-popup-title { position: static !important; width: auto !important; text-align: left !important; } /* -------------------------------------------------------------------------- 12. Іконки малюємо свої Плагін анімує ті самі три спани то в смужки, то в хрестик, ще й домальовує до них кружечки через ::after. Підганяти цей набір станів під себе — гра в наздоганялки: у тулбарі іконка показувала хрестик, у шторці — одну діагональ. Тому ховаємо розмітку плагіна і малюємо потрібне самі. -------------------------------------------------------------------------- */ .wpc-filters-open-widget .wpc-icon-html-wrapper, .wpc-widget-close-icon .wpc-icon-html-wrapper, .wpc-filters-apply-button .wpc-icon-html-wrapper { display: none !important; } /* Кнопка «Фільтри» — три смужки, що звужуються (знак #i-filter у спрайті теми) */ .wpc-filters-open-widget .wpc-button-inner::before { content: ''; flex: 0 0 16px; width: 16px; height: 12px; background: linear-gradient(currentColor, currentColor) 0 0 / 16px 1.6px no-repeat, linear-gradient(currentColor, currentColor) 0 5px / 11px 1.6px no-repeat, linear-gradient(currentColor, currentColor) 0 10px / 7px 1.6px no-repeat; } /* Хрестик шторки — дві риски, як у .fsheet-close теми */ .wpc-widget-close-icon { position: relative; width: 36px !important; height: 36px !important; } .wpc-widget-close-icon::before, .wpc-widget-close-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 17px; height: 1.8px; border-radius: 2px; background: var(--ink); } .wpc-widget-close-icon::before { transform: translate(-50%, -50%) rotate(45deg); } .wpc-widget-close-icon::after { transform: translate(-50%, -50%) rotate(-45deg); } /* -------------------------------------------------------------------------- 13. Смуга чіпсів у шторці Плагін дає їй білу підкладку на всю ширину і не дозволяє переносити рядки — при двох-трьох фільтрах чіпси виїжджали за край. -------------------------------------------------------------------------- */ .wpc-filters-widget-top-container, .wpc-widget-top-inside, .wpc-inner-widget-chips-wrapper { background: transparent !important; border: 0 !important; width: auto !important; max-width: 100% !important; overflow: visible !important; } .wpc-filters-widget-content ul.wpc-filter-chips-list { flex-wrap: wrap !important; overflow: visible !important; max-width: 100%; } /* -------------------------------------------------------------------------- 14. Чіпси обраних фільтрів у тулбарі (перенос — assets/js/filters.js) -------------------------------------------------------------------------- */ .toolbar__chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; } .toolbar__chips:empty { display: none; } /* Страховка на випадок, коли порожній список усе ж опинився в контейнері (плагін перемальовує чіпси на місці): :empty тоді не спрацює, а ряд flex контейнер уже займе. Див. коментар у assets/js/filters.js. */ .toolbar__chips:has(> .wpc-empty-chips-container) { display: none; } .toolbar__chips ul.wpc-filter-chips-list { margin: 0 !important; } @media (min-width: 761px) { /* У сайдбарі чіпсів більше немає — вони переїхали в тулбар. Ховаємо порожній контейнер, щоб не давав відступу над «Ціна, ₴». */ .ml-filters .wpc-filters-widget-top-container { display: none !important; } /* Чіпси — окремим рядком під лічильником і сортуванням. У рядок із ними вони лізли одне на одного, щойно фільтрів ставало більше двох, і перекидали сортування на другий рядок. */ .toolbar { flex-wrap: wrap; row-gap: 12px; } .toolbar__count { order: 1; } .toolbar .spacer { order: 2; } .toolbar__tools { order: 3; } .toolbar__chips { order: 4; flex: 1 1 100%; margin: 0; } } @media (max-width: 760px) { /* На мобільному чіпси лишаються у шторці — тулбарний контейнер порожній. */ .toolbar__chips { display: none !important; } } /* -------------------------------------------------------------------------- 15. Один край для всього вмісту шторки Плагін роздає горизонтальні відступи на трьох рівнях одночасно: 18px у шапки, 20px у обгортки секцій і ще 20px у обгортки чіпсів — тобто чіпси відступали на 38px, а секції на 20px, і колонка «пливла». Задаємо єдиний відступ і обнуляємо вкладені. Плюс прибираємо смужку, яку плагін малює через .wpc-filters-widget-top-container::before: під межею шапки виходили дві лінії поспіль, і це читалось як тінь. -------------------------------------------------------------------------- */ .wpc-filters-widget-top-container::before { display: none !important; } .wpc-filters-widget-content .wpc-filters-widget-top-container { margin: 0 !important; padding: 18px var(--ml-filters-gutter, 18px) 0 !important; } .wpc-filters-widget-content .wpc-inner-widget-chips-wrapper, .wpc-filters-widget-content .wpc-widget-top-inside { padding: 0 !important; margin: 0 !important; } .wpc-filters-widget-content ul.wpc-filter-chips-list { margin: 0 !important; } .wpc-filters-widget-content .wpc-filters-widget-wrapper { padding: 4px var(--ml-filters-gutter, 18px) 16px !important; } .wpc-filters-widget-content .wpc-filters-scroll-container { padding: 0 !important; } /* Між чіпсами і першою секцією — повітря, інакше «Ціна, ₴» липне до чіпсів. */ .wpc-filters-widget-wrapper > .wpc-filters-section:first-child > .wpc-filter-header .wpc-filter-title { padding-top: 14px !important; } /* У сайдбарі колонка вже має свої відступи — плагінові тут зайві. */ @media (min-width: 761px) { .ml-filters .wpc-filters-widget-wrapper { padding: 0 !important; } .ml-filters .wpc-filters-widget-top-container { display: none !important; } }