.search-field{--search-field-ground: rgb(239 237 234 / 40%);--search-field-border: transparent;--search-field-text: var(--color-neutral-1);--search-field-placeholder: var(--color-neutral-2);--search-field-icon: var(--color-neutral-1);--search-field-size: 14;--search-field-line-height: 1.96rem;position:relative;display:flex;align-items:center;gap:.8rem;box-sizing:border-box;height:3.6rem;margin:0;padding:0 .9rem;border:.1rem solid var(--search-field-border);border-radius:.4rem;background-color:var(--search-field-ground);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background-color var(--duration-default) ease,border-color var(--duration-default) ease}.search-field__box{display:flex;flex:1 1 auto;align-items:center;gap:.8rem;min-width:0;height:100%;cursor:text}.search-field__icon{flex:0 0 auto;width:1.5019rem;height:1.5rem;overflow:visible;color:var(--search-field-icon);transition:color var(--duration-default) ease}.search-field__control{position:relative;display:flex;flex:1 1 auto;align-items:center;min-width:0;height:100%}.search-field__input{width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;outline:none;background:none;box-shadow:none;color:var(--search-field-text);font-family:var(--font-body-family);font-size:calc(var(--search-field-size) * .1rem);line-height:var(--search-field-line-height);letter-spacing:0;-webkit-appearance:none;appearance:none}.search-field__input::placeholder{color:var(--search-field-placeholder);opacity:1}.search-field__input::-webkit-search-decoration,.search-field__input::-webkit-search-cancel-button{display:none;-webkit-appearance:none}@media(pointer:coarse){.search-field__input{position:absolute;top:0;left:0;width:calc(100% * 16 / var(--search-field-size));height:calc(100% * 16 / var(--search-field-size));font-size:1.6rem;line-height:calc(var(--search-field-line-height) * 16 / var(--search-field-size));transform:scale(calc(var(--search-field-size) / 16));transform-origin:0 0}}.search-field__clear{display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:3.6rem;height:3.6rem;margin:-.8rem;padding:0;border:0;background:none;color:var(--color-brand-1-green);cursor:pointer}.search-field__clear[hidden]{display:none}.search-field__clear svg{width:2rem;height:2rem;pointer-events:none}.search-field__clear:focus-visible{outline:.1rem solid var(--color-brand-1-green);outline-offset:-.6rem;border-radius:.4rem}.search-field--header:hover{--search-field-ground: rgb(239 237 234 / 45%);--search-field-border: var(--color-neutral-2)}.search-field--page,.header-wrapper--search-open .search-field--header{--search-field-ground: rgb(239 237 234 / 60%);--search-field-border: var(--color-neutral-2);--search-field-icon: var(--color-brand-1-green)}.header-wrapper:not(.header-wrapper--search-open) .search-field--header .search-field__clear{visibility:hidden}.section-header.offset-section-active:not(.solid-header-bg) .header-wrapper--transparent--light:not(:hover):not(.solid-header-bg):not(.header-wrapper--search-open) .search-field--header{--search-field-ground: rgb(255 255 255 / 20%);--search-field-text: var(--color-light-grey-solid);--search-field-placeholder: var(--color-light-grey-solid);--search-field-icon: var(--color-neutral-5)}.header__search-slot{position:relative;flex:0 0 auto;width:min(20.302rem,calc(50vw - 34rem));min-width:14rem;height:3.6rem}.header__search-slot .search-field{position:absolute;top:0;left:0;z-index:1;width:100%;transition:width .25s ease-out,background-color var(--duration-default) ease,border-color var(--duration-default) ease}.header-wrapper--search-open .header__search-slot .search-field{width:var(--search-field-open-width, 41.902rem)}@media screen and (min-width:990px){.header__right>:not(.header__search-slot){transition:opacity .25s ease-out,visibility 0s linear 0s}.header-wrapper--search-open .header__right>:not(.header__search-slot){visibility:hidden;opacity:0;transition:opacity .25s ease-out,visibility 0s linear .25s}}.header__search-row{padding:.6rem 1.2rem 1.6rem}.header__search-row .search-field{--search-field-size: 12;--search-field-line-height: 1.3}@media screen and (min-width:990px){.header__search-row{display:none}}@media(prefers-reduced-motion:reduce){.search-field,.search-field__icon,.header__search-slot .search-field,.header__right>:not(.header__search-slot){transition:none}}
/*# sourceMappingURL=/cdn/shop/t/604/assets/component-search-field.css.map */