/* SellingIt product category browse — search + filters */

body.sellingit-category-browse {
	background: #eaeded;
}

body.sellingit-category-browse #main {
	padding-bottom: 5.5rem;
}

.si-cat-filters {
	margin: 0 0 1.25rem;
	padding: 1rem 1.1rem 0.85rem;
	background: #fff;
	border: 1px solid #d5dbdb;
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}

.si-cat-filters *,
.si-cat-filters *::before,
.si-cat-filters *::after {
	box-sizing: border-box;
}

.si-cat-filters__form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.si-cat-filters__search-row {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
}

.si-cat-filters__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 0.9rem;
	border: 2px solid #111827;
	border-radius: 4px 0 0 4px;
	font-size: 1rem;
	color: #0f172a;
	background: #fff;
}

.si-cat-filters__input:focus {
	outline: none;
	border-color: #0f766e;
	box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.18);
}

.si-cat-filters__submit {
	flex: 0 0 auto;
	height: 44px;
	padding: 0 1.15rem;
	margin-left: -2px;
	border: 2px solid #111827;
	border-radius: 0 4px 4px 0;
	background: #0f766e;
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
}

.si-cat-filters__submit:hover {
	background: #0d9488;
}

.si-cat-filters__advanced {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.65rem 0.85rem;
}

.si-cat-filters__field {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 9rem;
}

.si-cat-filters__field label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #565959;
}

.si-cat-filters__field select,
.si-cat-filters__field--range input {
	height: 38px;
	padding: 0 0.6rem;
	border: 1px solid #c5cbd1;
	border-radius: 4px;
	background: #fff;
	color: #0f172a;
	font-size: 0.9rem;
}

.si-cat-filters__field--range {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.35rem 0.45rem;
	min-width: 0;
}

.si-cat-filters__field--range label {
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.8rem;
}

.si-cat-filters__field--range input {
	width: 5.5rem;
}

.si-cat-filters__check {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 38px;
	font-size: 0.9rem;
	font-weight: 600;
	color: #0f172a;
	cursor: pointer;
	user-select: none;
}

.si-cat-filters__check input {
	width: 1.05rem;
	height: 1.05rem;
	accent-color: #0f766e;
}

.si-cat-filters__apply {
	height: 38px;
	padding: 0 0.95rem;
	border: none;
	border-radius: 4px;
	background: #111827;
	color: #fff;
	font-weight: 700;
	font-size: 0.88rem;
	cursor: pointer;
}

.si-cat-filters__apply:hover {
	background: #1f2937;
}

.si-cat-filters__clear {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 0.35rem;
	color: #0f766e !important;
	font-weight: 700;
	font-size: 0.88rem;
	text-decoration: underline !important;
}

.si-cat-filters__chips-wrap {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.85rem;
	padding-top: 0.75rem;
	border-top: 1px solid #e5e7eb;
	min-width: 0;
	max-width: 100%;
}

.si-cat-filters__chips-label {
	flex: 0 0 auto;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #565959;
	padding-right: 0.15rem;
}

.si-cat-filters__chips-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid #d5dbdb;
	border-radius: 999px;
	background: #fff;
	color: #0f172a;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.si-cat-filters__chips-btn:hover {
	border-color: #0f766e;
	color: #0f766e;
}

.si-cat-filters__chips-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.si-cat-filters__chips-btn[hidden] {
	display: none !important;
}

.si-cat-filters__chips {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.4rem;
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: #94a3b8 transparent;
	padding: 0.15rem 0.15rem 0.35rem;
	scroll-padding-inline: 0.25rem 1rem;
}

.si-cat-filters__chips::-webkit-scrollbar {
	height: 6px;
}

.si-cat-filters__chips::-webkit-scrollbar-thumb {
	background: #94a3b8;
	border-radius: 999px;
}

.si-cat-filters__chips a {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.4rem 0.75rem;
	border: 1px solid #d5dbdb;
	border-radius: 999px;
	background: #f8fafc;
	color: #0f172a !important;
	text-decoration: none !important;
	font-size: 0.86rem;
	font-weight: 600;
	white-space: nowrap;
}

.si-cat-filters__chips a em {
	font-style: normal;
	font-weight: 700;
	color: #64748b;
	font-size: 0.78rem;
}

.si-cat-filters__chips a:hover {
	border-color: #0f766e;
	color: #0f766e !important;
}

.si-cat-filters__chips a.is-active {
	background: #111827;
	border-color: #111827;
	color: #fff !important;
}

.si-cat-filters__chips a.is-active em {
	color: #cbd5e1;
}

.si-cat-filters__status {
	margin: 0.65rem 0 0;
	font-size: 0.86rem;
	color: #565959;
}

.si-cat-filters__chips::after {
	content: "";
	flex: 0 0 1rem;
}

@media (max-width: 720px) {
	.si-cat-filters {
		margin: 0 0 1rem;
		padding: 0.85rem 0.75rem 0.75rem;
		border-radius: 0;
		border-left: none;
		border-right: none;
	}

	.si-cat-filters__search-row {
		flex-direction: column;
	}

	.si-cat-filters__input,
	.si-cat-filters__submit {
		width: 100%;
		border-radius: 4px;
		margin-left: 0;
	}

	.si-cat-filters__submit {
		height: 46px;
	}

	.si-cat-filters__advanced {
		gap: 0.55rem;
	}

	.si-cat-filters__field {
		flex: 1 1 100%;
	}

	.si-cat-filters__field select {
		width: 100%;
		height: 42px;
	}

	.si-cat-filters__field--range {
		width: 100%;
	}

	.si-cat-filters__field--range input {
		flex: 1 1 auto;
		width: auto;
		min-width: 4.5rem;
		height: 42px;
	}

	.si-cat-filters__apply,
	.si-cat-filters__check {
		min-height: 42px;
	}

	.si-cat-filters__chips a {
		min-height: 40px;
		padding: 0.5rem 0.85rem;
	}

	.si-cat-filters__chips-btn {
		width: 2.25rem;
		height: 2.25rem;
	}
}
