.search-bar{display:inline-flex;align-items:center;width:350px;max-width:100%;height:35px;border-bottom:1px solid #ececec;padding:0 12px;margin-right:12px;cursor:text}.search-bar-form{display:contents}.search-icon{display:flex;align-items:center;flex:0 0 auto;order:-2;margin-right:15px}.search-icon>svg{height:20px;width:20px;stroke-width:1.7}.search-bar .search-bar-input{flex:1 1 auto;min-width:0;height:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#000;font:inherit;font-size:12px;text-overflow:ellipsis;outline:none;-webkit-appearance:none;appearance:none}.search-bar .search-bar-input:focus-visible{outline:none!important}.search-bar .search-bar-input::placeholder{color:#000;opacity:1}.search-bar .search-bar-input::-webkit-search-decoration,.search-bar .search-bar-input::-webkit-search-cancel-button{display:none}.search-bar-close{display:flex;align-items:center;flex:0 0 auto;height:100%;max-width:0;margin:0;padding:0;overflow:hidden;border:0;background:none;color:#111;cursor:pointer;opacity:0;visibility:hidden;transition:max-width .25s ease,padding .25s ease,opacity .2s ease,visibility .25s}.search-bar-close>svg{flex:0 0 auto;height:20px;width:20px;stroke-width:1.7}search-bar.is-active .search-bar-close{max-width:30px;padding-left:5px;opacity:1;visibility:visible}search-bar.is-active .marqo-instant-image-button{padding-right:5px}.search-bar .marqo-instant-close-button{display:none}.search-bar .marqo-instant-image-button,.search-bar .marqo-instant-image-chip{position:static;transform:none}.search-bar .marqo-instant-image-button{display:flex;align-items:center;flex:0 0 auto;width:auto;height:100%;padding:0 10px;color:#111;cursor:pointer;transition:padding .25s ease}.search-bar .marqo-instant-image-button svg{width:20px;height:20px;transition:transform .2s ease}@media(hover:hover){.search-bar .marqo-instant-image-button:hover svg{transform:scale(1.1)}}.search-bar .marqo-instant-image-chip{--marqo-instant-image-chip-thumb-display: block;order:-1;flex:0 0 auto;height:26px;margin-right:15px;padding:0 8px 0 4px;gap:6px;background:#f2f2f2;border-radius:0;color:#000}.search-bar .marqo-instant-image-chip-thumb{border-radius:0}.search-bar .marqo-instant-image-chip-label{font-size:10px;font-weight:600;line-height:1;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}.search-bar .marqo-instant-image-chip-remove{font-size:13px;color:#757575}.search-bar .marqo-instant-image-chip-remove:hover{color:#000}.search-bar:has(.marqo-instant-image-chip:not([hidden])) .search-bar-input::placeholder{color:transparent}.marqo-instant-search-overlay{animation:search-overlay-in .25s ease}.marqo-instant-backdrop{animation:search-backdrop-in .25s ease}@keyframes search-overlay-in{0%{opacity:0;translate:0 -8px}}@keyframes search-backdrop-in{0%{opacity:0}}@media(prefers-reduced-motion:reduce){.marqo-instant-search-overlay,.marqo-instant-backdrop,.search-bar-close,.search-bar .marqo-instant-image-button{animation:none;transition:none}}.site-header:has(search-bar.is-active){z-index:10000}.search-bar-desktop-slot{display:contents}.search-bar-mobile-slot{display:none}@media only screen and (min-width:1050px){.search-bar{width:clamp(160px,20vw,300px);border-bottom-color:currentColor;padding:0;margin-right:20px}.search-icon{margin-right:12px}.search-icon>svg,.search-bar-close>svg{height:18px;width:18px;stroke-width:1.5}.search-bar .search-bar-input{font-size:var(--font-site-header-size);letter-spacing:var(--font-site-header-letter-spacing)}.search-bar .marqo-instant-image-button svg{width:22px;height:22px;stroke-width:1.5}}@media only screen and (min-width:1050px)and (max-width:1299px){.search-bar .search-bar-input{font-size:11px;letter-spacing:1px}}@media only screen and (max-width:1049px){.search-bar{border-bottom:1px solid rgb(230,230,230);padding:0;margin-right:0;height:40px}.search-bar-desktop-slot{display:none}.search-bar-mobile-slot{display:flex;align-items:center;justify-content:center;padding:0 calc(var(--padding-horizontal) + 12px)}.search-bar{width:100%}.search-bar .search-bar-input{font-size:16px;letter-spacing:var(--font-site-header-letter-spacing)}.search-bar .search-bar-input::placeholder{color:#999}.search-bar .marqo-instant-image-button{padding-right:0}search-bar.is-active .search-bar-close{padding-left:10px}search-bar.is-active .marqo-instant-image-button{padding-right:10px}}@media only screen and (max-width:767px){.search-bar-mobile-slot{padding:0 calc(var(--padding-horizontal) + 8px)}}
/*# sourceMappingURL=/cdn/shop/t/21/assets/component-search-bar.css.map */