/* Каталог: категория, магазин, поиск по товарам (DESIGN.md, «Страницы → Каталог»).
   Только раскладка компонентов main.css (.chips, .chip, .cards, .btn, поля, .empty, .prose) и свои блоки:
   колонка фильтров / шторка на телефоне, двойной ползунок, панель сортировки.
   База — телефон; с 901px фильтры — колонка слева. */

/* ================================================================
   Заголовок, подкатегории
   ================================================================ */
.catalog__head { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.catalog__heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); }
.catalog__total { color: var(--dim); font-size: var(--t-sm); line-height: var(--lh-sm); white-space: nowrap; }

/* ================================================================
   Раскладка: фильтры слева, выдача справа
   ================================================================ */
.catalog__main { min-width: 0; container: results / inline-size; scroll-margin-top: var(--sp-5); }
.catalog__main.is-loading { opacity: .5; pointer-events: none; }
@media (min-width: 901px) {
	/* 256px: самые длинные значения («Нержавіюча сталь», «M13.5x1L») в одну строку со счётчиком */
	.catalog__layout { display: grid; grid-template-columns: calc(4 * var(--sp-8)) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
	/* фильтров нет (пустой поиск, выдача без фасетов) — выдача на всю ширину, а не в колонку 256px */
	.catalog__layout > .catalog__main:first-child { grid-column: 1 / -1; }
}

/* ================================================================
   Панель над товарами: «Фільтри · N» (телефон), применённые фильтры, сортировка
   ================================================================ */
.toolbar { display: flex; gap: var(--sp-2); align-items: center; }
/* сортировке шире: «За замовчуванням» в половину экрана телефона не помещается */
.toolbar__filters { flex: 2 1 0; min-width: 0; }
.toolbar__n { color: var(--muted); font-weight: 400; white-space: pre; }
.sort { display: flex; flex: 3 1 0; align-items: center; justify-content: flex-end; gap: var(--sp-3); min-width: 0; }
.sort__label { color: var(--muted); font-size: var(--t-sm); white-space: nowrap; }
.sort__select { width: 100%; min-height: 44px; padding-right: var(--sp-6); }
.catalog__applied { align-items: center; margin-top: var(--sp-4); }
.catalog__reset { display: inline-flex; align-items: center; min-height: 36px; font-size: var(--t-sm); text-decoration-line: underline; text-decoration-color: var(--line-input); }
.catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--sp-5); }
.catalog__main > .empty { margin-top: var(--sp-5); padding-top: 0; }
.catalog__cats { margin-top: var(--sp-2); } /* как .empty .row: отступ от подсказки до действий */

/* Сетка 2 / 3 / 4 по ширине самой выдачи, а не окна: рядом с колонкой фильтров места меньше,
   и четыре карточки уже 200px не влезают раньше 1232px окна. */
@container results (min-width: 560px) {
	.catalog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container results (min-width: 880px) {
	.catalog__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	/* липкая полоса «Фільтри · N» + сортировка: доступна, пока листаешь товары */
	.toolbar {
		position: sticky; top: 0; z-index: 20;
		margin-inline: calc(-1 * var(--gutter)); padding: var(--sp-2) var(--gutter);
		background: var(--bg); border-block: 1px solid var(--line);
	}
	.sort__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.catalog__applied { margin-top: var(--sp-3); }
	.catalog__grid { margin-top: var(--sp-4); }
}
@media (min-width: 901px) {
	/* применённые фильтры слева, сортировка справа — одной строкой над сеткой */
	.catalog__main { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-5); align-items: center; }
	.catalog__main > * { grid-column: 1 / -1; }
	.catalog__main > .toolbar { grid-column: 2; grid-row: 1; min-height: 44px; }
	.catalog__main > .catalog__applied { grid-column: 1; grid-row: 1; margin-top: 0; }
	.toolbar__filters { display: none; }
	.sort__select { width: auto; }
}

/* ================================================================
   Фильтры: колонка (десктоп) / шторка (телефон)
   ================================================================ */
.filters__head { display: none; }
.filters__title { font-size: var(--t-lg); line-height: var(--lh-lg); }
.filters__form { display: flex; flex-direction: column; }

.facet { border-bottom: 1px solid var(--line); }
.facet__title {
	display: flex; align-items: center; gap: var(--sp-2); min-height: 48px; padding-block: var(--sp-2);
	color: var(--fg); font-size: var(--t-sm); font-weight: 600; line-height: var(--lh-sm);
	cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
.facet__title::-webkit-details-marker { display: none; }
.facet__title::after { content: "+"; flex-shrink: 0; width: var(--sp-5); margin-left: auto; color: var(--muted); font-size: var(--t-lg); font-weight: 400; line-height: 1; text-align: center; }
.facet[open] > .facet__title::after { content: "−"; }
/* сколько значений выбрано в свёрнутом фасете — видно без раскрытия */
.facet__picked {
	min-width: var(--sp-5); padding: 0 var(--sp-1); background: var(--s2); border-radius: var(--r);
	color: var(--fg); font-size: var(--t-xs); line-height: var(--sp-5); text-align: center;
}
.facet__body { padding-bottom: var(--sp-4); }
.facet__list { margin: 0; padding: 0; list-style: none; }
.facet__search[type="search"] { width: 100%; margin-bottom: var(--sp-2); }

/* значение фасета: нативный чекбокс/radio, название, число товаров */
.check {
	display: grid; grid-template-columns: var(--sp-5) minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center;
	min-height: 36px; color: var(--fg-2); font-size: var(--t-sm); line-height: 1.3; cursor: pointer;
}
.check input { justify-self: start; }
.check input:checked ~ .check__name { color: var(--fg); font-weight: 500; }
.check__count { color: var(--dim); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
/* отмечено, но при других фильтрах товаров ноль — видно, что значение «пустое» */
.check.is-empty input:checked ~ .check__name { color: var(--dim); } /* сильнее правила :checked выше */
.facet__more-btn {
	display: inline-flex; align-items: center; min-height: 36px; margin-top: var(--sp-1);
	color: var(--fg-2); font-size: var(--t-sm); text-decoration-line: underline; text-decoration-color: var(--line-input);
	text-underline-offset: .2em; cursor: pointer; list-style: none;
}
.facet__more-btn::-webkit-details-marker { display: none; }
.facet__more[open] > .facet__more-btn { display: none; }
@media (pointer: coarse) {
	.check, .facet__more-btn, .catalog__reset { min-height: 44px; }
}

/* двойной ползунок: два input[type=range] друг на друге, тянутся только «ручки» */
.range { --th: var(--sp-4); position: relative; height: var(--sp-6); margin-inline: calc(var(--th) / 2); }
.range::before, .range::after { content: ""; position: absolute; top: 50%; height: 2px; margin-top: -1px; }
.range::before { left: 0; right: 0; background: var(--line-2); }
.range::after { left: var(--lo, 0%); right: calc(100% - var(--hi, 100%)); background: var(--fg); }
.range input {
	position: absolute; z-index: 1; top: 50%; left: calc(var(--th) / -2);
	width: calc(100% + var(--th)); height: var(--th); margin: calc(var(--th) / -2) 0 0;
	background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.range input:focus { outline: none; }
.range input::-webkit-slider-runnable-track { height: var(--th); background: none; }
.range input::-moz-range-track { background: none; }
.range input::-webkit-slider-thumb {
	width: var(--th); height: var(--th); border: 0; border-radius: var(--r); background: var(--fg);
	pointer-events: auto; cursor: grab; -webkit-appearance: none; appearance: none;
}
.range input::-moz-range-thumb { width: var(--th); height: var(--th); border: 0; border-radius: var(--r); background: var(--fg); pointer-events: auto; cursor: grab; }
.range input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--a); outline-offset: 2px; }
.range input:focus-visible::-moz-range-thumb { outline: 2px solid var(--a); outline-offset: 2px; }
.range__out { display: block; margin-top: var(--sp-1); color: var(--fg-2); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
@media (pointer: coarse) {
	/* палец: ручка 24px, полоса выше */
	.range { --th: var(--sp-5); height: var(--sp-7); }
}

.filters__actions { display: flex; gap: var(--sp-2); padding-top: var(--sp-4); }
.filters__apply { flex: 1 1 auto; }
/* со скриптом галочки применяются сразу — кнопка нужна только шторке */
.catalog.is-js .filters__actions { display: none; }

/* Десктоп: колонка фильтров листается вместе со страницей. Липкая колонка с прокруткой внутри
   прятала 12 из 14 фасетов за незаметным скроллбаром; после смены фильтра catalog.js сам возвращает к товарам. */
@media (min-width: 901px) {
	.filters { margin-top: calc(-1 * var(--sp-2)); } /* первая строка фасета — вровень с панелью сортировки */
}

@media (max-width: 900px) {
	/* шторка на весь экран: со скриптом — класс на <html>, без него — переход по #catalog-filters */
	.filters { display: none; }
	.filters-open .filters, .filters:target {
		display: flex; flex-direction: column;
		position: fixed; inset: 0; z-index: 200; /* выше нижней навигации (100) */
		background: var(--bg);
	}
	.filters-open .filters__head, .filters:target .filters__head {
		display: flex; flex: none; align-items: center; justify-content: space-between;
		padding: var(--sp-2) var(--sp-1) var(--sp-2) var(--gutter); border-bottom: 1px solid var(--line);
	}
	.filters__form { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-inline: var(--gutter); }
	.filters__actions, .catalog.is-js .filters__actions {
		display: flex; position: sticky; z-index: 2; bottom: 0; margin: auto calc(-1 * var(--gutter)) 0; /* выше ручек ползунков */
		padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));
		background: var(--bg); border-top: 1px solid var(--line);
	}
	.facet:last-of-type { border-bottom: 0; }
	/* страница под шторкой не прокручивается; чат не закрывает кнопку «Показати» */
	html.filters-open, html:has(.filters:target) { overflow: hidden; }
	.filters-open .sc, html:has(.filters:target) .sc { display: none; }
}

/* ================================================================
   SEO-текст категории
   ================================================================ */
.catalog__seo { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
/* SEO-текст: ссылки на подкатегории — тихие, как список ссылок в .prose; оранжевый остаётся главной кнопке */
.catalog__seo a { color: var(--fg); text-decoration-color: var(--line-input); }
/* «Оберіть калібр:» — 9 ссылок подряд по 22px: каждая группа — цельная зона 46px, абзац читается списком */
.catalog__seo .tihon-calibres a { display: inline-block; padding-block: var(--sp-3); }

/* ================================================================
   Ховеры и движение
   ================================================================ */
@media (hover: hover) {
	.check:hover .check__name, .facet__title:hover { color: var(--fg); }
	.check:hover .check__name { text-decoration-line: underline; text-decoration-color: var(--line-input); }
	.facet__more-btn:hover, .catalog__reset:hover { color: var(--fg); text-decoration-color: var(--fg); }
	.facet__title:hover::after { color: var(--fg); }
}
@media (prefers-reduced-motion: no-preference) {
	.catalog__main { transition: opacity var(--dur) ease-out; }
}