/* category-strip.css */
.cat-strip { padding: var(--sp-8) 0; background: var(--white); border-bottom: var(--border); }
.cat-strip-scroll { display:flex; gap:var(--sp-2); overflow-x:auto; scrollbar-width:none; padding-bottom:4px; justify-content:center; flex-wrap:wrap; }
.cat-strip-scroll::-webkit-scrollbar { display:none; }
.cat-pill { display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); padding:var(--sp-4) var(--sp-5); border-radius:var(--r-lg); border:var(--border-width) solid var(--gray-100); background:var(--white); cursor:pointer; transition:all var(--ease-slow); min-width:90px; text-align:center; flex-shrink:0; text-decoration:none; color:inherit; }
.cat-pill:hover { border-color:var(--primary); background:var(--primary-bg); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.cat-pill:hover .cat-pill-name { color:var(--primary); }
.cat-pill.active { border-color:var(--primary); background:var(--primary); }
.cat-pill.active .cat-pill-name { color:white; }
.cat-pill-icon { font-size:28px; }
.cat-pill-name { font-size:11.5px; font-weight:600; color:var(--gray-700); white-space:nowrap; }

@media (max-width: 640px) {
	.cat-strip { padding: var(--sp-5) 0; }
	.cat-strip-scroll {
		justify-content: flex-start;
		flex-wrap: nowrap;
		padding-bottom: 6px;
	}
	.cat-pill {
		min-width: 78px;
		padding: var(--sp-3) var(--sp-4);
	}
	.cat-pill-icon { font-size: 24px; }
}