/* Component: filters — catalogue layout, filter sidebar, sort, results bar, pagination
   (design-reference/canvas/Catalogue.dc.html). */

/* Page head */
.mx-catalogue-head { padding-top: var(--mx-space-8); }
.mx-catalogue-head__row {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
	gap: var(--mx-space-4);
	margin-top: var(--mx-space-4);
	padding-bottom: var(--mx-space-6);
	border-bottom: 1px solid var(--mx-line);
}
.mx-catalogue-head__copy { display: flex; flex-direction: column; gap: var(--mx-space-2); min-width: 0; }
.mx-catalogue-head__title { font-size: 48px; line-height: 1.08; }
.mx-catalogue-head__lead { margin: 0; font-size: 17px; color: var(--mx-ink-soft); max-width: 40em; }

.mx-sort { display: flex; align-items: center; gap: var(--mx-space-2); }
.mx-sort__label { font-size: var(--mx-text-md); color: var(--mx-ink-soft); }

/* Two-column layout */
.mx-catalogue {
	display: flex; flex-wrap: wrap; align-items: flex-start;
	gap: var(--mx-space-8);
	padding-top: 28px; padding-bottom: 80px;
}
.mx-catalogue__results { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: var(--mx-space-5); }
.mx-catalogue__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mx-space-2); }
.mx-catalogue__count { font-size: var(--mx-text-md); color: var(--mx-ink-soft); margin-right: var(--mx-space-2); }
.mx-product-grid--catalogue { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* Filter sidebar */
.mx-filters { flex: 1 1 240px; max-width: 280px; min-width: 220px; }
.mx-filters__toggle { display: none; }
.mx-filters__form { display: flex; flex-direction: column; gap: var(--mx-space-6); }
.mx-filters__head { display: flex; justify-content: space-between; align-items: center; }
.mx-filters__title { font-size: 17px; color: var(--mx-forest); }
.mx-filters__clear { font-size: var(--mx-text-sm); font-weight: 600; }
.mx-filters__group {
	margin: 0; padding: 0 0 var(--mx-space-5);
	border: 0; border-bottom: 1px solid var(--mx-line-soft);
	display: flex; flex-direction: column; gap: var(--mx-space-1);
}
.mx-filters__legend { padding: 0 0 var(--mx-space-2); font-size: var(--mx-text-md); font-weight: 600; color: var(--mx-ink); }
.mx-filters__option { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: var(--mx-text-md); color: var(--mx-header-link); cursor: pointer; }
.mx-filters__option input { width: 18px; height: 18px; accent-color: var(--mx-leaf); flex: 0 0 auto; }
.mx-filters__count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 22px; height: 22px; padding: 0 6px; margin-left: var(--mx-space-2);
	border-radius: 11px; background: var(--mx-leaf); color: var(--mx-white);
	font-size: 12px; font-weight: 700;
}

/* Active filter chip */
.mx-chip--active { gap: 6px; min-height: 32px; padding: 0 6px 0 var(--mx-space-3); background: var(--mx-leaf-tint); font-size: var(--mx-text-sm); }
.mx-chip__remove {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border-radius: 50%;
	color: var(--mx-forest); text-decoration: none; font-size: 16px; line-height: 1;
}
.mx-chip__remove:hover { background: var(--mx-white); color: var(--mx-forest); }

/* Pagination */
.mx-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mx-space-2); padding-top: var(--mx-space-4); }
.mx-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: var(--mx-touch); height: var(--mx-touch); padding: 0 var(--mx-space-3);
	border: 1px solid var(--mx-line-strong); border-radius: var(--mx-radius);
	color: var(--mx-forest); text-decoration: none; font-weight: 500;
}
.mx-pagination .page-numbers.current { background: var(--mx-forest); border-color: var(--mx-forest); color: var(--mx-white); font-weight: 600; }
.mx-pagination a.page-numbers:hover { background: var(--mx-sage); }

/* Empty state */
.mx-empty { padding: var(--mx-space-10); border: 1px dashed var(--mx-line-strong); border-radius: var(--mx-radius-xl); display: flex; flex-direction: column; gap: var(--mx-space-3); }
.mx-empty__title { font-size: var(--mx-h4); }
.mx-empty p { margin: 0; color: var(--mx-ink-soft); }

/* Phones / small tablets: filters fold into a button above the results */
@media (max-width: 900px) {
	.mx-catalogue { gap: var(--mx-space-4); padding-top: var(--mx-space-4); }
	.mx-filters { flex: 1 1 100%; max-width: none; min-width: 0; }
	.mx-filters__toggle {
		display: inline-flex; align-items: center;
		min-height: var(--mx-touch); padding: 0 var(--mx-space-4);
		border: 1.5px solid var(--mx-forest); border-radius: var(--mx-radius);
		color: var(--mx-forest); font-weight: 600; cursor: pointer;
		list-style: none;
	}
	.mx-filters__toggle::-webkit-details-marker { display: none; }
	.mx-filters[open] .mx-filters__toggle { background: var(--mx-forest); color: var(--mx-white); }
	.mx-filters[open] .mx-filters__form {
		margin-top: var(--mx-space-3); padding: var(--mx-space-5);
		border: 1px solid var(--mx-line); border-radius: var(--mx-radius-lg); background: var(--mx-sage-soft);
	}
	.mx-filters__head { display: none; }
}
@media (max-width: 720px) {
	.mx-catalogue-head__title { font-size: var(--mx-h1); }
	.mx-catalogue-head__lead { font-size: var(--mx-text-base); }
	.mx-sort { width: 100%; }
	.mx-sort .mx-select { flex: 1 1 auto; }
	.mx-product-grid--catalogue { grid-template-columns: minmax(0, 1fr); }
}