/* ===== Рестайлінг фільтра категорії (Brainy Filter Pro) під загальний
   "преміальний" вигляд сайту (біла картка, м'яка тінь, тонка помаранчева
   смуга/акцент) - той самий патерн, що і в блоці доставки/відгуків/FAQ.
   Селектори навмисно БЕЗ прив'язки до #deskfilter, щоб однаково працювало
   і в десктопному сайдбарі, і в мобільній версії (та сама розмітка
   плагіна, просто інший контейнер/позиціонування через @media). Кольори
   для .bf-attr-header/.bf-count/.bf-attr-group-header/слайдера НЕ
   позначені !important - якщо в адмінці Brainy Filter налаштовано власний
   колір (settings['style'][...]), він виводиться нижче по DOM (всередині
   {{ content_top }}/{{ content_bottom }}) і має пріоритет; якщо колір не
   налаштований - працює наш преміальний фон за замовчуванням.

   Цей файл підключається окремим посиланням на стиль з category.twig, а
   не інлайн-блоком - інлайн-варіант обривався хостингом (mod_pagespeed) і
   частина правил "витікала" як текст прямо на сторінку. */

/* На сторінці насправді 3 екземпляри .bf-panel-wrapper (плагін
   призначений на кілька позицій в адмінці: #deskfilter - той, що
   реально потрібен і правильно обмежений по ширині; ще один - всередині
   #column-left (він display:none, не заважає); і третій - "сирота", що
   висить прямо в тегу BODY на всю ширину сторінки (та сама function
   initAbsolutePosition() в brainyfilter.js бере $('.bf-responsive').eq(0)
   - тобто керує лише ПЕРШИМ екземпляром на сторінці за порядком в DOM,
   а не тим, що всередині #deskfilter). Це не наша поломка - так було й
   до рестайлу, просто раніше сірий стандартний блок плагіна був менш
   помітний. Прибираємо цей "осиротілий" екземпляр на десктопі (на
   мобільному, де він потенційно потрібен для повноекранної версії
   фільтра, не чіпаємо). Дублюється також через JS в category.twig на
   випадок якщо і цей файл десь по дорозі постраждає. */
@media (min-width: 621px) {
	body > .bf-panel-wrapper {
		display: none !important;
	}
}
.bf-panel-wrapper .box {
	background: #fff;
	border: none !important;
	border-radius: 14px;
	box-shadow: 0 14px 34px rgba(20,20,20,.08), 0 2px 8px rgba(20,20,20,.04);
	overflow: hidden;
}
.bf-panel-wrapper .box-heading {
	background: #fff;
	border-bottom: 1px solid #f0eeea !important;
	text-shadow: none !important;
	padding: 16px 18px !important;
	position: relative;
	color: #201c19;
}
.bf-panel-wrapper .box-heading::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, #f79020 0%, #ea5d06 100%);
}
.bf-panel-wrapper .filtitle {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-size: 18px;
}
.bf-panel-wrapper .bf-attr-header {
	position: relative;
	padding: 12px 14px 12px 20px !important;
	border-bottom: 1px solid #f5f2ec !important;
	font-weight: 600;
	color: #201c19;
}
.bf-panel-wrapper .bf-attr-header::before {
	content: "";
	position: absolute;
	left: 8px; top: 10px; bottom: 10px;
	width: 3px;
	border-radius: 2px;
	background: linear-gradient(180deg, #f79020 0%, #ea5d06 100%);
}
.bf-panel-wrapper input[type="checkbox"],
.bf-panel-wrapper input[type="radio"] {
	accent-color: #ea5d06;
	width: 16px !important;
	height: 16px !important;
}
.bf-panel-wrapper .bf-count {
	display: inline-block;
	border-radius: 20px !important;
	padding: 1px 8px !important;
	font-size: 11px;
	font-weight: 700;
	background: linear-gradient(135deg, rgba(247,144,32,.14) 0%, rgba(234,93,6,.14) 100%);
	color: #ea5d06;
}
.bf-panel-wrapper .bf-count.bf-empty {
	background: #f2f2f2;
	color: #aaa;
}
.bf-panel-wrapper .ui-widget-content {
	background: #f3f1ec;
	border: none;
}
.bf-panel-wrapper .ui-widget-header {
	background: linear-gradient(90deg, #f79020 0%, #ea5d06 100%);
}
.bf-panel-wrapper .ui-state-default {
	background: #fff;
	border: 2px solid #ea5d06;
	box-shadow: 0 2px 6px rgba(234,93,6,.3);
}
.bf-panel-wrapper .bf-buttonsubmit {
	background: linear-gradient(135deg, #ea5d06 0%, #f79020 100%) !important;
	border: none !important;
	border-radius: 8px !important;
	color: #fff !important;
	font-weight: 700;
	text-shadow: none !important;
	box-shadow: 0 8px 18px rgba(234,93,6,.28);
	padding: 10px 22px !important;
}
.bf-panel-wrapper .bf-buttonclear {
	background: none !important;
	color: #ea5d06 !important;
	text-decoration: underline;
	font-weight: 600;
	font-size: 13px !important;
	padding: 6px 4px !important;
}
.bf-panel-wrapper .bf-buttonclear:hover {
	background: none !important;
	color: #c94e05 !important;
}
/* кастомна мобільна кнопка "Фільтр" (category.twig, .filterr1) - той самий
   градієнт-піл, що і CTA-кнопки на сторінці товару, замість голого
   інлайн-стилю border+суцільний колір. Раніше поруч була ще одна кнопка
   "Скинути", прибрали її - тепер скидання фільтра робиться зсередини самої
   панелі (рідна кнопка плагіна .bf-buttonclear нижче, вже стилізована під
   дизайн сайту), а в тулбарі лишається тільки один тригер "Фільтр". */
/* .filterr1 сам по собі показується/ховається старими правилами в
   category.twig (display:none!important на десктопі від min-width:556px) -
   тут лише докидаємо розкладку, і ТІЛЬКИ в тому ж мобільному діапазоні,
   де він і так видимий, щоб не перебити !important-правило, яке ховає
   його на десктопі.
   inline-flex (а не flex) навмисно: .filterr1 лежить в тій самій
   table-cell (text-align:right), що і селект "Вывод" (кількість товарів
   на сторінці) - блоковий flex переносив кнопку на новий рядок під
   селект, а inline-flex лишається "в тексті" на тому ж рядку, і разом з
   селектом притискається вправо тим самим text-align:right. */
@media (max-width: 555px) {
	.filterr1 {
		display: inline-flex !important;
		vertical-align: middle;
		margin-left: 8px;
	}
}
.bf-btn-show1 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 9px 18px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 13px;
	white-space: nowrap;
	background: linear-gradient(135deg, #ea5d06 0%, #f79020 100%);
	color: #fff;
	box-shadow: 0 6px 16px rgba(234,93,6,.3);
}
/* "Показати все (N)" в списку брендів/атрибутів - за замовчуванням у
   плагіна фірмовий синій (#0D9FDF), не в стилі сайту. */
.bf-sliding-show {
	color: #ea5d06 !important;
}
.bf-sliding-show:hover {
	color: #c94e05 !important;
}

/* Вертикальний розділювач між колонками сітки товарів на мобільному -
   правило .product-layout:nth-child(odd) (category.twig) рахує позицію
   серед УСІХ сусідів у .product_categ_main.row, включно з
   .banner-horizontal-wrap (банер "Доставляємо швидше" на всю ширину,
   loop.index==12). Сам банер не .product-layout, але як окремий сусід він
   зсуває лічильник позицій для всього, що йде після нього, на 1 - і банер
   до того ж розриває рядок сітки (flex: 0 0 100%), тож усе після нього
   починає рядок заново з лівої колонки. В результаті парність
   nth-child перестає збігатись із реальною лівою/правою колонкою саме
   після банера - розділювач зникає з лівої колонки й помилково лізе на
   праву. Перерахунок парності окремо для всього, що йде після банера. */
@media (max-width: 555px) {
	.banner-horizontal-wrap ~ .product-layout:nth-child(odd) {
		box-shadow: none !important;
	}
	.banner-horizontal-wrap ~ .product-layout:nth-child(even) {
		box-shadow: 1px 0 0 0 rgba(0,0,0,.10) !important;
	}
}