/*
 * Global product search bar.
 * Self-contained so it works on pages without the compiled Tailwind bundle
 * (category and seller storefront templates).
 */

.smp-sq{display:flex;align-items:center;gap:.4rem;flex:1 1 16rem;max-width:34rem;min-width:0;
  padding:.25rem .3rem .25rem .6rem;border:1px solid #e5e7eb;border-radius:.75rem;
  background:#f3f4f6;font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.smp-sq-ico{width:1rem;height:1rem;flex-shrink:0;color:#9ca3af}
.smp-sq-input{flex:1 1 auto;min-width:0;border:0;background:transparent;outline:none;
  font:inherit;font-size:.8125rem;color:#111827;padding:.35rem 0}
.smp-sq-input::placeholder{color:#9ca3af}
.smp-sq-input::-webkit-search-cancel-button{display:none}
.smp-sq-btn{flex-shrink:0;padding:.4rem .85rem;border:0;border-radius:.5rem;cursor:pointer;
  font:inherit;font-size:.75rem;font-weight:700;color:#000;
  background-image:linear-gradient(to right,#f59e0b,#f97316,#ea580c);
  transition:opacity .15s ease,transform .15s ease}
.smp-sq-btn:hover{opacity:.92}
.smp-sq-btn:active{transform:scale(.97)}

html.dark .smp-sq{background:rgba(31,41,55,.6);border-color:#374151}
html.dark .smp-sq-input{color:#f3f4f6}
html.dark .smp-sq-input::placeholder{color:#9ca3af}
html.dark .smp-sq-ico{color:#6b7280}

@media (max-width:639px){
  .smp-sq{flex:1 1 100%;max-width:none;padding:.2rem .25rem .2rem .55rem}
  .smp-sq-btn{padding:.35rem .7rem;font-size:.7rem}
}