/* Sunward Meili Search - layout modelled on the previous Searchanise pages, tidied up. */
.sw-app, .sw-ac { --sw-ink: #1f2328; --sw-mute: #6b7280; --sw-line: #e3e6ea; --sw-soft: #f5f6f8; --sw-dark: #2b3035; --sw-accent: #c4163f; --sw-ok: #1b7f3b; color: var(--sw-ink); }
.sw-app { margin: 1.2em 0 2em; transition: opacity .15s; }
.sw-app.is-loading { opacity: .55; pointer-events: none; }
.sw-app *, .sw-ac * { box-sizing: border-box; }
.sw-native { display: none !important; }
.sw-app mark, .sw-ac mark { background: none; color: inherit; font-weight: 700; }
.sw-linkbtn { background: none; border: 0; padding: 4px 0; color: var(--sw-accent); cursor: pointer; font-size: .85em; text-decoration: underline; }

.sw-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--sw-line); margin-bottom: 18px; }
.sw-tabs a { padding: 10px 2px; color: var(--sw-mute); text-decoration: none; font-size: 1.15em; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.sw-tabs a.is-on { color: var(--sw-ink); border-color: var(--sw-dark); }
.sw-tabs sup { font-size: .6em; color: var(--sw-mute); }

.sw-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sw-count { color: var(--sw-mute); font-size: .92em; }
.sw-count b { color: var(--sw-ink); }
.sw-note { font-size: .9em; }
.sw-tools { display: flex; align-items: center; gap: 8px; }
.sw-vbtn, .sw-ftoggle { height: 40px; min-width: 40px; border: 1px solid var(--sw-line); background: #fff; color: var(--sw-ink); cursor: pointer; font-size: 18px; border-radius: 3px; }
.sw-vbtn.is-on { background: var(--sw-dark); color: #fff; border-color: var(--sw-dark); }
.sw-ftoggle { display: none; font-size: 14px; padding: 0 14px; }
.sw-sort { height: 40px; min-width: 190px; padding: 0 10px; border: 1px solid var(--sw-line); background: #fff; font-size: 14px; border-radius: 3px; }

.sw-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 30px; align-items: start; }
.sw-side { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; padding-right: 6px; }
.sw-facet { border-bottom: 1px solid var(--sw-line); padding: 12px 0; }
.sw-facet summary { cursor: pointer; font-weight: 600; font-size: .95em; list-style: none; display: flex; justify-content: space-between; }
.sw-facet summary::-webkit-details-marker { display: none; }
.sw-facet summary::after { content: "\2212"; color: var(--sw-mute); }
.sw-facet:not([open]) summary::after { content: "+"; }
.sw-facet-body { padding-top: 10px; }
.sw-opt { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: .92em; cursor: pointer; }
.sw-opt input { margin: 0; flex: none; }
.sw-opt span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sw-opt em { font-style: normal; color: var(--sw-mute); font-size: .85em; }
.sw-opt:hover span { text-decoration: underline; }
.sw-hidden { display: none !important; }
.sw-find { width: 100%; height: 34px; margin-bottom: 6px; padding: 0 8px; border: 1px solid var(--sw-line); border-radius: 3px; font-size: 13px; }
.sw-price-in { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.sw-price-in label { flex: 1; display: flex; align-items: center; gap: 3px; border: 1px solid var(--sw-line); padding: 0 6px; height: 36px; border-radius: 3px; background: #fff; }
.sw-price-in input { width: 100%; border: 0; outline: 0; font-size: 13px; background: none; padding: 0; min-width: 0; }
.sw-range { position: relative; height: 22px; margin: 0 6px 12px; }
.sw-range::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; background: var(--sw-line); border-radius: 2px; }
.sw-range input { position: absolute; left: -6px; width: calc(100% + 12px); top: 0; height: 22px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.sw-range input::-webkit-slider-runnable-track { background: none; height: 22px; }
.sw-range input::-moz-range-track { background: none; }
.sw-range input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--sw-dark); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--sw-dark); cursor: pointer; }
.sw-range input::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--sw-dark); border: 2px solid #fff; cursor: pointer; }
.sw-apply { background: var(--sw-dark); color: #fff; border: 0; padding: 9px 16px; font-size: 13px; cursor: pointer; border-radius: 3px; }
.sw-apply:hover { background: #000; }
.sw-fdone { display: none; width: 100%; margin-top: 14px; }

.sw-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.sw-chip { background: var(--sw-soft); border: 1px solid var(--sw-line); border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer; color: var(--sw-ink); }
.sw-chip:hover { border-color: var(--sw-dark); }

/* product cards */
.sw-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 24px; }
.sw-grid:not(.sw-list) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sw-card { margin: 0; padding: 0; display: flex; flex-direction: column; background: #fff; }
.sw-thumb { position: relative; display: block; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; }
.sw-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .25s; }
.sw-card:hover .sw-thumb img { transform: scale(1.04); }
.sw-noimg { display: block; width: 100%; height: 100%; background: var(--sw-soft); }
.sw-badge { position: absolute; top: 0; right: 0; z-index: 1; background: var(--sw-dark); color: #fff; font-size: 10px; letter-spacing: .04em; padding: 5px 8px; line-height: 1; }
.sw-badge.sw-out { background: #8a2c2c; }
.sw-badge.sw-pre { background: #1d5fa8; }
.sw-badge.sw-back { background: #7a5a12; }
.sw-sale { position: absolute; top: 0; left: 0; z-index: 1; background: var(--sw-accent); color: #fff; font-size: 10px; letter-spacing: .04em; padding: 5px 8px; line-height: 1; }
.sw-body { padding: 12px 2px 0; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.sw-title { color: var(--sw-ink); text-decoration: none; font-size: .95em; line-height: 1.35; font-weight: 500; }
.sw-title:hover { text-decoration: underline; }
.sw-desc { margin: 0; color: var(--sw-mute); font-size: .8em; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sw-brand { color: var(--sw-mute); font-size: .8em; }
.sw-rate { display: flex; align-items: center; gap: 8px; min-height: 0; font-size: .8em; color: var(--sw-mute); }
.sw-stars { position: relative; display: inline-block; font-size: 15px; line-height: 1; width: 5.6em; height: 1em; }
.sw-stars::before, .sw-stars span::before { content: "\2605\2605\2605\2605\2605"; letter-spacing: 1px; white-space: nowrap; }
.sw-stars::before { color: #d6d9de; }
.sw-stars span { position: absolute; left: 0; top: 0; height: 100%; overflow: hidden; }
.sw-stars span::before { color: #f59e0b; }
.sw-price { font-weight: 600; font-size: 1.02em; }
.sw-price del { color: var(--sw-mute); font-weight: 400; font-size: .9em; }
.sw-price ins { text-decoration: none; color: var(--sw-accent); }
.sw-price small { font-weight: 400; color: var(--sw-mute); font-size: .78em; }
.sw-act { margin-top: auto; padding-top: 6px; align-self: flex-start; }
.sw-add, .sw-btn { display: inline-block; background: var(--sw-dark); color: #fff; border: 0; padding: 9px 16px; font-size: 13px; cursor: pointer; text-decoration: none; border-radius: 3px; line-height: 1.2; }
.sw-btn { background: #fff; color: var(--sw-ink); border: 1px solid var(--sw-dark); }
.sw-add:hover { background: #000; color: #fff; }
.sw-btn:hover { background: var(--sw-dark); color: #fff; }
.sw-add.is-added { background: var(--sw-ok); }
.sw-add:disabled { opacity: .8; cursor: default; }

/* list view */
.sw-grid.sw-list { grid-template-columns: 1fr; gap: 16px; }
.sw-list .sw-card { flex-direction: row; gap: 20px; border-bottom: 1px solid var(--sw-line); padding-bottom: 16px; }
.sw-list .sw-thumb { flex: 0 0 170px; width: 170px; }
.sw-list .sw-body { padding-top: 4px; }
.sw-list .sw-desc { -webkit-line-clamp: 3; font-size: .85em; }

/* pager, empty, tabs content */
.sw-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 34px 0 6px; }
.sw-pager a, .sw-gap { min-width: 38px; height: 38px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sw-line); color: var(--sw-ink); text-decoration: none; font-size: 14px; border-radius: 3px; background: #fff; }
.sw-gap { border: 0; }
.sw-pager a:hover { border-color: var(--sw-dark); }
.sw-pager a.is-current { background: var(--sw-dark); border-color: var(--sw-dark); color: #fff; }
.sw-empty { text-align: center; padding: 50px 10px; color: var(--sw-mute); }
.sw-empty h3 { color: var(--sw-ink); margin: 0 0 6px; }
.sw-error { padding: 24px; background: var(--sw-soft); border-left: 4px solid var(--sw-accent); }
ul.sw-list { list-style: none; margin: 0; padding: 0; }
ul.sw-list li { margin: 0; border-bottom: 1px solid var(--sw-line); }
ul.sw-list a { display: block; padding: 14px 4px; color: var(--sw-ink); text-decoration: none; }
ul.sw-list a:hover b { text-decoration: underline; }
ul.sw-list small { display: block; color: var(--sw-mute); margin-top: 3px; }

/* autocomplete dropdown */
.sw-ac { position: absolute; z-index: 99999; display: none; background: #fff; border: 1px solid var(--sw-line); box-shadow: 0 14px 40px rgba(0, 0, 0, .18); max-height: calc(100vh - 140px); overflow: auto; grid-template-columns: 290px minmax(0, 1fr); gap: 0; }
.sw-ac[style*="display: block"] { display: grid !important; }
.sw-ac-side { padding: 16px 18px; background: #fafbfc; border-right: 1px solid var(--sw-line); }
.sw-ac-solo { grid-column: 1 / -1; border-right: 0; }
.sw-ac-main { padding: 16px 20px; }
.sw-ac h4 { margin: 14px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--sw-line); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sw-mute); font-weight: 700; }
.sw-ac-side section:first-child h4, .sw-ac-main h4 { margin-top: 0; }
.sw-ac-side a { display: block; padding: 7px 6px; color: var(--sw-ink); text-decoration: none; font-size: 14px; border-radius: 3px; line-height: 1.3; }
.sw-ac-side a small { display: block; color: var(--sw-mute); font-size: 11.5px; margin-top: 1px; }
.sw-ac a:hover, .sw-ac a.is-active { background: #eef0f3; }
.sw-ic { display: inline-block; width: 20px; color: var(--sw-mute); }
.sw-ac-all { margin-top: 14px; background: var(--sw-dark) !important; color: #fff !important; text-align: center; padding: 11px 8px !important; font-weight: 600; letter-spacing: .02em; }
.sw-ac-all:hover, .sw-ac-all.is-active { background: #000 !important; }
.sw-ac-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sw-ac-card { display: flex; flex-direction: column; gap: 5px; padding: 6px; color: var(--sw-ink); text-decoration: none; font-size: 13px; border-radius: 3px; position: relative; }
.sw-ac-img { display: block; aspect-ratio: 1 / 1; background: #fff; }
.sw-ac-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sw-ac-title { line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sw-ac-card .sw-badge { position: static; align-self: flex-start; }
.sw-ac-empty { padding: 30px 10px; color: var(--sw-mute); }
.sw-ac-empty b { color: var(--sw-ink); }

/* responsive */
@media (max-width: 1000px) {
  .sw-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 20px; }
  .sw-grid:not(.sw-list) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sw-layout { display: block; }
  .sw-ftoggle { display: inline-block; }
  .sw-side { display: none; position: fixed; z-index: 99998; inset: 0; max-height: none; background: #fff; padding: 16px 18px 90px; top: 0; }
  .sw-side-open .sw-side { display: block; }
  .sw-side-open .sw-fdone { display: block; position: fixed; left: 18px; right: 18px; bottom: 16px; width: auto; padding: 14px; font-size: 15px; }
  .sw-sort { min-width: 0; flex: 1; }
  .sw-tools { width: 100%; }
  .sw-grid:not(.sw-list) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .sw-list .sw-card { flex-direction: row; }
  .sw-list .sw-thumb { flex-basis: 110px; width: 110px; }
  .sw-tabs { gap: 18px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .sw-tabs::-webkit-scrollbar { display: none; }
  .sw-tabs a { white-space: nowrap; font-size: 1.05em; }
  .sw-ac[style*="display: block"] { display: block !important; }
  .sw-ac-side { border-right: 0; border-bottom: 1px solid var(--sw-line); }
  .sw-ac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .sw-add, .sw-btn { width: 100%; text-align: center; padding: 10px 6px; }
}

.sw-subcats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.sw-subcats span { color: var(--sw-mute); font-size: .9em; margin-right: 4px; }
.sw-subcats a { border: 1px solid var(--sw-line); background: #fff; color: var(--sw-ink); text-decoration: none; padding: 6px 14px; border-radius: 999px; font-size: 14px; }
.sw-subcats a:hover { border-color: var(--sw-dark); background: var(--sw-soft); }

/* archive pages: hide the native grid from first paint (html.swms-pending is set in <head>, removed again if search fails) */
html.swms-pending ul.products, html.swms-pending .woocommerce-result-count, html.swms-pending .woocommerce-ordering, html.swms-pending nav.woocommerce-pagination { display: none !important; }
.sw-skel { min-height: 900px; }
.sw-sk { background: linear-gradient(90deg, #eceef1 25%, #f6f7f9 50%, #eceef1 75%); background-size: 200% 100%; animation: sw-shimmer 1.3s linear infinite; border-radius: 3px; }
.sw-sk-h { height: 18px; width: 45%; margin: 22px 0 12px; }
.sw-sk-l { height: 14px; margin: 9px 0; }
.sw-sk-s { width: 55%; }
.sw-sk-card { padding: 6px; }
.sw-sk-img { aspect-ratio: 1 / 1; margin-bottom: 12px; }
@keyframes sw-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sw-sk { animation: none; } }
.sw-dym { margin: 0 0 10px; font-size: 1.05em; }
.sw-dym a { color: var(--sw-accent); text-decoration: underline; }

/* theme input styles must not leak into the price boxes (they made the right box overflow on phones) */
.sw-app .sw-price-in label { min-width: 0; box-sizing: border-box; }
.sw-app .sw-price-in input[type="number"] { width: 100% !important; min-width: 0 !important; height: auto !important; border: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; -moz-appearance: textfield; }

/* phone: the filter drawer's "Show results" button lives in a bar at the top, clear of chat/language widgets at the bottom */
@media (max-width: 760px) {
  .sw-side { padding: 72px 18px 24px !important; }
  .sw-side-open .sw-fdone { top: 0 !important; bottom: auto !important; left: 0 !important; right: 0 !important; border-radius: 0; margin: 0; z-index: 2; }
}

/* phone: dropdown shows the products first, then categories/pages/suggestions */
@media (max-width: 760px) {
  .sw-ac[style*="display: block"] { display: flex !important; flex-direction: column; }
  .sw-ac-main { order: -1; padding: 14px 14px 4px; }
  .sw-ac-side { border-bottom: 0; border-top: 1px solid var(--sw-line); }
  .sw-ac-solo { border-top: 0; }
}

.sw-ac-all-m { display: none; }
@media (max-width: 760px) {
  .sw-ac-all-m { display: block; margin: 6px 0 12px; }
  .sw-ac-side .sw-ac-all { display: none; }
  .sw-ac-grid .sw-ac-card:nth-child(n+5) { display: none; }
  .sw-ac-grid { gap: 8px; }
  .sw-ac-card { padding: 4px; font-size: 12.5px; }
}

/* Shopper Approved stars */
.sw-rate .star_container { min-height: 22px; }
.sw-list .sw-rate .star_container:empty { min-height: 0; }
.sw-rate .group-stars { font-size: 13px; }

/* "Notify me" button */
.sw-notify { white-space: normal; text-align: center; cursor: pointer; }

.sw-act .sw-notify { height: auto; min-height: 38px; padding: 8px 12px; line-height: 1.25; white-space: normal; max-width: 100%; text-align: center; }
@media (max-width: 760px) { .sw-act .sw-notify { width: 100%; } }