.cccs-wrap {
	--cccs-dark: #11151a;
	--cccs-mid: #252b32;
	--cccs-edge: #59616b;
	--cccs-silver: #d8dde3;
	--cccs-blue: #102d4f;
	--cccs-blue-2: #071a2e;
	clear: both;
	box-sizing: border-box;
	width: 100%;
	margin: 18px 0 24px;
	padding: 14px;
	border: 1px solid var(--cccs-edge);
	border-radius: 13px;
	background:
		linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,0) 38%),
		linear-gradient(180deg, #2c3239 0%, var(--cccs-dark) 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 5px 18px rgba(0,0,0,.22);
	font-family: "Century Gothic", CenturyGothic, AppleGothic, Arial, sans-serif;
}

.cccs-wrap *,
.cccs-wrap *::before,
.cccs-wrap *::after {
	box-sizing: border-box;
}

.cccs-topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.cccs-heading {
	margin: 0 !important;
	padding: 0 !important;
	color: #fff !important;
	font-size: clamp(15px, 2vw, 20px) !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: .035em;
	text-shadow: 0 1px 1px #000;
}

.cccs-search-wrap {
	position: relative;
	display: block;
	flex: 0 1 270px;
	margin: 0;
}

.cccs-search-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #25313d;
	font-size: 19px;
	font-weight: 700;
	pointer-events: none;
}

.cccs-search {
	width: 100% !important;
	height: 38px !important;
	margin: 0 !important;
	padding: 7px 12px 7px 37px !important;
	border: 1px solid #8e98a3 !important;
	border-radius: 20px !important;
	background: #f7f9fb !important;
	color: #111 !important;
	font-family: inherit !important;
	font-size: 13px !important;
	line-height: 1 !important;
	box-shadow: inset 0 1px 3px rgba(0,0,0,.15) !important;
}

.cccs-search:focus {
	outline: 3px solid rgba(103,170,235,.45) !important;
	outline-offset: 1px;
}

.cccs-control-row {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 44px;
	align-items: stretch;
	gap: 8px;
}

.cccs-track {
	display: flex;
	align-items: stretch;
	gap: 9px;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 3px 2px 8px;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
	scrollbar-width: thin;
	scrollbar-color: #7f8994 #161a1f;
}

.cccs-track:active,
.cccs-track.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	user-select: none;
}

.cccs-track::-webkit-scrollbar {
	height: 8px;
}

.cccs-track::-webkit-scrollbar-track {
	border-radius: 8px;
	background: #161a1f;
}

.cccs-track::-webkit-scrollbar-thumb {
	border-radius: 8px;
	background: linear-gradient(180deg, #aab2bb, #5d6670);
}

.cccs-chip {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 0 0 auto;
	min-height: 46px;
	max-width: 260px;
	padding: 9px 12px !important;
	border: 1px solid #75808c !important;
	border-radius: 8px !important;
	background:
		linear-gradient(180deg, rgba(255,255,255,.13), transparent 42%),
		linear-gradient(180deg, #343b43 0%, #171b20 100%) !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	text-align: center;
	text-decoration: none !important;
	text-transform: uppercase;
	letter-spacing: .018em;
	text-shadow: 0 1px 1px #000;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 4px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.25);
	scroll-snap-align: start;
	transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.cccs-chip:hover,
.cccs-chip:focus-visible {
	border-color: #d7dde4 !important;
	background:
		linear-gradient(180deg, rgba(255,255,255,.17), transparent 42%),
		linear-gradient(180deg, #264f78 0%, #0b2744 100%) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 9px rgba(0,0,0,.34);
	outline: none;
}

.cccs-chip.is-active {
	border-color: #e6edf5 !important;
	background:
		linear-gradient(180deg, rgba(255,255,255,.2), transparent 40%),
		linear-gradient(180deg, var(--cccs-blue) 0%, var(--cccs-blue-2) 100%) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 0 2px rgba(255,255,255,.07), 0 0 0 2px rgba(40,123,194,.4), 0 4px 9px rgba(0,0,0,.35);
}

.cccs-chip[hidden] {
	display: none !important;
}

.cccs-name {
	display: block;
	white-space: nowrap;
}

.cccs-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 24px;
	padding: 0 7px;
	border: 1px solid rgba(255,255,255,.34);
	border-radius: 12px;
	background: linear-gradient(180deg, #e6eaee, #929aa3);
	color: #101419;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	text-shadow: none;
	box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.35);
}

.cccs-arrow {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	min-width: 44px !important;
	height: auto !important;
	min-height: 50px;
	margin: 0 !important;
	padding: 0 0 4px !important;
	border: 1px solid #75808c !important;
	border-radius: 8px !important;
	background: linear-gradient(180deg, #3d454e, #15191e) !important;
	color: #fff !important;
	font-family: Arial, sans-serif !important;
	font-size: 38px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	text-shadow: 0 1px 1px #000;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 4px rgba(0,0,0,.28);
	cursor: pointer;
}

.cccs-arrow:hover,
.cccs-arrow:focus-visible {
	border-color: #d7dde4 !important;
	background: linear-gradient(180deg, #315f8c, #0b2744) !important;
	outline: none;
}

.cccs-arrow:disabled {
	opacity: .34;
	cursor: default;
}

.cccs-hint {
	margin: 6px 0 0 !important;
	color: #c9cfd6 !important;
	font-size: 11px !important;
	line-height: 1.3 !important;
	text-align: center;
}

.cccs-status {
	min-height: 0;
	margin: 0;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
}

.cccs-status:not(:empty) {
	padding-top: 8px;
}

.cccs-original-category-list {
	display: none !important;
}

@media (max-width: 700px) {
	.cccs-wrap {
		margin: 14px 0 18px;
		padding: 10px;
		border-radius: 10px;
	}

	.cccs-topline {
		align-items: stretch;
		flex-direction: column;
		gap: 8px;
	}

	.cccs-heading {
		text-align: center;
	}

	.cccs-search-wrap {
		flex-basis: auto;
		max-width: none;
	}

	.cccs-control-row {
		grid-template-columns: 38px minmax(0, 1fr) 38px;
		gap: 5px;
	}

	.cccs-arrow {
		width: 38px !important;
		min-width: 38px !important;
		min-height: 48px;
		font-size: 32px !important;
	}

	.cccs-chip {
		min-height: 44px;
		max-width: 220px;
		padding: 8px 10px !important;
		font-size: 12px !important;
	}

	.cccs-count {
		min-width: 25px;
		height: 22px;
		padding: 0 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cccs-track,
	.cccs-chip {
		scroll-behavior: auto;
		transition: none;
	}
}


/* Version 1.0.3: keep filter choices visible without a separate toggle button. */
.cccs-filter-toggle-hidden {
	display: none !important;
}

.cccs-force-inline-filter-panel {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	max-height: none !important;
	transform: none !important;
}