/* Katalogo paieška (/auto-katalogas), js/catalog-search.js */
.cs {--cs-navy: #3a536d; --cs-blue: #577ba2; --cs-line: #d5dde6; --cs-soft: #f3f6fa; --cs-muted: #7b8794;
	position: relative; margin: 4px 0 18px; font-family: 'Roboto', Verdana, Arial, sans-serif; font-size: 14px}
.cs * {box-sizing: border-box}

.cs-field {position: relative; display: flex; align-items: center; height: 52px; background: #fff;
	border: 2px solid var(--cs-line); border-radius: 12px; transition: border-color .15s, box-shadow .15s}
.cs-field:focus-within {border-color: var(--cs-blue); box-shadow: 0 0 0 4px rgba(87, 123, 162, .15)}
.cs-icon {flex: none; width: 48px; display: flex; justify-content: center; color: var(--cs-blue)}
.cs-input {flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
	font: inherit; font-size: 17px; color: #1f2933; padding: 0 4px}
.cs-input::placeholder {color: #9aa5b1}
.cs-input::-webkit-search-cancel-button {display: none}
.cs-kbd {flex: none; margin-right: 12px; padding: 2px 7px; border: 1px solid var(--cs-line); border-radius: 6px;
	font-size: 12px; color: var(--cs-muted); background: var(--cs-soft)}
.cs-clear {flex: none; display: none; width: 40px; height: 40px; margin-right: 6px; border: 0; border-radius: 8px;
	background: transparent; color: var(--cs-muted); font-size: 22px; line-height: 1; cursor: pointer}
.cs-clear:hover {background: var(--cs-soft); color: var(--cs-navy)}
.cs.has-value .cs-clear {display: block}
.cs.has-value .cs-kbd {display: none}
.cs-spinner {flex: none; display: none; width: 18px; height: 18px; margin-right: 10px; border: 2px solid var(--cs-line);
	border-top-color: var(--cs-blue); border-radius: 50%; animation: cs-spin .7s linear infinite}
.cs.is-loading .cs-spinner {display: block}
@keyframes cs-spin {to {transform: rotate(360deg)}}

.cs-hint {margin: 8px 2px 0; color: var(--cs-muted); font-size: 12px}
.cs-hint button {border: 0; background: none; padding: 0 2px; color: var(--cs-blue); font: inherit; cursor: pointer}
.cs-hint button:hover {text-decoration: underline}

.cs-panel {position: absolute; z-index: 1000; top: 58px; left: 0; right: 0; display: none; max-height: min(70vh, 560px);
	overflow-y: auto; background: #fff; border: 1px solid var(--cs-line); border-radius: 12px;
	box-shadow: 0 16px 40px rgba(31, 41, 51, .16); padding: 6px}
.cs.is-open .cs-panel {display: block}
.cs-section {padding: 10px 10px 4px; font-size: 11px; font-weight: bold; letter-spacing: .06em; text-transform: uppercase; color: var(--cs-muted)}
.cs-item {display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; color: #1f2933; text-decoration: none}
.cs-item:hover, .cs-item.is-active {background: var(--cs-soft); text-decoration: none}
.cs-item.is-active {box-shadow: inset 3px 0 0 var(--cs-blue)}
.cs-thumb {flex: none; width: 56px; height: 42px; border-radius: 6px; background: var(--cs-soft) center / cover no-repeat;
	display: flex; align-items: center; justify-content: center; overflow: hidden}
.cs-thumb.is-logo {background-size: contain; background-color: #fff; border: 1px solid var(--cs-line)}
.cs-thumb svg {color: #b7babd}
.cs-text {min-width: 0; flex: 1}
.cs-title {display: block; color: var(--cs-navy); font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.cs-title mark {background: #fff2b3; color: inherit; border-radius: 2px; padding: 0 1px}
.cs-sub {display: block; margin-top: 2px; color: var(--cs-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.cs-arrow {flex: none; color: #b7babd; opacity: 0; transition: opacity .1s}
.cs-item:hover .cs-arrow, .cs-item.is-active .cs-arrow {opacity: 1}
.cs-empty {padding: 22px 12px; text-align: center; color: var(--cs-muted)}
.cs-footer {padding: 8px 10px 4px; border-top: 1px solid var(--cs-soft); margin-top: 4px; color: var(--cs-muted); font-size: 11px}

@media (max-width: 640px) {
	.cs-field {height: 48px}
	.cs-input {font-size: 16px}
	.cs-kbd, .cs-footer {display: none}
	.cs-thumb {width: 48px; height: 36px}
}

/* compact variant under the breadcrumbs of catalog sub pages */
.cs.cs-compact {margin: 0 0 18px}
.cs.cs-compact .cs-field {height: 44px; border-width: 1px; border-radius: 10px}
.cs.cs-compact .cs-icon {width: 42px}
.cs.cs-compact .cs-input {font-size: 15px}
.cs.cs-compact .cs-panel {top: 50px}
@media (max-width: 640px) {
	.cs.cs-compact {margin-bottom: 12px}
	.cs.cs-compact .cs-input {font-size: 16px}
}