/* Start:/local/templates/pennington-2.0/components/bitrix/catalog.smart.filter/.default/style.css?178357623017314*/
/* ============================================================
 * Pennington 2.0 — умный фильтр (bitrix:catalog.smart.filter), ДС-стили.
 * Штатная разметка bx-filter-* сохранена (её адресует JCSmartFilter/BX.Iblock.SmartFilter),
 * весь ВИД задаётся здесь под дизайн-систему. Bitrix bootstrap/font-awesome/тема НЕ грузятся.
 * Слайдер цены — на CSS (без картинок-хендлов), позиции ставит JS через left/right %.
 * Удалены неиспользуемые куски штатного стиля: горизонтальный режим, темы, мобильный
 * попап-оверлей, зависимости от bootstrap-сетки.
 * ============================================================ */

/* ── Контейнер-сайдбар ─────────────────────────────────────── */
.bx-filter {
	font-family: var(--font-base);
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg, 14px);
	overflow: hidden;
	align-self: start;
}
.bx-filter * { box-sizing: border-box; }
/* Bootstrap-сетка НЕ грузится: .row/.container-fluid/.col-* — пустые классы.
 * Ничего не сбрасываем «по [class*=col-]»: такое правило (специфичность 0,2,0)
 * перебивало бы наши одноклассовые padding у .bx-filter-title/-parameters-box/
 * -button-box (0,1,0) и прижимало контент к краям карточки. */
.bx-filter .container-fluid,
.bx-filter .row { margin: 0; padding: 0; }
.bx-filter .smartfilter { margin: 0; }

/* ── Заголовок «Фильтры» + «Сбросить» (+ ✕ в мобильном drawer) ── */
.bx-filter-title {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--border);
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--ink);
}
.bx-filter-title-text { margin-right: auto; }   /* заголовок слева, сброс/✕ — вправо */
.bx-filter-reset {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--g2);
	text-decoration: none;
	cursor: pointer;
}
.bx-filter-reset:hover { text-decoration: underline; }
/* ✕ закрытия — только в мобильном drawer (на десктопе скрыта). */
.bx-filter-close {
	display: none;
	appearance: none;
	border: none; background: none; cursor: pointer;
	padding: 2px; margin: -2px -4px -2px 0;
	color: var(--ink-faint); line-height: 0;
}
.bx-filter-close:hover { color: var(--ink); }

/* ── Группа свойства (аккордеон) ───────────────────────────── */
.bx-filter-parameters-box {
	position: relative;
	padding: 0 18px;
	border-bottom: 1px solid var(--border);
}
.bx-filter-parameters-box-title {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 0 12px;
	cursor: pointer;                 /* заголовок кликабелен — сворачивает/разворачивает */
	user-select: none;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
}
.bx-filter-parameters-box-title > span,
.bx-filter-parameters-box-hint { display: inline-flex; align-items: center; gap: 8px; flex: 1; }
/* Шеврон свернуть/развернуть — прижат вправо; поворачивается в раскрытом состоянии (.bx-active). */
.bx-filter-angle {
	width: 8px; height: 8px;
	margin-left: auto;
	border-right: 2px solid var(--ink-faint);
	border-bottom: 2px solid var(--ink-faint);
	transform: rotate(45deg);        /* ▼ свёрнуто */
	transition: transform .2s ease;
	flex: none;
	font-style: normal;
}
.bx-filter-parameters-box.bx-active .bx-filter-angle {
	transform: rotate(-135deg);      /* ▲ раскрыто */
	margin-top: 4px;
}
/* иконка-подсказка */
.bx-filter-hint {
	display: inline-grid; place-items: center;
	width: 16px; height: 16px; border-radius: 50%;
	border: 1px solid var(--border-strong);
	font-size: 11px; font-style: normal; font-weight: 700;
	color: var(--ink-faint); cursor: help;
	flex: none;
}
/* тело группы: свёрнуто по умолчанию, раскрывается при .bx-active (аккордеон). */
.bx-filter-block {
	display: none;
	padding-bottom: 18px;
}
.bx-filter-parameters-box.bx-active .bx-filter-block { display: block; }
.bx-filter-parameters-box-container { position: relative; }
.bx-filter-container-modef { display: none; } /* инлайновый бейдж-счётчик per-box не используем */

/* ── Чекбоксы / радио ──────────────────────────────────────── */
.bx-filter .checkbox,
.bx-filter .radio { margin: 0 0 10px; }
.bx-filter .checkbox:last-child,
.bx-filter .radio:last-child { margin-bottom: 0; }
.bx-filter-param-label {
	display: flex;
	align-items: center;
	justify-content: space-between;   /* ДС: значение слева, число справа */
	gap: 12px;
	cursor: pointer;
	margin: 0;
	font-weight: 500;
}
/* у свотчей/дропдауна счётчика нет — прижимаем содержимое влево */
.bx-filter-param-btn-inline .bx-filter-param-label,
.bx-filter-param-btn-block .bx-filter-param-label,
.bx-filter-select-popup .bx-filter-param-label { justify-content: flex-start; }
.bx-filter-param-label.disabled { opacity: .4; cursor: default; }
/* число товаров у пункта — справа, серым, без скобок */
.bx-filter-count {
	flex: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-faint);
	font-variant-numeric: tabular-nums;
}
/* сам input прячем, рисуем ДС-квадратик */
.bx-filter-input-checkbox { display: flex; align-items: center; gap: 12px; position: relative; }
.bx-filter-input-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.bx-filter-input-checkbox::before {
	content: "";
	width: 22px; height: 22px; flex: none;
	border-radius: 7px;
	border: 1.5px solid var(--border-strong);
	background: var(--surface);
	background-position: center;
	background-repeat: no-repeat;
	transition: background .18s, border-color .18s;
}
/* галочка через svg-data-uri, показывается когда input:checked */
.bx-filter-input-checkbox:has(input:checked)::before,
.bx-filter-param-label.bx-active .bx-filter-input-checkbox::before {
	background-color: var(--g2);
	border-color: var(--g2);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
/* радио — круглый вариант */
.bx-filter .radio .bx-filter-input-checkbox::before { border-radius: 50%; }
.bx-filter-param-text {
	font-size: 14px;
	color: var(--ink-soft);
	line-height: 1.35;
}
.bx-filter-param-text span[data-role^="count_"] { color: var(--ink-faint); font-size: 12px; }

/* ── Чипы (ДС: размеры и т.п. — кнопки-плитки) ─────────────── */
.bx-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bx-filter-chip {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px;
	padding: 9px 12px;
	border: 1.5px solid var(--border-strong);
	border-radius: 10px;
	background: var(--surface);
	font-size: 14px; font-weight: 600; color: var(--ink);
	cursor: pointer; user-select: none;
	transition: border-color .15s, background .15s, color .15s;
}
.bx-filter-chip input { display: none; }
.bx-filter-chip:hover { border-color: var(--ink-faint); }
.bx-filter-chip:has(input:checked),
.bx-filter-chip.bx-active {
	border-color: var(--g2);
	background: var(--g-soft);
	color: var(--g2);
}
.bx-filter-chip.disabled { opacity: .4; cursor: default; pointer-events: none; }

/* ── Цвет-свотчи (CHECKBOXES_WITH_PICTURES[_AND_LABELS]) ────── */
.bx-filter-param-btn-inline,
.bx-filter-param-btn-block { display: flex; flex-wrap: wrap; gap: 10px; }
.bx-filter-param-btn-block { flex-direction: column; }
.bx-filter-param-btn-block .bx-filter-param-label { gap: 10px; }
.bx-color-sl {
	display: inline-block;
	width: 30px; height: 30px;
	border-radius: 50%;
	border: 1px solid rgba(17,21,26,.14);
	background: var(--well);
	transition: box-shadow .18s, transform .18s var(--spring);
	overflow: hidden;
}
.bx-filter-btn-color-icon { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; border-radius: 50%; }
.bx-filter-param-label.bx-active .bx-color-sl {
	box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--g2);
	transform: scale(1.05);
}

/* ── Дропдаун (свой селект) ────────────────────────────────── */
.bx-filter-select-container { position: relative; }
.bx-filter-select-block {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	border: 1.5px solid var(--border-strong);
	border-radius: var(--r-md, 12px);
	background: var(--surface);
	cursor: pointer;
	font-size: 14px;
}
.bx-filter-select-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-filter-select-arrow {
	width: 8px; height: 8px; flex: none;
	border-right: 2px solid var(--ink-faint);
	border-bottom: 2px solid var(--ink-faint);
	transform: rotate(45deg); margin-top: -3px;
}
.bx-filter-select-popup {
	position: absolute; z-index: 30;
	top: calc(100% + 6px); left: 0; right: 0;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-md, 12px);
	box-shadow: var(--sh-lg);
	padding: 6px;
	max-height: 280px; overflow: auto;
}
.bx-filter-select-popup ul { list-style: none; margin: 0; padding: 0; }
.bx-filter-select-popup li { margin: 0; }
.bx-filter-select-popup .bx-filter-param-label {
	padding: 10px 12px; border-radius: 9px; font-weight: 500; color: var(--ink-soft);
}
.bx-filter-select-popup .bx-filter-param-label:hover { background: var(--surface-2); color: var(--g2); }
.bx-filter-select-popup .bx-filter-param-label.selected { color: var(--g2); font-weight: 700; }
.bx-filter-select-popup .bx-filter-param-label.disabled { opacity: .4; }
.bx-filter-btn-color-icon.all { display: none; }

/* ── Цена / числовой диапазон (ДС): слайдер сверху, min/max — текстом ── */
/* Контейнер — flex-wrap; слайдер выносим первым на всю ширину, «от»/«до» строкой под ним. */
.bx-filter-parameters-box-container { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
.bx-filter-parameters-box-container > .col-xs-12 { flex-basis: 100%; }
.bx-ui-slider-track-container { order: -1; flex-basis: 100%; }

.bx-filter-parameters-box-container-block {
	flex: 0 0 auto;
	display: flex; align-items: baseline; gap: 5px;
	min-width: 0;
}
.bx-filter-parameters-box-container-block.bx-right { margin-left: auto; } /* «до …» — вправо */
.bx-ft-sub {
	font-size: 15px; font-style: normal; font-weight: 700;
	color: var(--ink-faint);
}
.bx-left .bx-ft-sub { display: none; }                 /* у min префикса нет */

.bx-filter-input-container { display: inline-flex; align-items: baseline; }
/* поля диапазона (min-price/max-price) — как текст, без рамки */
.min-price, .max-price {
	border: none; background: none; padding: 0;
	font: inherit; font-size: 15px;
	color: var(--ink-faint); outline: none; text-align: left;
	width: 6ch;
}
.min-price:focus, .max-price:focus { color: var(--g2); }
/* «до …» — жирным тёмным + суффикс ₽ */
.bx-right .bx-ft-sub { color: var(--ink); }
.bx-right .max-price { color: var(--ink); font-weight: 800; text-align: right; width: 6.5ch; }
.bx-right .bx-filter-input-container::after {
	content: '₽'; margin-left: 5px; font-size: 15px; font-weight: 800; color: var(--ink);
}
/* деления шкалы прячем (ДС) */
.bx-ui-slider-part { display: none; }

/* календарь (CALENDAR) — оставляем в рамке */
.bx-filter-input-container .calendar {
	width: 100%;
	border: 1.5px solid var(--border-strong);
	border-radius: var(--r-md, 12px);
	padding: 10px 12px;
	font: inherit; font-size: 14px;
	color: var(--ink); background: var(--surface); outline: none;
}
.bx-filter-input-container .calendar:focus { border-color: var(--g2); box-shadow: 0 0 0 4px rgba(227,30,36,.12); }

/* ── Слайдер цены (CSS, без картинок; позиции ставит BX.Iblock.SmartFilter) ── */
.bx-ui-slider-track-container { padding: 8px 9px 16px; }
.bx-ui-slider-track {
	position: relative;
	height: 4px;
	border-radius: 999px;
	background: var(--well);
}
/* доступный/активный диапазон (JS задаёт left/right в %) */
.bx-ui-slider-pricebar-vd,
.bx-ui-slider-pricebar-vn { position: absolute; top: 0; height: 4px; }
.bx-ui-slider-pricebar-v {
	position: absolute; top: 0; height: 4px;
	background: var(--g2);
	border-radius: 999px;
}
.bx-ui-slider-range { position: absolute; top: 0; height: 4px; }
.bx-ui-slider-handle {
	position: absolute; top: 50%;
	width: 18px; height: 18px;
	margin-top: -9px;
	border-radius: 50%;
	background: var(--g2);
	border: 3px solid var(--surface);
	box-shadow: 0 1px 5px rgba(227,30,36,.45);
	cursor: pointer;
	z-index: 2;
}
.bx-ui-slider-handle.left { margin-left: -9px; }
.bx-ui-slider-handle.right { margin-right: -9px; }
/* подписи цен под шкалой */
.bx-ui-slider-part {
	position: absolute; top: 12px;
	font-size: 11px; color: var(--ink-faint); white-space: nowrap;
}
.bx-ui-slider-part span { position: relative; left: -50%; }
.bx-ui-slider-part.p1 { left: 0; } .bx-ui-slider-part.p1 span { left: 0; }
.bx-ui-slider-part.p2 { left: 25%; }
.bx-ui-slider-part.p3 { left: 50%; }
.bx-ui-slider-part.p4 { left: 75%; }
.bx-ui-slider-part.p5 { left: 100%; } .bx-ui-slider-part.p5 span { left: -100%; }

/* ── Футер: «Показать» + попап-счётчик («Сбросить» перенесён в шапку) ── */
.bx-filter-button-box { padding: 18px; }
.bx-filter-button-box .bx-filter-block { display: block; padding: 0; }
/* футерный контейнер — обычный блок (не flex, как у групп) */
.bx-filter-button-box .bx-filter-parameters-box-container { display: block; }
#set_filter {
	appearance: none;
	width: 100%;
	border: none; cursor: pointer;
	background: var(--swoosh);
	color: #fff;
	font: inherit; font-weight: 700; font-size: 15px;
	padding: 14px 20px;
	border-radius: var(--r-md, 12px);
	box-shadow: 0 10px 22px rgba(227,30,36,.3);
	transition: filter .15s;
}
#set_filter:hover { filter: brightness(1.05); }
/* счётчик в кнопке «Показать N» */
#set_filter #modef_num { font-weight: 800; opacity: .9; }
#set_filter #modef_num:empty { display: none; }
/* ДС: сброс живёт в шапке (.bx-filter-reset), нижний штатный #del_filter скрыт,
 * но остаётся в DOM как рабочая submit-цель для клика по «Сбросить». */
#del_filter { display: none; }
/* Служебный #modef нужен JCSmartFilter (обновляет #modef_num и ajax-URL), но визуально
 * не показываем — иначе в не-instant режиме JS раскрывает его (display:inline-block)
 * и вставляет в группу фильтра лишнюю плашку. Держим скрытым принудительно. */
#modef { display: none !important; }
.clb, .clr { clear: both; }

/* ── Мобильный off-canvas: фильтр выезжает слева по клику на «Фильтры» (ДС) ── */
@media (max-width: 900px) {
	.bx-filter[data-filter-drawer] {
		position: fixed;
		top: 0; left: 0; bottom: 0;
		width: min(88vw, 380px);
		height: 100%;
		margin: 0;
		border: none;
		border-radius: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateX(-100%);
		transition: transform .3s ease;
		z-index: 1300;                         /* выше .overlay базового шаблона */
		box-shadow: var(--sh-lg, 0 18px 40px rgba(17,21,26,.18));
	}
	.bx-filter[data-filter-drawer].is-open { transform: none; }
	/* ✕ показываем только в drawer */
	.bx-filter-close { display: inline-flex; align-items: center; }
	/* «Показать N» прилипает к низу drawer */
	.bx-filter-button-box {
		position: sticky;
		bottom: 0;
		background: var(--surface);
		border-top: 1px solid var(--border);
	}
}

/* End */
/* /local/templates/pennington-2.0/components/bitrix/catalog.smart.filter/.default/style.css?178357623017314 */