/* WonderFil store search: one panel above the page. */
.wtqs { --wtqs-accent: #ff6b00; --wtqs-ink: #1f1b18; --wtqs-muted: #6f6760; --wtqs-line: #e7e1db; --wtqs-soft: #faf7f4; position: fixed; inset: 0; z-index: 999999; color: var(--wtqs-ink); font-size: 15px; line-height: 1.4; }
.wtqs[hidden] { display: none !important; }
.wtqs *, .wtqs *::before, .wtqs *::after { box-sizing: border-box; }
.wtqs-scrim { position: absolute; inset: 0; background: rgba(31, 27, 24, .45); }
.wtqs-panel { position: relative; margin: 6vh auto 0; width: min(760px, calc(100% - 32px)); max-height: 86vh; max-height: 86dvh; background: #fff; border-radius: 18px; box-shadow: 0 18px 48px rgba(31, 27, 24, .25); display: flex; flex-direction: column; overflow: hidden; }
@media (max-width: 640px) {
	.wtqs-panel { margin: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); }
}
.wtqs-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--wtqs-line); margin: 0; flex: none; }
.wtqs-bar svg { flex: none; color: var(--wtqs-muted); }
.wtqs .wtqs-bar input { flex: 1 1 auto; min-width: 0; border: 0 !important; outline: 0; box-shadow: none !important; background: transparent !important; font: inherit; font-size: 17px; padding: 8px 0; margin: 0; color: inherit; -webkit-appearance: none; appearance: none; border-radius: 0; height: auto; }
.wtqs .wtqs-bar input::-webkit-search-cancel-button { -webkit-appearance: none; }
@media (pointer: coarse) { .wtqs .wtqs-bar input { font-size: 16px !important; } }
.wtqs .wtqs-x { appearance: none; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--wtqs-line); background: #fff; color: var(--wtqs-ink); font-size: 22px; line-height: 1; cursor: pointer; padding: 0; margin: 0; display: grid; place-items: center; box-shadow: none; min-height: 0; }
.wtqs-body { overflow: auto; overscroll-behavior: contain; padding: 6px 14px 18px; -webkit-overflow-scrolling: touch; }
.wtqs-note { color: var(--wtqs-muted); margin: 14px 2px; font-size: 14px; }
.wtqs-sec { padding: 10px 0 4px; }
.wtqs .wtqs-sec h3 { font: inherit; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--wtqs-muted); margin: 6px 2px 6px; }
.wtqs a.wtqs-row { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; text-decoration: none; color: inherit; }
.wtqs a.wtqs-row:hover, .wtqs a.wtqs-row:focus-visible { background: var(--wtqs-soft); outline: none; }
.wtqs-th { flex: none; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--wtqs-soft); display: grid; place-items: center; font-weight: 800; color: var(--wtqs-accent); }
.wtqs-th.is-round { border-radius: 50%; }
.wtqs-th img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.wtqs-tx { min-width: 0; display: grid; }
.wtqs-tx b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wtqs-tx small { color: var(--wtqs-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wtqs-cgroup { padding: 6px 2px 10px; }
.wtqs-chead { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.wtqs-chead a { font-size: 13px; font-weight: 700; color: var(--wtqs-accent); text-decoration: none; }
.wtqs-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 10px 8px; }
.wtqs a.wtqs-sw { display: grid; justify-items: center; gap: 3px; text-decoration: none; color: var(--wtqs-muted); }
.wtqs-sw span { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: var(--wtqs-soft); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); display: block; }
.wtqs-sw img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.6); display: block; margin: 0; }
.wtqs-sw small { font-size: 11px; font-weight: 700; }
.wtqs-sw.is-oos span { opacity: .4; }
.wtqs a.wtqs-all { display: block; margin: 12px 2px 0; padding: 12px; border-radius: 999px; text-align: center; font-weight: 800; background: var(--wtqs-accent); color: #fff; text-decoration: none; }
html.wtqs-open { overflow: hidden; }