/* ═══════════════════════════════════════════════════════════════════════
   IVO-SHOP-FILTERS-20260913 — видът на филтрите в магазина.
   Придружава ivo-shop-filters.php в mu-plugins. Един файл за 8-те магазина.

   Мобилен-пръв: базовите правила важат и в чекмеджето на телефона, а
   специфичното за широк екран е в медия-заявките накрая.

   Марковият цвят идва като --ivo-sf-ink от PHP (от настройката на темата),
   затова тук няма зашит зелен/черен цвят.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
	/* 🪤 `--ivo-sf-ink` ИМА стойност и тук, макар PHP да я презаписва по сайт.
	   Без нея, ако вграденият стил не стигне до браузъра (WP Rocket „Remove
	   unused CSS" реже точно :root променливи, сливане на файлове, стар кеш),
	   `background: var(--ivo-sf-ink)` става невалиден → прозрачен, а текстът
	   остава бял: чиповете и бутоните стават БЯЛО ВЪРХУ БЯЛО. */
	--ivo-sf-ink: #003233;
	--ivo-sf-line: #e4e9e8;
	/* Беше #7b8b8a — 3.56:1 върху бяло, под WCAG AA за 11-12px текст.
	   #5c6a69 дава 5.4:1. */
	--ivo-sf-muted: #5c6a69;
	--ivo-sf-soft: #f4f7f6;
	--ivo-sf-r: 10px;
	--ivo-sf-pad: 16px;
}

/* ---------- обща рамка на сайдбара ---------- */
#shop-sidebar .widget {
	margin-bottom: 24px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--ivo-sf-line);
}
#shop-sidebar .widget:last-child { border-bottom: 0; padding-bottom: 0; }
/* 🪤 .ivo-sf-apply-bar се печата СЛЕД последната джаджа (и на десктоп, само
   скрит), тоест никоя .widget вече не е :last-child и последната задържаше
   разделителната линия. Без :has() правилото просто отпада. */
#shop-sidebar .widget:has(+ .ivo-sf-apply-bar) { border-bottom: 0; padding-bottom: 0; }
#shop-sidebar .widget-title {
	display: block;
	margin-bottom: 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ivo-sf-ink);
}
#shop-sidebar .is-divider { display: none; }
#shop-sidebar ul { margin: 0; padding: 0; list-style: none; }
#shop-sidebar .widget_layered_nav li { border: 0; margin: 0; padding: 0; line-height: 1.4; }

/* Flatsome рисува свое кръгче „x" върху избраното (a::before). В чип изглежда
   като сива дупка, а в чиповете с активните филтри се получаваше ДВОЙНО ✕. */
#shop-sidebar .widget_layered_nav li.chosen a::before { display: none !important; content: none !important; }

/* ---------- РАЗМЕР и СТЕЛКА: чипове вместо списък ----------
   Двата филтъра отговарят на един и същ въпрос („ще ми стане ли?") и стоят
   един под друг. Списък от 22 реда числа е нечетим; чиповете стават 3 реда. */
#shop-sidebar .ivo-sf-kind-size ul,
#shop-sidebar .ivo-sf-kind-insole ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
#shop-sidebar .ivo-sf-kind-size li,
#shop-sidebar .ivo-sf-kind-insole li {
	border: 1px solid var(--ivo-sf-line);
	border-radius: var(--ivo-sf-r);
	background: #fff;
	transition: border-color .18s ease, background-color .18s ease;
}
#shop-sidebar .ivo-sf-kind-size li a,
#shop-sidebar .ivo-sf-kind-insole li a {
	display: block;
	min-width: 48px;
	padding: 11px 12px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--ivo-sf-ink);
	text-decoration: none;
}
#shop-sidebar .ivo-sf-kind-size li:hover,
#shop-sidebar .ivo-sf-kind-insole li:hover { border-color: var(--ivo-sf-ink); background: var(--ivo-sf-soft); }
#shop-sidebar .ivo-sf-kind-size li.chosen,
#shop-sidebar .ivo-sf-kind-insole li.chosen { border-color: var(--ivo-sf-ink); background: var(--ivo-sf-ink); }
#shop-sidebar .ivo-sf-kind-size li.chosen a,
#shop-sidebar .ivo-sf-kind-insole li.chosen a { color: #fff; }
/* Заковано явно: li:hover и li.chosen са с РАВНА специфичност — всяко
   разместване на редовете би дало бял текст върху светъл фон. */
#shop-sidebar .ivo-sf-kind-size li.chosen:hover,
#shop-sidebar .ivo-sf-kind-insole li.chosen:hover { background: var(--ivo-sf-ink); }
/* Броят е скрит нарочно: липсващият размер/дължина изобщо не се показва, така
   че числото до него не носи решение — само разчупва чиповете на два реда.
   🪤 `!important` и ДВА класа са задължителни: style.css на tuasolea.bg има
      `#shop-sidebar .widget_layered_nav .count{display:inline !important}` и се
      зарежда СЛЕД този файл. По-специфично правило е единственият начин. */
#shop-sidebar .ivo-sf-attr.ivo-sf-kind-size .count,
#shop-sidebar .ivo-sf-attr.ivo-sf-kind-insole .count,
.mfp-content .ivo-sf-attr.ivo-sf-kind-size .count,
.mfp-content .ivo-sf-attr.ivo-sf-kind-insole .count { display: none !important; }

/* Стелката е по-широка стойност („24.5 см"), затова чиповете ѝ са по-тесни. */
#shop-sidebar .ivo-sf-kind-insole li a { min-width: 0; padding: 10px 11px; font-size: 13px; }

.ivo-sf-hint {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--ivo-sf-muted);
}

/* ---------- ЦВЯТ: мостра + име + брой ----------
   Нарочно НЕ гола решетка от кръгчета: „Визон", „Таба", „Капучино" не се
   познават по цвят и клиентът не знае какво избира. */
/* 🪤 Колоните са auto-fill с праг 150px, а НЕ заковани две. Сайдбарът на
   tuasolea.bg е ~200px и при две колони „Тъмнокафяв" се свиваше до „Т…".
   Два класа в селектора, за да бие `#shop-sidebar .ivo-attr-color ul{1fr 1fr}`
   от style.css, който се зарежда след този файл. */
#shop-sidebar .ivo-sf-attr.ivo-sf-kind-color ul,
.mfp-content .ivo-sf-attr.ivo-sf-kind-color ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	column-gap: 10px;
	row-gap: 2px;
}
#shop-sidebar .ivo-sf-kind-color li {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 6px 7px;
	border-radius: 8px;
	transition: background-color .16s ease;
}
#shop-sidebar .ivo-sf-kind-color li:hover { background: var(--ivo-sf-soft); }
#shop-sidebar .ivo-sf-kind-color li a {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12.5px;
	color: var(--ivo-sf-ink);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#shop-sidebar .ivo-sf-kind-color .count { flex: 0 0 auto; font-size: 11px; color: var(--ivo-sf-muted); }
#shop-sidebar .ivo-sf-kind-color .ux-swatch-widget-layered-nav-list__graphic { flex: 0 0 auto; margin: 0; }
#shop-sidebar .ivo-sf-kind-color .ux-swatch__color {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}
#shop-sidebar .ivo-sf-kind-color li.chosen { background: var(--ivo-sf-soft); }
#shop-sidebar .ivo-sf-kind-color li.chosen a { font-weight: 700; }
#shop-sidebar .ivo-sf-kind-color li.chosen .ux-swatch__color {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 2px #fff, 0 0 0 4px var(--ivo-sf-ink);
}

/* ---------- останалите списъци (материал, характеристики) ---------- */
#shop-sidebar .ivo-sf-kind-other li a {
	display: inline-block;
	padding: 6px 0;
	font-size: 13.5px;
	color: var(--ivo-sf-ink);
	text-decoration: none;
}
#shop-sidebar .ivo-sf-kind-other li a:hover { opacity: .7; }
#shop-sidebar .ivo-sf-kind-other .count { font-size: 11px; color: var(--ivo-sf-muted); }
#shop-sidebar .ivo-sf-kind-other li.chosen a { font-weight: 700; }

/* ---------- ЦЕНА ----------
   Отстъпът отстрани е нарочен: дръжките стърчат по 9px извън релсата и при
   0% / 100% се режеха от ръба на сайдбара. */
#shop-sidebar .price_slider_wrapper .ui-slider {
	height: 4px;
	margin: 16px 10px 18px;
	border: 0;
	border-radius: 99px;
	background: var(--ivo-sf-line);
}
#shop-sidebar .price_slider_wrapper .ui-slider .ui-slider-range { background: var(--ivo-sf-ink); border-radius: 99px; }
#shop-sidebar .price_slider_wrapper .ui-slider .ui-slider-handle {
	width: 18px;
	height: 18px;
	top: -7px;
	margin-left: -9px;
	background: #fff;
	border: 2px solid var(--ivo-sf-ink);
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
}
#shop-sidebar .price_slider_amount {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}
#shop-sidebar .price_slider_amount .price_label { order: 1; margin: 0; font-size: 13px; color: var(--ivo-sf-muted); }
#shop-sidebar .price_slider_amount .price_label span { color: var(--ivo-sf-ink); font-weight: 700; }
#shop-sidebar .price_slider_amount .button {
	order: 2;
	margin: 0;
	min-height: 0;
	line-height: 1;
	padding: 10px 20px;
	border: 0;
	border-radius: 99px;
	background: var(--ivo-sf-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	transition: opacity .18s ease;
}
#shop-sidebar .price_slider_amount .button:hover { background: var(--ivo-sf-ink); opacity: .86; }
#shop-sidebar .price_slider_amount .clear { display: none; }

/* ---------- ИЗБРАНИ ФИЛТРИ (чипове) ----------
   Селекторите са нарочно с ДВА класа: темата има `.widget_layered_nav_filters
   ul li a` (0,1,3), което побеждава `.ivo-sf-active li a` (0,1,2) и изяждаше
   страничния отстъп — чипът излизаше сплескан. */
.widget.ivo-sf-active ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.widget.ivo-sf-active ul li,
.widget.ivo-sf-active ul li.chosen { margin: 0; padding: 0; border: 0; }
.widget.ivo-sf-active ul li.chosen a,
.widget.ivo-sf-active ul li a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border-radius: 99px;
	background: var(--ivo-sf-ink);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	transition: opacity .18s ease;
}
/* 🪤 Flatsome рисува свое кръгче „x" през `li.chosen a::before` — без това
   правило чипът излиза с ДВА знака за затваряне. */
.widget.ivo-sf-active ul li.chosen a::before,
.widget.ivo-sf-active ul li a::before { display: none !important; content: none !important; }
.widget.ivo-sf-active ul li.chosen a::after,
.widget.ivo-sf-active ul li a::after { content: "\2715"; font-size: 10px; opacity: .7; }
.widget.ivo-sf-active ul li.chosen a:hover { opacity: .85; }
.widget.ivo-sf-active ul li.chosen a:hover::after { opacity: 1; }
.ivo-sf-clear { display: inline-block; margin-top: 12px; font-size: 12px; color: var(--ivo-sf-muted); text-decoration: underline; }
.ivo-sf-clear:hover { color: var(--ivo-sf-ink); }

/* ---------- КАТЕГОРИИ ---------- */
#shop-sidebar .product-categories li { border: 0; }
#shop-sidebar .product-categories li a {
	display: inline-block;
	padding: 7px 0;
	font-size: 14px;
	color: var(--ivo-sf-ink);
	text-decoration: none;
}
#shop-sidebar .product-categories li a:hover { opacity: .7; }
#shop-sidebar .product-categories .children {
	margin: 2px 0 6px 10px;
	padding-left: 12px;
	border-left: 1px solid var(--ivo-sf-line);
}
#shop-sidebar .product-categories .children li a { font-size: 13px; padding: 5px 0; }
#shop-sidebar .product-categories li.current-cat > a { font-weight: 700; }

/* ---------- БРОЙ НАМЕРЕНИ ----------
   На широк екран WooCommerce вече пише „Показване на 1–12 от 233 резултата",
   затова тук мълчим — три еднакви числа на един екран са шум. На телефон онзи
   ред е скрит от темата и човекът не вижда нищо: показваме се САМО там. */
.ivo-sf-count { display: none; }

/* ---------- ЧИПОВЕТЕ НАД РЕШЕТКАТА (само телефон) ----------
   На широк екран същите чипове стоят най-отгоре в сайдбара, до филтрите. */
.ivo-sf-chips { display: none; }
.ivo-sf-chips .ivo-sf-clear { margin: 10px 0 0; }
/* Заглавие на списъка там, където темата не рисува нито едно (измерено на
   .it/.gr/.ro/.de/nimed). Мерките следват заглавията на другите страници. */
.ivo-sf-h1 {
	margin: 0 0 10px;
	font-size: 22px;
	line-height: 1.2;
	font-weight: 600;
	color: var(--ivo-sf-ink);
}
@media (min-width: 850px) {
	.ivo-sf-h1 { font-size: 28px; }
}

.ivo-sf-intro {
	margin: 0 0 18px;
	max-width: 62em;
	font-size: 14px;
	line-height: 1.55;
	color: #4b5958;
}

/* ---------- БУТОН „Виж N модела" в чекмеджето ----------
   Показва се САМО когато сайдбарът е отворен като чекмедже; на широк екран е
   излишен, защото резултатът се вижда до филтрите. */
.ivo-sf-apply-bar { display: none; }
.mfp-content .ivo-sf-apply-bar,
.off-canvas .ivo-sf-apply-bar {
	display: block;
	position: sticky;
	bottom: 0;
	z-index: 3;
	margin: 18px calc(-1 * var(--ivo-sf-pad)) -40px;
	/* 🪤 env() БЕЗ резервна стойност изхвърля цялата декларация в браузър,
	   който не я познава — губи се и пълнежът. */
	padding: 12px var(--ivo-sf-pad) calc(12px + env(safe-area-inset-bottom, 0px));
	background: #fff;
	box-shadow: 0 -6px 18px rgba(0, 0, 0, .1);
}
.ivo-sf-apply {
	display: block;
	margin: 0;
	width: 100%;
	padding: 15px 18px;
	border: 0;
	border-radius: 99px;
	background: var(--ivo-sf-ink);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}
.ivo-sf-apply:hover { opacity: .9; }

/* ---------- ВРЪЗКИ КЪМ ФИЛТРИТЕ (за търсачките и за клиента) ---------- */
.ivo-sf-hub {
	margin: 34px 0 6px;
	padding-top: 22px;
	border-top: 1px solid var(--ivo-sf-line);
}
.ivo-sf-hub-block + .ivo-sf-hub-block { margin-top: 16px; }
.ivo-sf-hub-title {
	display: block;
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ivo-sf-muted);
}
.ivo-sf-hub ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ivo-sf-hub li { margin: 0; padding: 0; }
.ivo-sf-hub li a {
	display: inline-block;
	padding: 7px 13px;
	border: 1px solid var(--ivo-sf-line);
	border-radius: 99px;
	background: #fff;
	font-size: 12.5px;
	color: var(--ivo-sf-ink);
	text-decoration: none;
}
.ivo-sf-hub li a:hover { border-color: var(--ivo-sf-ink); background: var(--ivo-sf-soft); }

/* ---------- широк екран ----------
   🪤 09.09.2026 (nimed): тук първо имаше `position:sticky` + `max-height` +
   `overflow-y:auto`. При екран 1611×830 сайдбарът е по-висок от екрана и
   382px от филтъра оставаха недостижими зад вътрешен скрол. Лепкав сайдбар,
   ПО-ВИСОК от екрана, е капан. Затова се скролва заедно със страницата. */
/* Празна текстова джаджа (шорткодът „Тематика" не връща нищо извън категория)
   — заглавие без съдържание. На 7-те сайта я маха изходният буфер; това
   правило е за tuasolea.bg, където буферът е на темата.
   🪤 Ако браузърът не знае `:has()`, правилото просто отпада — джаджата остава
      както е днес, нищо не се чупи. */
#shop-sidebar .widget_custom_html:has(> .textwidget:empty) { display: none; }

/* ---------- ТЕЛЕФОН ----------
   Бутонът „Филтър" беше само икона и ситен текст — не приличаше на бутон и
   не казваше колко модела чакат зад него. */
@media (max-width: 849px) {
	/* 🪤 `width:100%` е задължително: Flatsome свива реда до съдържанието му
	   (измерено 129px в колона от 400px), заради което чиповете падаха ПОД
	   бутона в тясна колонка вместо да застанат до него. */
	.category-filtering.category-filter-row {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		gap: 9px;
		padding: 0 0 14px;
		text-align: left;
	}
	/* Тук е единственото място, където този брой се вижда — виж бележката горе. */
	.ivo-sf-count { display: block; }
	.ivo-sf-chips { display: block; margin: 0 0 14px; padding: 0; border: 0; }
	.category-filtering .filter-button {
		display: inline-flex !important;
		align-items: center;
		gap: 8px;
		padding: 11px 18px;
		border-radius: 99px;
		background: var(--ivo-sf-ink) !important;
		color: #fff !important;
		font-size: 13px;
		letter-spacing: .04em;
		line-height: 1;
		text-decoration: none;
	}
	.category-filtering .filter-button i,
	.category-filtering .filter-button strong { color: #fff !important; font-weight: 700; }
	.category-filtering .filter-button i { font-size: 15px; }
	.ivo-sf-badge {
		display: inline-block;
		margin-left: 2px;
		padding: 2px 7px;
		border-radius: 99px;
		/* Тъмно, а не полупрозрачно бяло: върху зеленото на .it/.ro/.de/.es
		   бялото върху бяло-22% дава 2.77:1 — нечетимо. */
		background: rgba(0, 0, 0, .3);
		font-size: 11px;
		font-weight: 700;
	}
	/* Не "display:contents": при елементи със своя роля част от екранните
	   четци губят семантиката, а тук същото се постига с обикновен flex. */
	.category-filtering .inline-block { display: flex; align-items: center; gap: 9px; }
	.category-filtering .widget_layered_nav_filters { margin: 0; }
	/* Чиповете вече имат СВОЙ ред над решетката (виж ivo-sf-chips). Тук ги
	   махаме, за да не се повтарят и да не се смачкват в 30%-овата колонка. */
	.category-filtering .inline-block .widget_layered_nav_filters { display: none; }
	.category-filtering .widget_layered_nav_filters ul {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	/* Чекмеджето на Flatsome е БЕЗ фон — продуктите прозираха през филтрите. */
	#shop-sidebar { background: #fff; padding: var(--ivo-sf-pad) var(--ivo-sf-pad) 40px; min-height: 100%; overflow-x: hidden; }
	#shop-sidebar .ivo-sf-kind-size li a { min-width: 52px; padding: 13px 12px; }
	/* Чекмеджето е 300px: при две колони „Тъмнокафяв" се режеше. По-дребен
	   шрифт и мостра — вместо да махаме броя. */
	#shop-sidebar .ivo-sf-kind-color li { gap: 7px; padding: 6px 3px; }
	#shop-sidebar .ivo-sf-kind-color li a { font-size: 11.5px; }
	#shop-sidebar .ivo-sf-kind-color .count { font-size: 10px; }
	#shop-sidebar .ivo-sf-kind-color .ux-swatch__color { width: 17px; height: 17px; }
}

/* ---------- КЛАВИАТУРА ----------
   Филтрите са мрежа от връзки и един бутон. Flatsome нулира очертанието на
   връзките, тоест без тези правила човек, който се движи с Tab, няма никаква
   представа къде се намира. Обратната връзка при мишка (:hover) не върши
   тази работа.
   🪤 Върху тъмен чип ринг в марковия цвят не се вижда — там е бял. */
#shop-sidebar .ivo-sf-attr a:focus-visible,
#shop-sidebar .product-categories a:focus-visible,
.widget.ivo-sf-active a:focus-visible,
.ivo-sf-chips a:focus-visible,
.ivo-sf-hub a:focus-visible,
.category-filtering .filter-button:focus-visible,
.ivo-sf-apply:focus-visible {
	outline: 2px solid var(--ivo-sf-ink);
	outline-offset: 2px;
	border-radius: 4px;
}
#shop-sidebar .ivo-sf-kind-size li.chosen a:focus-visible,
#shop-sidebar .ivo-sf-kind-insole li.chosen a:focus-visible,
.widget.ivo-sf-active li.chosen a:focus-visible,
.ivo-sf-chips li.chosen a:focus-visible,
.category-filtering .filter-button:focus-visible,
.ivo-sf-apply:focus-visible {
	outline-color: #fff;
	box-shadow: 0 0 0 4px var(--ivo-sf-ink);
}
/* Огледало на :hover — иначе фокусираният чип не се различава от останалите. */
#shop-sidebar .ivo-sf-kind-size li:focus-within,
#shop-sidebar .ivo-sf-kind-insole li:focus-within { border-color: var(--ivo-sf-ink); }
#shop-sidebar .ivo-sf-kind-color li:focus-within { background: var(--ivo-sf-soft); }

/* ---------- уважаваме по-малко движение ---------- */
@media (prefers-reduced-motion: reduce) {
	#shop-sidebar *, .category-filtering *, .ivo-sf-chips *, .ivo-sf-hub *, .ivo-sf-apply {
		transition: none !important;
		animation: none !important;
	}
}