/* Spotlight-style search window (from the UXM2 prototype), colors adapted to the shop */
.sx { --sx-surface: #fff; --sx-text: #333; --sx-muted: #869298; --sx-hover: #eef4fa; --sx-bg: #f3f4f5; --sx-line: #e4e6e8; --sx-accent: #2877bc; --sx-mark: rgba(250, 213, 0, .55); --sx-thumb: #e4e6e8; }
.sx { position: fixed; inset: 0; z-index: 100000; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; font-family: 'Roboto', sans-serif; }
.sx[hidden] { display: none; }
.sx__backdrop { position: absolute; inset: 0; background: rgba(34, 43, 47, .38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: sx-fade .2s ease; }
.sx__box { position: relative; width: 100%; max-width: 680px; display: flex; flex-direction: column; gap: 12px; animation: sx-in .2s ease; }
.sx__bar, .sx__panel { background: var(--sx-surface); border-radius: 20px; box-shadow: 0 8px 32px rgba(34, 43, 47, .22); }
.sx__bar { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 16px 0 20px; color: var(--sx-muted); }
.sx__icon { flex: none; }
.sx__input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 18px; color: var(--sx-text); box-shadow: none; padding: 0; }
.sx__input::placeholder { color: var(--sx-muted); }
.sx kbd, .sx__kbd { font: inherit; font-size: 12px; line-height: 1; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--sx-line); color: var(--sx-muted); background: var(--sx-surface); }
.sx__kbd { cursor: pointer; transition: background .2s, color .2s; }
@media (hover: hover) { .sx__kbd:hover { background: var(--sx-hover); color: var(--sx-text); } }
.sx__close { display: none; width: 32px; height: 32px; color: var(--sx-muted); background: none; border: 0; padding: 0; cursor: pointer; }
.sx__panel { display: flex; flex-direction: column; overflow: hidden; max-height: min(540px, 64vh); }
.sx__list { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.sx__group { padding: 12px 12px 6px; font-size: 13px; font-weight: 500; color: var(--sx-muted); }
.sx__item { flex: none; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 16px; border-radius: 14px; color: var(--sx-text); text-decoration: none; }
.sx__item.is-active { background: var(--sx-hover); }
.sx__item--product { padding-top: 10px; padding-bottom: 10px; }
.sx__item--all .sx__title { color: var(--sx-accent); }
@media (hover: hover) { .sx__item:hover { background: var(--sx-hover); } }
.sx__thumb { flex: none; width: 48px; height: 48px; border-radius: 10px; background: var(--sx-thumb) center / cover no-repeat; display: grid; place-items: center; font-weight: 600; color: var(--sx-muted); font-size: 15px; text-transform: uppercase; }
.sx__text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sx__title { font-weight: 500; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx__sub { font-size: 13px; color: var(--sx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx__price { flex: none; font-weight: 700; white-space: nowrap; }
.sx mark { background: var(--sx-mark); color: inherit; border-radius: 3px; }
.sx__empty { padding: 32px 16px; text-align: center; color: var(--sx-muted); }
.sx__hints { display: flex; gap: 20px; padding: 12px 20px; border-top: 1px solid var(--sx-bg); font-size: 13px; color: var(--sx-muted); }
.sx__hints span { display: inline-flex; align-items: center; gap: 6px; }
body.sx-open { overflow: hidden; }
@keyframes sx-fade { from { opacity: 0; } }
@keyframes sx-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@media (max-width: 640px) {
  .sx { padding: 0; background: var(--sx-bg); }
  .sx__backdrop { display: none; }
  .sx__box { max-width: none; height: 100%; gap: 0; }
  .sx__bar, .sx__panel { border-radius: 0; box-shadow: none; }
  .sx__bar { height: 72px; padding: 0 20px; border-bottom: 1px solid var(--sx-bg); }
  .sx__kbd, .sx__hints { display: none; }
  .sx__close { display: grid; place-items: center; margin-right: -4px; }
  .sx__panel { flex: 1; max-height: none; }
  .sx__list { padding: 8px 12px; }
}