:root { --ncss-accent: #1f7a3f; }

.ncss-form { position: relative; display: flex; align-items: center; gap: 8px; }
.ncss-form .ncss-input {
	flex: 1; padding: 12px 14px; border: 1px solid #d9dde3; border-radius: 10px;
	font-size: 15px; background: #fff; outline: none;
}
.ncss-form .ncss-input:focus { border-color: var(--ncss-accent); box-shadow: 0 0 0 3px rgba(0,0,0,.05); }
.ncss-form .ncss-submit {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border: 0; border-radius: 10px; cursor: pointer;
	background: var(--ncss-accent); color: #fff;
}

/* Dropdown */
.ncss-panel {
	position: absolute; z-index: 99999; background: #fff; border: 1px solid #e6e9ee;
	border-radius: 12px; box-shadow: 0 18px 46px rgba(16, 24, 40, .16);
	overflow: hidden; max-height: 70vh; overflow-y: auto;
	font-size: 14px; line-height: 1.35; color: #1f2933;
	-webkit-overflow-scrolling: touch;
}
.ncss-panel[hidden] { display: none; }

.ncss-group-title {
	padding: 10px 14px 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
	color: #7b8794; font-weight: 700; background: #fafbfc;
}

.ncss-item {
	display: flex; align-items: center; gap: 12px; padding: 10px 14px;
	text-decoration: none; color: inherit; border-top: 1px solid #f1f3f6;
}
.ncss-item:first-of-type { border-top: 0; }
.ncss-item:hover, .ncss-item.is-active { background: #f4f8f5; }
.ncss-item img {
	width: 46px; height: 46px; object-fit: cover; border-radius: 8px; flex: 0 0 46px; background: #f2f4f7;
}
.ncss-item-body { min-width: 0; flex: 1; }
.ncss-item-name { display: block; font-weight: 600; color: #14202c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ncss-item-name mark { background: rgba(31,122,63,.14); color: inherit; padding: 0 1px; border-radius: 3px; }
.ncss-item-meta { display: block; font-size: 12px; color: #6b7684; margin-top: 2px; }
.ncss-item-price { font-size: 13px; color: var(--ncss-accent); font-weight: 700; white-space: nowrap; }
.ncss-item-price del { color: #98a2b3; font-weight: 400; margin-right: 4px; }
.ncss-badge { font-size: 11px; color: #b42318; }

.ncss-term { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ncss-term .ncss-count { font-size: 12px; color: #6b7684; }

.ncss-footer {
	display: block; padding: 12px 14px; text-align: center; font-weight: 700;
	color: #fff; background: var(--ncss-accent); text-decoration: none;
}
.ncss-footer:hover { filter: brightness(.94); color: #fff; }

.ncss-empty { padding: 18px 14px; color: #6b7684; text-align: center; }
.ncss-empty strong { color: #14202c; }
.ncss-dym { display: block; margin-top: 8px; color: var(--ncss-accent); font-weight: 700; text-decoration: none; }

.ncss-loading { padding: 16px; display: flex; align-items: center; gap: 10px; color: #6b7684; }
.ncss-spinner {
	width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid #e4e7ec; border-top-color: var(--ncss-accent);
	animation: ncss-spin .7s linear infinite;
}
@keyframes ncss-spin { to { transform: rotate(360deg); } }

/* Mobile */
@media (max-width: 782px) {
	.ncss-panel { max-height: 65vh; border-radius: 10px; }
	.ncss-item { padding: 10px 12px; gap: 10px; }
	.ncss-item img { width: 40px; height: 40px; flex-basis: 40px; }
	.ncss-item-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
@media (prefers-reduced-motion: reduce) {
	.ncss-spinner { animation-duration: 2s; }
}