.searchbar{--sb-ink:var(--studio-ink);--sb-muted:var(--studio-muted);--sb-line:var(--studio-line);--sb-accent:var(--studio-plum);--sb-ease:cubic-bezier(.23,1,.32,1);display:flex;align-items:center;position:relative;justify-self:end;width:100%;max-width:380px;font-family:var(--font-family-primary)}
.searchbar__form{position:relative;width:100%}
.searchbar__input-wrapper{position:relative;display:flex;align-items:center}
.searchbar__input{width:100%;min-height:46px;padding:10px 46px 10px 48px;border:1px solid var(--sb-line);border-radius:6px;font:400 16px/1.4 var(--font-family-primary);color:var(--sb-ink);background:var(--studio-surface,#eef0ea);transition:border-color 120ms ease,background-color 120ms ease}
.searchbar__input::placeholder{color:var(--sb-muted);opacity:1}
.searchbar__input::-webkit-search-cancel-button{display:none}
.searchbar__input:focus{outline:2px solid var(--color-focus);outline-offset:2px;background:var(--studio-paper);border-color:var(--sb-accent)}
.searchbar__button,.searchbar__clear{position:absolute;inset-block:0;width:44px;height:44px;align-self:center;border:0;background:none;color:var(--sb-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:transform 120ms var(--sb-ease),color 120ms ease}
.searchbar__button{left:0}.searchbar__clear{right:1px;font-size:26px;font-weight:400}.searchbar__button svg{width:20px;height:20px;stroke-width:1.6}
.searchbar__button:active,.searchbar__clear:active,.search-suggestions__view-all:active{transform:scale(.97)}
.searchbar button:focus-visible,.searchbar a:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.searchbar__suggestions{position:absolute;top:calc(100% + 10px);right:0;width:min(560px,calc(100vw - 40px));background:var(--studio-paper);border:1px solid var(--sb-line);border-radius:12px;box-shadow:0 16px 40px #3626381a;max-height:calc(100dvh - 150px);overflow-y:auto;z-index:2;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-6px);transform-origin:top right;transition:transform 180ms var(--sb-ease),opacity 140ms ease,visibility 0s linear 180ms}
.searchbar__suggestions.active{visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0);transition-delay:0s}
.search-suggestions__start{padding:24px}
.search-suggestions__start p{font-size:14px;line-height:1.5;color:var(--sb-muted);margin:0 0 12px}
.search-suggestions__start .search-suggestions__start-title{font:500 24px/1.2 var(--font-family-display);color:var(--sb-accent);margin-bottom:8px}
.search-suggestions__collections{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.search-suggestions__collections a{display:flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:6px;border:1px solid var(--sb-line);text-decoration:none;font-size:14px;color:var(--sb-accent)}
.search-suggestions__loading{padding:20px 24px;display:grid;gap:14px}
.search-suggestions__loading-label{color:var(--sb-muted);font-size:14px}
.search-skeleton{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:16px}
.search-skeleton>span:first-child{height:64px;border-radius:8px;background:var(--studio-sage)}
.search-skeleton>span:last-child{height:32px;border-radius:4px;background:linear-gradient(var(--studio-sage) 0 40%,transparent 40% 60%,var(--studio-sage) 60% 100%);max-width:210px}
.search-suggestions__results{max-height:calc(100dvh - 250px);overflow-y:auto;padding:8px 0;overscroll-behavior:contain}
.predictive-search__heading{margin:0;padding:12px 22px 7px;font-size:13px;font-weight:600;color:var(--sb-muted)}
.predictive-search__group+.predictive-search__group{border-top:1px solid var(--sb-line);margin-top:8px}
.search-suggestion{display:flex;align-items:center;gap:14px;min-height:44px;padding:10px 22px;text-decoration:none;color:var(--sb-ink);transition:background-color 100ms ease}
.search-suggestion[aria-selected=true]{background:var(--studio-sage)}
.search-suggestion__image-wrap{display:block;width:64px;height:64px;flex:0 0 64px;border-radius:8px;background:#fff;overflow:hidden}
.search-suggestion__image{width:100%;height:100%;object-fit:contain;display:block}
.search-suggestion__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.search-suggestion__title{font:500 18px/1.2 var(--font-family-product);color:var(--sb-ink);overflow-wrap:anywhere}
.search-suggestion__vendor,.search-suggestion__availability{font-size:12px;color:var(--sb-muted);line-height:1.4}
.search-suggestion__price{font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;margin-left:auto;flex-shrink:0;display:flex;flex-direction:column;gap:2px}.search-suggestion__price s{font-size:12px;color:var(--sb-muted);font-weight:400}
.search-suggestion--query,.search-suggestion--text{font-size:15px;justify-content:space-between}.search-suggestion--query{justify-content:flex-start}
.search-suggestions__footer{padding:12px 16px;border-top:1px solid var(--sb-line)}
.search-suggestions__footer:has(.search-suggestions__view-all[hidden]){display:none}
.search-suggestions__view-all{width:100%;min-height:44px;padding:11px 16px;background:var(--sb-accent);color:var(--studio-paper);border:0;border-radius:6px;font:600 14px/1.4 var(--font-family-primary);cursor:pointer;transition:transform 120ms var(--sb-ease),background-color 120ms ease}
.search-suggestions__no-results,.search-suggestions__error{padding:24px;margin:0;color:var(--sb-muted);font-size:15px;line-height:1.5}
.searchbar [hidden]{display:none!important}
.searchbar[data-keyboard-search] .searchbar__suggestions,.searchbar[data-keyboard-search] .search-suggestion{transition:none}
@media(hover:hover) and (pointer:fine){.search-suggestion:hover,.search-suggestions__collections a:hover{background:var(--studio-sage)}.searchbar__button:hover,.searchbar__clear:hover{color:var(--sb-ink)}.search-suggestions__view-all:hover{background:var(--studio-ink)}}
@media(max-width:768px){.searchbar__input{font-size:16px;min-height:48px}.searchbar__suggestions{left:0;right:0;width:100%;top:calc(100% + 8px);max-height:calc(100dvh - 170px)}.search-suggestions__results{max-height:calc(100dvh - 244px)}.search-suggestion{padding:10px 14px;gap:10px}.search-suggestion__image-wrap{width:56px;height:56px;flex-basis:56px}.search-suggestion__price{font-size:13px}.search-suggestion__title{font-size:17px}.search-suggestions__start{padding:20px}}
@media(prefers-reduced-motion:reduce){.searchbar__suggestions,.search-suggestion,.searchbar button,.searchbar__input{transition:none;transform:none}}