/* ---- ③ カテゴリタブ ---- */
.cat-nav {
	background: var(--bg-subtle);
	padding: 32px 0;
}
.cat-nav__pills {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.cat-nav__pill {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 20px;
	font-size: 14px;
	font-weight: 600;
	color: #555;
	background: #fff;
	border: 1px solid var(--border-color);
	border-radius: 999px;
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.cat-nav__pill:hover {
	color: var(--text-primary);
	border-color: #ccc;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.cat-nav__pill--active,
.cat-nav__pill--active:hover,
.cat-nav__pill--active:focus,
.cat-nav__pill--active:active {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--btn-text, #fff);
	box-shadow: none;
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
	.cat-nav {
		padding: 12px 0;
		background: #fff;
		border-top: 1px solid var(--border-color);
		border-bottom: 1px solid var(--border-color);
	}
	.cat-nav .container { padding: 0; }
	.cat-nav__pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding: 0 16px;
		gap: 8px;
	}
	.cat-nav__pills::-webkit-scrollbar { display: none; }
	.cat-nav__pill {
		white-space: nowrap;
		flex-shrink: 0;
		border: 1px solid var(--border-color);
		border-bottom: 1px solid var(--border-color);
		border-radius: 999px;
		padding: 6px 14px;
		font-size: 13px;
		color: var(--text-primary);
		background: #fff;
	}
	.cat-nav__pill--active,
	.cat-nav__pill--active:hover,
	.cat-nav__pill--active:focus,
	.cat-nav__pill--active:active {
		background: var(--accent);
		color: var(--btn-text, #fff);
		border-color: var(--accent);
		font-weight: 600;
	}
}