/* HARD — сторінка категорії (правки клієнта 09.10 і 12.10, макет — сторінка категорії MODIVO): фільтри рядком над товарами,
   панель фільтра справа, дерево категорій у лівій колонці, заголовок без сірої смуги.
   Джерело: clients/hardbrand.com.ua/site/wp/mu-plugins/hb-category/category.css */

/* ---------- Заголовок каталогу й категорії: без сірої смуги, зліва, по ширині блоку контенту ----------
   Клієнт двічі просив зробити блок назви меншим (08.10 і 09.10). Сторінки «Оплата та доставка», «Обмін та повернення»,
   «Контакти» лишаються з великим заголовком по центру (hb-layout/layout.css). */
body.tax-product_cat .hero-section[data-type="type-2"], body.post-type-archive-product .hero-section[data-type="type-2"] { --min-height: 0px; --container-padding: 20px 0 0; --alignment: left; background: none; }
body.tax-product_cat .hero-section[data-type="type-2"] > .entry-header, body.post-type-archive-product .hero-section[data-type="type-2"] > .entry-header { max-width: var(--theme-normal-container-max-width); }
body.tax-product_cat .hero-section[data-type="type-2"] .page-title, body.post-type-archive-product .hero-section[data-type="type-2"] .page-title { margin-top: 8px; font-size: 32px; line-height: 1.1; }
body.tax-product_cat .site-main > [data-vertical-spacing*="top"], body.post-type-archive-product .site-main > [data-vertical-spacing*="top"] { padding-top: 22px; }
@media (max-width: 689.98px) {
	body.tax-product_cat .hero-section[data-type="type-2"], body.post-type-archive-product .hero-section[data-type="type-2"] { --container-padding: 14px 0 0; }
	body.tax-product_cat .hero-section[data-type="type-2"] .page-title, body.post-type-archive-product .hero-section[data-type="type-2"] .page-title { font-size: 24px; }
}

/* ---------- Ліва колонка: дерево категорій ---------- */
/* Віджет фільтрів живе в панелі .hb-fdrawer (переносить category.js); у колонці його не показуємо */
body.hb-listing #sidebar .widget_wpc_filters_widget { display: none; }
@media (min-width: 1000px) {
	.woocommerce-page [data-sidebar] { --sidebar-width: 19%; --sidebar-width-no-unit: 19; --sidebar-gap: 3%; }
	/* Колонка липне під шапкою; --header-sticky-height ставить тема, коли шапка закріплена */
	body.hb-listing #sidebar .ct-sidebar { position: sticky; top: calc(var(--header-sticky-height, 0px) + 24px); }
}
.hb-ctree { padding-top: 14px; } /* перший заголовок — на рівні рядка фільтрів */
.hb-ctree__group + .hb-ctree__group { margin-top: 26px; }
.hb-ctree__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.hb-ctree__head a { font: 500 18px Oswald, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--hb-black, #111); text-decoration: none; }
.hb-ctree__head button { flex: none; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.hb-ctree__head button::before { content: ""; display: block; width: 8px; height: 8px; margin: 0 auto; border-right: 1.5px solid var(--hb-black, #111); border-bottom: 1.5px solid var(--hb-black, #111); transform: translateY(2px) rotate(-135deg); transition: transform .2s; }
.hb-ctree__group:not(.is-open) .hb-ctree__head button::before { transform: translateY(-2px) rotate(45deg); }
.hb-ctree__group:not(.is-open) ul { display: none; }
.hb-ctree ul { margin: 0; padding: 0; list-style: none; }
.hb-ctree li { margin: 0; }
.hb-ctree li a { display: block; padding: 7px 0; font-size: 15px; line-height: 1.3; color: #333; text-decoration: none; }
.hb-ctree a:hover { color: var(--hb-black, #111); text-decoration: underline; text-underline-offset: 4px; }
.hb-ctree a.is-current { color: var(--hb-black, #111); font-weight: 600; }
.hb-ctree__head a.is-current { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* ---------- Рядок над товарами: сортування, кнопки фільтрів, «Всі фільтри»; липне під шапкою ---------- */
/* box-shadow догори: тема рахує висоту закріпленої шапки за своїм налаштуванням (100 px), а шапка з 09.10 нижча (90 px) —
   біла смуга закриває щілину, в якій інакше було б видно товари */
body.hb-listing .woo-listing-top { position: sticky; top: var(--header-sticky-height, 0px); z-index: 5; display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 8px; margin: 0; padding: 12px 0; background: #fff; box-shadow: 0 -14px 0 #fff; }
body.hb-listing .woo-listing-top form.woocommerce-ordering { order: -1; flex: none; margin: 0; }
@media (min-width: 1000px) {
	/* ширина списку сортування обмежена, щоб кнопки фільтрів і «Всі фільтри» вміщались в один ряд на екрані 1366 px */
	body.hb-listing .woo-listing-top form.woocommerce-ordering select { width: 236px; height: 44px; border-color: #d0d0d0; border-radius: 0; color: var(--hb-black, #111); font-size: 14px; text-overflow: ellipsis; }
}
/* Сортування — власний список (category.js): системний <select> і значок теми сховані, поки працює скрипт */
form.woocommerce-ordering.has-hb-sort { position: relative; }
form.woocommerce-ordering.has-hb-sort select.orderby, form.woocommerce-ordering.has-hb-sort .ct-sort-icon { display: none !important; }
.hb-sort { position: relative; }
.hb-sort__btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 236px; height: 44px; padding: 0 14px; border: 1px solid #d0d0d0; border-radius: 0; background: #fff; color: var(--hb-black, #111); font: 400 14px Onest, sans-serif; text-align: left; cursor: pointer; transition: border-color .15s; }
.hb-sort__btn:hover, .hb-sort__btn[aria-expanded="true"] { border-color: var(--hb-black, #111); }
.hb-sort__btn span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hb-sort__btn::after { content: ""; flex: none; width: 7px; height: 7px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.hb-sort__btn[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); }
.hb-sort__list { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 100%; margin: 0; padding: 6px 0; list-style: none; border: 1px solid var(--hb-black, #111); background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
.hb-sort__list[hidden] { display: none; }
.hb-sort__list li { margin: 0; padding: 10px 16px; color: var(--hb-black, #111); font: 400 14px/1.3 Onest, sans-serif; white-space: nowrap; cursor: pointer; }
.hb-sort__list li:hover, .hb-sort__list li:focus-visible { background: #f2f2f2; outline: 0; }
.hb-sort__list li[aria-selected="true"] { background: var(--hb-black, #111); color: #fff; }
.hb-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.hb-fbar[hidden] { display: none; }
/* Сервер друкує кнопки всіх фільтрів набору, category.js лишає тільки ті, що є на сторінці. Доки скрипт не відпрацював,
   рядок тримаємо в одну лінію: інакше зайві кнопки переносяться на другий ряд, а потім список товарів стрибає вгору
   (замір 14.10: зсув макета 0,11–0,16 на сторінці категорії). */
.hb-fbar:not(.is-ready) { flex-wrap: nowrap; overflow: hidden; }
.hb-fbar:not(.is-ready) > * { visibility: hidden; }
.hb-fbar__chip, .hb-fbar__all { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 1px solid #d0d0d0; border-radius: 0; background: #fff; color: var(--hb-black, #111); font: 500 13px Oswald, sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: border-color .15s; }
.hb-fbar__chip:hover, .hb-fbar__all:hover, .hb-fbar__chip.is-active { border-color: var(--hb-black, #111); }
.hb-fbar__all { border-color: transparent; padding: 0 10px; }
.hb-fbar__chip b, .hb-fbar__all b { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--hb-black, #111); color: #fff; font: 500 11px/1 Oswald, sans-serif; letter-spacing: 0; }
.hb-fbar__narrow { display: none; }
/* Під рядком: лічильник і вибрані фільтри (мітки плагіна category.js переносить сюди з-над рядка) */
.hb-fmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 4px 0 18px; }
.hb-fcount { margin: 0; font-size: 14px; color: #555; }
.hb-fcount b { color: var(--hb-black, #111); font-weight: 600; }
.hb-fmeta .wpc-custom-selected-terms { margin: 0; }
.hb-fmeta ul.wpc-filter-chips-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
body .hb-fmeta .wpc-filter-chips-list li.wpc-filter-chip, body .hb-fdrawer .wpc-filter-chips-list li.wpc-filter-chip { margin: 0 6px 6px 0; }
body .hb-fmeta .wpc-filter-chips-list li.wpc-filter-chip { margin: 0; }
body .hb-fmeta .wpc-filter-chips-list li.wpc-filter-chip > *, body .hb-fdrawer .wpc-filter-chips-list li.wpc-filter-chip > * { border-color: #d0d0d0 !important; border-radius: 0 !important; background: #fff !important; color: var(--hb-black, #111) !important; font-size: 13px; }
body .hb-fmeta .wpc-filter-chips-list li.wpc-chip-reset-all > *, body .hb-fdrawer .wpc-filter-chips-list li.wpc-chip-reset-all > * { border-color: var(--hb-black, #111) !important; }
body .hb-fmeta .wpc-filter-chips-list a:hover .wpc-chip-remove-icon, body .hb-fdrawer .wpc-filter-chips-list a:hover .wpc-chip-remove-icon { color: var(--hb-black, #111); }

@media (max-width: 999.98px) {
	/* Телефон і планшет: у рядку лише сортування й кнопка «Фільтр» — вона відкриває ту саму панель */
	.hb-fbar__chip, .hb-fbar__wide { display: none; }
	.hb-fbar__narrow { display: inline; }
	.hb-fbar__all { border-color: var(--hb-black, #111); padding: 0 16px; height: 40px; }
	body.hb-listing .woo-listing-top { align-items: center; justify-content: space-between; padding: 8px 0; }
	body.hb-listing .woo-listing-top form.woocommerce-ordering { order: 2; }
	.hb-sort__btn { width: 190px; height: 40px; }
	.hb-sort__list { left: auto; right: 0; }
	.hb-fmeta { margin: 2px 0 12px; }
	.hb-fcount { font-size: 13px; }
}

/* ---------- Панель фільтрів справа ---------- */
.hb-fdrawer-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.hb-fdrawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100000; display: flex; flex-direction: column; width: 440px; max-width: 92%; background: #fff; transform: translateX(102%); visibility: hidden; transition: transform .28s ease, visibility 0s .28s; }
html.hb-fd-on .hb-fdrawer-overlay { opacity: 1; pointer-events: auto; }
html.hb-fd-on .hb-fdrawer { transform: none; visibility: visible; transition: transform .28s ease, visibility 0s 0s; }
html.hb-fd-instant .hb-fdrawer-overlay, html.hb-fd-instant .hb-fdrawer { transition: none; }
@media (max-width: 999.98px) {
	html.hb-fd-on { overflow: hidden; } /* на комп'ютері сторінку не блокуємо: зникала б смуга прокрутки й сторінка стрибала вбік (правка клієнта 08.10) */
}

.hb-fdrawer__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 18px; border-bottom: 1px solid #e5e5e5; }
.hb-fdrawer__title { flex: 1; text-align: center; color: var(--hb-black, #111); font: 500 20px Oswald, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.hb-fdrawer__back, .hb-fdrawer__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--hb-black, #111); font-size: 32px; line-height: 1; cursor: pointer; }
.hb-fdrawer[data-view="all"] .hb-fdrawer__back { visibility: hidden; }
.hb-fdrawer__body { flex: 1; min-height: 0; padding: 6px 28px 24px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.hb-fdrawer__foot { flex: none; display: flex; align-items: center; gap: 12px; padding: 16px 28px; border-top: 1px solid #e5e5e5; }
.hb-fdrawer__reset[hidden] { display: none; }
.hb-fdrawer__reset, .hb-fdrawer__show { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 22px; border: 1px solid var(--hb-black, #111); border-radius: 0; font: 500 14px Oswald, sans-serif; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.hb-fdrawer__reset { background: #fff; color: var(--hb-black, #111); }
.hb-fdrawer__show { flex: 1; background: var(--hb-black, #111); color: #fff; }
.hb-fdrawer__reset:hover { background: #f2f2f2; color: var(--hb-black, #111); }
.hb-fdrawer__show:hover { background: #444; border-color: #444; }

/* Віджет плагіна всередині панелі: службові кнопки плагіна ховаємо, сам вміст показуємо завжди */
.hb-fdrawer .widget_wpc_filters_widget { margin: 0; }
.hb-fdrawer .wpc-filters-open-button-container, .hb-fdrawer .wpc-widget-close-container, .hb-fdrawer .wpc-posts-found, .hb-fdrawer .wpc-spinner { display: none !important; }
.hb-fdrawer .wpc-filters-widget-content { display: block !important; position: static !important; width: auto !important; height: auto !important; padding: 0 !important; background: none !important; transform: none !important; opacity: 1 !important; visibility: visible !important; box-shadow: none !important; overflow: visible !important; }
.hb-fdrawer .wpc-filters-scroll-container, .hb-fdrawer .wpc-filters-widget-wrapper, .hb-fdrawer .wpc-filters-widget-containers-wrapper { position: static !important; height: auto !important; max-height: none !important; padding: 0 !important; overflow: visible !important; }
.hb-fdrawer .wpc-filters-section { margin: 0; padding: 0; }

/* Вигляд «усі фільтри»: назви рядками зі стрілкою */
.hb-fdrawer[data-view="all"] .wpc-filter-content { display: none !important; }
.hb-fdrawer .wpc-filter-header { margin: 0; padding: 0; border-bottom: 1px solid #e5e5e5; }
.hb-fdrawer .wpc-filter-header .wpc-filter-title { margin: 0; }
/* .wpc-filter-header у селекторі — щоб перебити стилі плагіна (вони вантажаться пізніше з тією самою вагою) */
.hb-fdrawer .wpc-filter-header .wpc-filter-title button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 20px 0; border: 0; background: none; color: var(--hb-black, #111); font: 500 15px Oswald, sans-serif; letter-spacing: .08em; text-transform: uppercase; text-align: left; cursor: pointer; }
.hb-fdrawer .wpc-filter-header .wpc-filter-title .wpc-open-icon { position: static; flex: none; width: 9px; height: 9px; margin: 0 4px 0 12px; border: 0 !important; border-right: 1.5px solid var(--hb-black, #111) !important; border-bottom: 1.5px solid var(--hb-black, #111) !important; background: none; transform: rotate(-45deg) !important; }
.hb-fdrawer .wpc-filter-header .wpc-filter-title .wpc-open-icon::before, .hb-fdrawer .wpc-filter-header .wpc-filter-title .wpc-open-icon::after { content: none; }
.hb-fdrawer .wpc-filter-title .wpc-wrap-icons { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; }
/* Вибране плагін дописує в назву: «Розмір — 30» */
.hb-fdrawer .wpc-filter-header .wpc-filter-title .wpc-filter-selected-values { display: inline !important; position: static; opacity: 1 !important; visibility: visible !important; margin-left: 8px; color: #777; font: 400 14px Onest, sans-serif; letter-spacing: 0; text-transform: none; }

/* Вигляд «один фільтр»: лише його варіанти */
.hb-fdrawer[data-view="one"] .wpc-filters-section:not(.is-current), .hb-fdrawer[data-view="one"] .wpc-filters-widget-top-container { display: none !important; }
.hb-fdrawer[data-view="one"] .wpc-filters-section.is-current > .wpc-filter-header { display: none; }
.hb-fdrawer[data-view="one"] .wpc-filters-section.is-current > .wpc-filter-content { display: block !important; padding-top: 14px; }
.hb-fdrawer .wpc-filters-section.hb-f-off { display: none !important; }
.hb-fdrawer .wpc-filters-ul-list { margin: 0; padding: 0; list-style: none; }
.hb-fdrawer .wpc-filter-content .wpc-filters-ul-list { max-height: none; overflow: visible; }

/* ---------- Значення фільтра (правка клієнта 12.10) ----------
   Текстові значення (матеріал, утеплення, акція) — рядками на всю ширину, без квадратика: вибране позначає галочка
   справа. Сам прапорець плагіна лишається в розмітці (на нього дивиться скрипт плагіна), але не показується. */
.hb-fdrawer .wpc-term-item { margin: 0; padding: 0; font-size: 15px; }
.hb-fdrawer .wpc-term-item-content-wrapper { position: relative; display: block; }
.hb-fdrawer .wpc-term-item input[type="checkbox"], .hb-fdrawer .wpc-term-item input[type="radio"] { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.hb-fdrawer .wpc-term-item label { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 15px 46px 15px 12px; color: var(--hb-black, #111); cursor: pointer; transition: background .15s; }
.hb-fdrawer .wpc-term-item label:hover { background: #f2f2f2; }
.hb-fdrawer .wpc-term-item .wpc-filter-link { color: inherit; text-decoration: none; }
.hb-fdrawer .wpc-term-item input:checked + label::after { content: ""; position: absolute; top: 50%; right: 18px; width: 15px; height: 8px; margin-top: -7px; border-left: 1.5px solid var(--hb-black, #111); border-bottom: 1.5px solid var(--hb-black, #111); transform: rotate(-45deg); }
.hb-fdrawer .wpc-term-item input:focus-visible + label { outline: 2px solid var(--hb-black, #111); outline-offset: -2px; }
.hb-fdrawer .wpc-term-item .wpc-term-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; margin: 0; padding: 0 6px; border: 1px solid #d0d0d0; border-radius: 12px; color: #444 !important; font-size: 12px; line-height: 1; opacity: 1; }
.hb-fdrawer .wpc-term-count-brackets-open, .hb-fdrawer .wpc-term-count-brackets-close { display: none; }

/* Розміри — великими кнопками */
.hb-fdrawer .wpc-filter-hb_size .wpc-filters-ul-list, .hb-fdrawer .wpc-filter-pa_rozmir .wpc-filters-ul-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 8px; }
.hb-fdrawer .wpc-filter-hb_size .wpc-term-item label, .hb-fdrawer .wpc-filter-pa_rozmir .wpc-term-item label { justify-content: center; gap: 0; height: 50px; padding: 0 6px; border: 1px solid #d0d0d0; font: 500 15px Oswald, sans-serif; letter-spacing: .04em; white-space: nowrap; font-size: 0; }
/* margin: 0 — плагін Filter Everything дає назві відступ праворуч 6 px, і розмір стояв лівіше центру кнопки (клієнт 14.10, знімки 16.10) */
.hb-fdrawer .wpc-filter-hb_size .wpc-term-item .wpc-filter-link, .hb-fdrawer .wpc-filter-pa_rozmir .wpc-term-item .wpc-filter-link { margin: 0; font-size: 15px; }
.hb-fdrawer .wpc-filter-hb_size .wpc-term-item label:hover, .hb-fdrawer .wpc-filter-pa_rozmir .wpc-term-item label:hover { border-color: var(--hb-black, #111); background: #fff; }
.hb-fdrawer .wpc-filter-hb_size .wpc-term-item input:checked + label, .hb-fdrawer .wpc-filter-pa_rozmir .wpc-term-item input:checked + label { border-color: var(--hb-black, #111); background: var(--hb-black, #111); color: #fff; }
.hb-fdrawer .wpc-filter-hb_size .wpc-term-count, .hb-fdrawer .wpc-filter-pa_rozmir .wpc-term-count, .hb-fdrawer .wpc-filter-hb_size .wpc-term-item input:checked + label::after, .hb-fdrawer .wpc-filter-pa_rozmir .wpc-term-item input:checked + label::after { display: none; }

/* Кольори — плитками з назвою під ними. Колір — із терміна атрибута (Товари → Атрибути → Колір, поле кольору плагіна
   Variation Swatches); змінну --hb-sw на кожен термін виводить hb-category.php. */
.hb-fdrawer .wpc-filter-pa_kolir .wpc-filters-ul-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; }
.hb-fdrawer .wpc-filter-pa_kolir .wpc-term-item label { flex-direction: column; gap: 7px; padding: 0; font-size: 0; text-align: center; }
.hb-fdrawer .wpc-filter-pa_kolir .wpc-term-item label:hover { background: none; }
.hb-fdrawer .wpc-filter-pa_kolir .wpc-term-item label::before { content: ""; display: block; width: 100%; aspect-ratio: 4 / 3; border: 1px solid rgba(0, 0, 0, .18); background: var(--hb-sw, #f2f2f2); transition: box-shadow .15s; }
.hb-fdrawer .wpc-filter-pa_kolir .wpc-term-item label:hover::before { box-shadow: 0 0 0 1px var(--hb-black, #111); }
.hb-fdrawer .wpc-filter-pa_kolir .wpc-term-item input:checked + label::before { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--hb-black, #111); }
.hb-fdrawer .wpc-filter-pa_kolir .wpc-term-item .wpc-filter-link { font-size: 13px; line-height: 1.25; }
.hb-fdrawer .wpc-filter-pa_kolir .wpc-term-count, .hb-fdrawer .wpc-filter-pa_kolir .wpc-term-item input:checked + label::after { display: none; }

/* Ціна: лінія й повзунки чорні (у плагіна — сині) */
.hb-fdrawer .wpc-filters-range-inputs .ui-slider-range, .hb-fdrawer .wpc-filters-range-inputs .ui-slider .ui-slider-range { background: var(--hb-black, #111) !important; }
.hb-fdrawer .wpc-filters-range-inputs .ui-slider-handle { border-color: var(--hb-black, #111) !important; background: #fff !important; }
.hb-fdrawer .wpc-filters-range-inputs input[type="number"] { border-color: #d0d0d0; border-radius: 0; color: var(--hb-black, #111); }
.hb-fdrawer .wpc-filters-range-inputs input[type="number"]:focus { border-color: var(--hb-black, #111); }

@media (max-width: 689.98px) {
	.hb-fdrawer__body { padding: 4px 18px 20px; }
	.hb-fdrawer__foot { padding: 12px 18px; }
	.hb-fdrawer__title { font-size: 18px; }
}