.search-input:hover svg{fill:#00456B;opacity:1}
.search-input input:focus ~ svg{opacity:1}
.search-input input{width:100%;padding-right:40px;}
.search-input .js--search-button{position:absolute;width:16px;height:16px;right:15px;z-index:4;top:50%;margin:-8px 0 0;opacity:.5;cursor: pointer}
.search-input .js--search-button svg{width:16px;height:16px;}

.lupa {position: absolute;top:14px;left:12px;}

.js--search-result {position: absolute;bottom:0;left:0;width: 100%;height: auto;transform: translateY(100%);max-height: calc(100vh - 200px);overflow-y: auto;z-index:1003}
.js--search-result p{font-size:14px;}
.js--search-result p:last-child{margin-bottom: 0}
.search--results {padding: 16px;background-color: #fff;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);border-radius: 8px;}
.search--item {display: flex;align-items: center;gap:10px;padding: 10px 0;border-bottom: 1px solid #ccc;}
.search--item:last-child {border-bottom: 1px solid transparent;}
.search--item .catalog__item-actions{margin-left: auto}
.search--item .catalog__item-price span{white-space: nowrap}
.search--info {width: 100%}
.search--img {width: 50px;min-width: 50px;height:50px;position: relative}
.search--img img{    width: 100%;height: 100%;object-fit: contain;}

.search--box {position: relative}
.search--box input {width: 100%;border:1px solid #0726260D;border-radius: 6px;padding-right: 60px;height: var(--height);padding-left: 40px;background-color: #0726260D}
.search--box input:hover, .search--box input:active {outline: none}

.js--search-button {background-color: var(--main);position: absolute;top:2px;right:2px;width: calc(var(--height) - 5px);height: calc(var(--height) - 5px);border-radius: 6px;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: background-color .4s}
.js--search-button:hover {background-color: var(--main-hover);}
.js--search-button.svg--fill svg *{fill:#fff !important;}

.search--box .search--form {max-width: unset;margin-top: 0}
.search--form .search--icon{position: absolute;top:50%;left:12px;transform: translateY(-50%);width: 18px;height: 18px;display: flex;align-items: center;}
.search--form .search--icon svg{fill:var(--text--sub-dark)}
.search--form .clear--icon{position: absolute;top:50%;right:117px;transform: translateY(-50%);width: 14px;height: 14px;cursor: pointer;opacity: 0;visibility: hidden;transition: .4s ease-in-out;display: none;align-items:  center}
.search--form .clear--icon svg{fill:var(--main);transition: .4s}
.search--form .js--search{position: absolute;top:2px;right:2px;height: calc(var(--height) - 4px);line-height: calc(var(--height) - 4px);min-height: unset;border-radius: 10px;opacity: 0;visibility: hidden;transition: .4s ease-in-out;display: none;align-items: center}
.search--form.active .js--search{display: inline-flex;opacity: 1;visibility: visible}
.search--form.active .clear--icon{display: inline-flex;opacity: 1;visibility: visible}
.search--form.active .clear--icon:hover svg{fill:#00BEBF}