/**
 * SJ Menu Manager — Simple shop category bar.
 */

.sjmm-category-bar {
	position: sticky;
	top: var(--sj-header-height, 60px);
	z-index: 990;
	background: var(--color-bg_secondary, #f8fafc);
	border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.admin-bar .sjmm-category-bar {
	top: calc(32px + var(--sj-header-height, 60px));
}

@media screen and (max-width: 782px) {
	.admin-bar .sjmm-category-bar {
		top: calc(46px + var(--sj-header-height, 60px));
	}
}

.sjmm-category-bar__inner {
	max-width: var(--content-width, 1200px);
	margin: 0 auto;
	padding: 0 1rem;
}

.sjmm-category-bar__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0.65rem 0;
}

.sjmm-category-bar__item {
	margin: 0;
}

.sjmm-category-bar__link {
	display: inline-block;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	color: var(--color-text_secondary, #475569);
	background: transparent;
	border: 1px solid transparent;
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
	white-space: nowrap;
}

.sjmm-category-bar__link:hover,
.sjmm-category-bar__link:focus-visible {
	color: var(--color-primary, #007cba);
	background: var(--color-bg_primary, #fff);
	border-color: var(--color-border, #e2e8f0);
}

.sjmm-category-bar__link.is-active {
	color: #fff;
	background: var(--color-primary, #007cba);
	border-color: var(--color-primary, #007cba);
}

@media (max-width: 768px) {
	.sjmm-category-bar__inner {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.sjmm-category-bar__inner::-webkit-scrollbar {
		display: none;
	}

	.sjmm-category-bar__list {
		flex-wrap: nowrap;
		padding: 0.55rem 0;
	}
}