[data-name=searchbar]{--color:#7eb628;position:relative}[data-name=searchbar] *{margin:0;padding:0}[data-name=searchbar] .boton{display:grid;place-items:center;aspect-ratio:1/1;background:transparent;border:none;color:#fff}[data-name=searchbar] .searchbar{display:flex;gap:.5em;height:2.5rem;border-radius:9999px;border:2px solid #ddd;background:transparent;overflow:hidden;padding:.35em .35em .35em 0}[data-name=searchbar] .searchbar:focus-within{border:2px solid #7eb628}[data-name=searchbar] .searchbar input{background:transparent;border:none;width:100%;padding:0 .5em 0 1em;min-width:20em;color:#fff}[data-name=searchbar] .searchbar input:focus{box-shadow:none}[data-name=searchbar] .searchbar button[type=submit]{display:grid;place-items:center;aspect-ratio:1/1;border:none;background:#7eb628;color:#fff;font-size:.75em;border-radius:9999px}[data-name=searchbar] [data-name=search-results]{position:absolute;z-index:9999;top:100%;right:0;background:#fff;border-radius:10px;box-shadow:0 5px 10px rgba(0,0,0,.4);padding:1em;display:flex;gap:1em;margin-top:1em}[data-name=searchbar] [data-name=search-results] .left{display:flex;flex-flow:column;gap:.5em;border-right:1px solid #d0d0d0;padding:0 .5em 0 0}[data-name=searchbar] [data-name=search-results] .left .section-title{font-weight:600;margin:0 0 .5em;text-transform:capitalize}[data-name=searchbar] [data-name=search-results] .left li{position:relative;display:flex;padding:.25em 1em;width:10em;list-style:none;border-bottom:1px solid #d0d0d0;font-style:italic;font-weight:600;font-size:.9em;color:#000;cursor:pointer;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:all .25s}[data-name=searchbar] [data-name=search-results] .left li:hover{border-bottom:1px solid var(--color)}[data-name=searchbar] [data-name=search-results] .left li:before{content:"";position:absolute;top:0;left:0;width:.5em;height:100%;background:var(--color);transition:all .15s}[data-name=searchbar] [data-name=search-results] .left li>p{position:relative}[data-name=searchbar] [data-name=search-results] .left li.active{color:#fff;clip-path:polygon(0 0,100% 0,90% 100%,0 100%);border-bottom:1px solid transparent}[data-name=searchbar] [data-name=search-results] .left li.active:before{width:100%}[data-name=searchbar] [data-name=search-results] .left .clear{color:#fff;border-radius:5px;background:#f33;padding:.25em .5em;margin:1em 0 0}[data-name=searchbar] [data-name=search-results] .related{border-top:5px solid #333;display:grid;grid-template-columns:repeat(3,1fr);gap:1em}[data-name=searchbar] [data-name=search-results] .related img{--size:100%;width:var(--size);max-width:var(--size);min-width:var(--size);aspect-ratio:1/1;-o-object-fit:contain;object-fit:contain}[data-name=searchbar] [data-name=search-results] .related .title{background:var(--color);color:#fff;padding:.5em 1em;font-size:.8em;border-radius:10px;display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis}[data-name=searchbar] [data-name=search-results] .items a{color:var(--color)}[data-name=searchbar] [data-name=search-results] .item{padding:.5em 1em;position:relative;display:flex;align-items:center;justify-content:space-between;gap:1em}[data-name=searchbar] [data-name=search-results] .item:not(:last-child){border-bottom:1px solid #d0d0d0}[data-name=searchbar] [data-name=search-results] .item .title{display:block;max-width:25rem;font-weight:600;font-size:1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-name=searchbar] [data-name=search-results] .item .meta{display:flex;align-items:center;gap:.5em;color:#aaa;font-size:.9em}[data-name=searchbar] [data-name=search-results] .item .meta .sku{color:#333;font-weight:600}[data-name=searchbar] [data-name=search-results] .item img{--size:5em;width:var(--size);min-width:var(--size);max-width:var(--size);aspect-ratio:1/1;-o-object-fit:contain;object-fit:contain}[data-name=searchbar] [data-name=search-results] .item .item-left{max-width:20rem;overflow:hidden}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}[data-name=searchbar] .loader-container{display:flex;flex-flow:column;align-items:center;gap:1em}[data-name=searchbar] .loader{--size:7em;width:var(--size);max-width:7em;min-width:7em;aspect-ratio:1/1;border-radius:9999px;border:7px solid;border-color:#000 #000 transparent;animation:spin 1.5s infinite}

/*# sourceMappingURL=index.css.map*/