/* ==========================================================================
   OCF-фільтр (OCFilter48) — косметичний скін під макет, єдиний і для
   десктопу, і для мобілки (кнопка "Фільтри" в тулбарі відкриває той самий
   #ocf-module-1, просто вендор рендерить його як повноекранний дровер).
   HTML/PHP вендора НЕ чіпаємо (окремий модуль). Тут тільки CSS поверх
   реальних .ocf-* класів, підключається ПІСЛЯ ocf.cache.*.css
   (лінк вставлений в category.tpl одразу за $column_left), тому в разі
   рівної специфічності виграє цей файл. Де у вендора власний !important —
   б'ємо у відповідь !important (те саме робив і старий сайт).

   На мобілці вендор за замовчуванням "розсуває" список значень кожної
   групи вправо-вліво через position+transform (drill-down панель, як у
   налаштуваннях iOS). Це і скасовуємо нижче (position:relative/transform:none),
   щоб група просто розгорталася на місці — однаково з десктопом. Той самий
   прийом вже був на старому сайті користувача (body .ocf-filter-body>.ocf-value-list
   {position:relative!important;transform:unset!important}).
   ========================================================================== */

/* --- верхня плашка "Фільтр" (.ftop у макеті) --- */
#ocf-module-1 > .ocf-content > .ocf-header{
	background:#fff;
	border:1px solid var(--line);
	border-radius:14px;
	padding:12px 14px;
	margin-bottom:10px;
	font-size:15px;
	font-weight:800;
	font-family:'Onest',sans-serif;
	color:var(--ink)
}

#ocf-module-1 .ocf-header .ocf-icon.ocf-brand{
	background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%238e1c25' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3e%3cpath d='M4 5h16l-6.2 7.2V18l-3.6 2v-7.8L4 5Z'/%3e%3c/svg%3e");
	min-width:18px;
	min-height:18px;
	margin-right:9px
}

/* --- кожна група фільтра (.fgroup) --- */
#ocf-module-1 .ocf-filter{
	background:#fff;
	border:1px solid var(--line);
	border-radius:14px;
	overflow:hidden;
	margin:0 0 10px !important;
	padding:0 !important
}

#ocf-module-1 .ocf-filter-body{
	padding:0
}

/* --- заголовок групи (.fhead) --- */
#ocf-module-1 .ocf-filter-header{
	padding:13px 14px;
	margin-bottom:0 !important;
	font-size:12px;
	font-weight:800;
	font-family:'Onest',sans-serif;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:var(--ink);
	cursor:pointer
}

#ocf-module-1 .ocf-filter-name{
	color:inherit;
	font-size:inherit;
	font-weight:inherit
}

#ocf-module-1 .ocf-active-label{
	font-size:11px;
	font-weight:600;
	text-transform:none;
	letter-spacing:0;
	color:var(--muted)
}

#ocf-module-1 .ocf-filter-header .ocf-angle,
#ocf-module-1 .ocf-filter-header .ocf-arrow-long{
	background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2371757f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3e%3cpath d='m8.5 5 7 7-7 7'/%3e%3c/svg%3e");
	transition:transform .25s cubic-bezier(.16,1,.3,1)
}

#ocf-module-1 .ocf-filter-discard{
	background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2371757f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3e%3cpath d='M6 6l12 12M18 6 6 18'/%3e%3c/svg%3e");
}

#ocf-module-1 .ocf-filter-discard:hover{
	filter:invert(14%) sepia(80%) saturate(2700%) hue-rotate(340deg) brightness(75%) contrast(95%)
}

/* згортання блоку по кліку на заголовок — керується власним класом
   .ocfskin-collapsed (додає/знімає js/sripts.js), бо реальні
   класи вендора .ocf-open/.ocf-active означають інше ("розгорнуто за
   замовчуванням" і "є вибрані значення"), а не поточний стан кліку.
   За замовчуванням (без класу) блок розгорнутий — рівно як і зараз
   на сайті без наших правок */
#ocf-module-1 .ocf-filter.ocfskin-collapsed > .ocf-filter-body > .ocf-value-list,
#ocf-module-1 .ocf-filter.ocfskin-collapsed > .ocf-filter-body > .ocf-collapse{
	display:none !important
}

#ocf-module-1 .ocf-filter-header-append .ocf-angle.ocf-angle-right{
	display:inline-block !important;
	width:18px;
	height:18px;
	transform:rotate(0deg) !important;
	background:no-repeat center/18px 18px url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2371757f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e") !important;
	transition:transform .25s cubic-bezier(.16,1,.3,1)
}

#ocf-module-1 .ocf-filter.ocfskin-collapsed .ocf-filter-header-append .ocf-angle.ocf-angle-right{
	transform:rotate(-90deg) !important
}

/* --- скасовуємо мобільний drill-down (значення "виїжджають" панеллю
   справа) — робимо звичайне розгортання на місці, як на десктопі --- */
#ocf-module-1 .ocf-filter-body > .ocf-value-list{
	position:relative !important;
	transform:none !important;
	left:auto !important;
	right:auto !important;
	top:auto !important;
	width:auto !important
}

/* --- тіло групи + список значень (.fbody/.flist) --- */
#ocf-module-1 .ocf-filter-body > .ocf-value-list{
	padding:2px 14px 14px !important;
	margin:0 !important
}

#ocf-module-1 .ocf-value-list-body{
	display:grid;
	gap:2px
}

/* --- чекбокс-пункт (.fitem/.fbox/.fl/.fc) --- */
#ocf-module-1 .ocf-value{
	padding:6px 5px !important;
	border-radius:8px;
	margin-bottom:0 !important;
	font-size:12px !important;
	transition:background .15s
}

#ocf-module-1 .ocf-value:hover{
	background:var(--line-soft)
}

#ocf-module-1 .ocf-value-input{
	width:18px !important;
	height:18px !important;
	flex:0 0 18px !important;
	margin-right:9px !important;
	margin-top:0 !important
}

#ocf-module-1 .ocf-value-input-checkbox::before{
	border-radius:5px !important;
	border-color:#cfd2d8;
	background-color:#fff
}

#ocf-module-1 .ocf-selected .ocf-value-input::before{
	background-color:var(--red) !important;
	border-color:var(--red) !important
}

#ocf-module-1 .ocf-value:not(.ocf-disabled):active .ocf-value-input::before{
	background-color:var(--red-wash) !important;
	border-color:var(--red) !important
}

#ocf-module-1 .ocf-value-name{
	font-size:12px;
	font-weight:600;
	color:var(--soft)
}

#ocf-module-1 .ocf-selected .ocf-value-name{
	color:var(--ink);
	font-weight:700
}

#ocf-module-1 .ocf-value-count{
	font-size:10px !important;
	font-weight:800;
	color:var(--faint);
	background:var(--line-soft) !important;
	border-radius:7px
}

#ocf-module-1 .ocf-btn-show-values{
	color:var(--red);
	font-size:12.5px;
	font-weight:700
}

#ocf-module-1 .ocf-btn-show-values:hover{
	color:var(--red-dark)
}

/* --- ціна: input-group + слайдер (.pricerow/.rng) --- */
#ocf-module-1 .ocf-input-group{
	display:flex;
	align-items:center;
	gap:6px;
	margin-bottom:4px
}

#ocf-module-1 .ocf-slider-input-group{
	width:85%
}

#ocf-module-1 .ocf-form-control{
	border:1.5px solid var(--line) !important;
	border-radius:9px !important;
	background:#fafafb !important;
	font-size:12.5px !important;
	font-weight:700;
	color:var(--ink);
	height:auto !important;
	padding:8px 9px !important
}

#ocf-module-1 .ocf-form-control:focus{
	border-color:var(--red) !important;
	background:#fff !important;
	box-shadow:none !important
}

#ocf-module-1 .ocf-input-group-addon{
	background:none !important;
	color:var(--muted);
	font-size:11.5px;
	font-weight:700;
	padding:0 2px !important
}

#ocf-module-1 .ocf-value-slider{
	padding:14px 4px 0 !important
}

#ocf-module-1 .ocf-noUi-pips{
	display:none
}

#ocf-module-1 .ocf-noUi-base:before{
	background-color:var(--line) !important;
	height:5px !important;
	margin-top:-2.5px !important
}

#ocf-module-1 .ocf-noUi-connect:before{
	background-color:var(--red) !important
}

#ocf-module-1 .ocf-noUi-connects:before,
#ocf-module-1 .ocf-noUi-connects:after{
	background-color:var(--line) !important
}

#ocf-module-1 .ocf-noUi-handle{
	background-color:#fff !important;
	border:5px solid var(--red) !important;
	box-shadow:var(--sh-sm) !important
}

#ocf-module-1 .ocf-noUi-active{
	box-shadow:0 0 0 6px var(--red-wash) !important
}

/* --- футер (кнопки "Скинути"/"Показати") --- */
#ocf-module-1 .ocf-footer{
	background:transparent !important;
	box-shadow:none !important;
	padding:0 !important;
	margin:6px 0 0 !important
}

#ocf-module-1.ocf-theme-light .ocf-footer:after{
	box-shadow:none !important
}

@media (min-width:768px){
	#ocf-module-1 .ocf-footer{
		background:#fff !important;
		border:1px solid var(--line);
		border-radius:14px;
		padding:12px 14px !important
	}
}

#ocf-module-1 .ocf-between .ocf-btn-link{
	color:var(--muted);
	font-size:12px;
	font-weight:700
}

#ocf-module-1 .ocf-between .ocf-btn-link:hover{
	color:var(--red)
}

#ocf-module-1 .ocf-search-btn-static,
#ocf-module-1 .ocf-search-btn-popover{
	background:var(--red) !important;
	color:#fff !important;
	border-radius:11px !important;
	font-weight:700
}

#ocf-module-1 .ocf-search-btn-static:hover,
#ocf-module-1 .ocf-search-btn-popover:hover{
	background:var(--red-dark) !important
}

/* власна плаваюча кнопка фільтра вендора ховаємо на будь-якій ширині —
   на сайті вже є кнопка "Фільтри" в тулбарі сортування
   (.btn-filter[data-ocf="mobile"]), яка відкриває той самий дровер,
   дублювати кнопку не треба ні на мобілці, ні на десктопі */
#ocf-module-1 .ocf-btn-mobile-fixed{
	display:none !important
}

/* --- мобільний дровер: відступи країв + скрол ---
   Перша спроба (flex на .ocf-content + overflow-y:auto на .ocf-body) була
   хибною — плодила два конкурентні скрол-контейнери. Реальна причина
   зависання: у вендора .ocf-value-list в закритому/анімаційному стані має
   обмежену height+overflow:hidden (як Bootstrap .collapse), і саме це
   "з'їдало" колесо миші. Знайшли перевірений фікс з нашого ж старого сайту
   (той самий стиль там вирішував ту саму проблему) — просто знімаємо
   обмеження height/overflow, скрол-контейнер лишається вендорським */
@media (max-width:767px){
	#ocf-module-1 .ocf-content{
		background:var(--bg) !important
	}

	#ocf-module-1 .ocf-body,
	#ocf-module-1 .ocf-filter-list,
	#ocf-module-1 .ocf-header,
	#ocf-module-1 .ocf-footer{
		padding-left:8px !important;
		padding-right:8px !important
	}

	#ocf-module-1 .ocf-filter-body > .ocf-value-list{
		overflow:unset !important;
		height:100% !important
	}
}

/* --- "Ви обрали" → чипси, як .fchips/.fchip у макеті ---
   На десктопі JS (sripts.js) переносить .ocf-selected-header/.ocf-selected-card
   у #fchips-target над сіткою товарів; на мобілці лишає в сайдбарі —
   тут тільки візуал, DOM-позицію не чіпаємо */
#fchips-target{
	display:none;
	flex-wrap:wrap;
	gap:7px;
	margin-top:10px
}

.ocf-selected-header{
	display:none
}

.ocf-selected-card{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:7px;
	background:none !important;
	border:none !important;
	box-shadow:none !important;
	padding:0 !important;
	margin:0 !important
}

.ocf-selected-discard{
	display:inline-flex !important;
	align-items:center;
	gap:6px;
	padding:7px 11px !important;
	border-radius:999px !important;
	background:var(--red-wash) !important;
	border:1px solid var(--red-line) !important;
	color:var(--red) !important;
	font-size:12px;
	font-weight:700;
	transition:.15s;
	margin:0 !important
}

.ocf-selected-discard:hover{
	background:var(--red) !important;
	color:#fff !important
}

.ocf-selected-discard .ocf-times-circle{
	width:12px;
	height:12px;
	background:no-repeat center/12px 12px url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3e%3cpath d='M6 6l12 12M18 6 6 18'/%3e%3c/svg%3e")
}

.ocf-selected-card .ocf-between{
	display:flex;
	align-items:center;
	gap:7px;
	margin:0 !important;
	padding:0 !important
}

.ocf-selected-card .ocf-btn-link{
	padding:7px 11px !important;
	border-radius:999px !important;
	background:#fff !important;
	border:1px solid var(--line) !important;
	color:var(--muted) !important;
	font-size:12px;
	font-weight:700
}

.ocf-selected-card .ocf-btn-link:hover{
	border-color:var(--ink) !important;
	color:var(--ink) !important
}

.ocf-selected-card .ocf-btn-link[data-ocf="specify"]{
	display:none
}