/* ---------------------------------------------------------------------------
   Palette.

   LIGHT ONLY, deliberately. The widget renders inside a WordPress theme that has
   no dark mode, and a self-darkening component on a light page reads as broken
   rather than as considered. Every colour is painted explicitly so the widget
   never borrows the host's ground.

   Values come from the SITE's palette via fzd tokens, substituted at build
   time, so one shared component takes on each site's brand — teal on freezers,
   orange on tool-bench — without a per-site fork. Fallbacks keep it legible if a
   site's palette is missing a key.

   Semantic colours (--flag, --ok) are deliberately NOT from the accent ramp:
   "worse than its class" must not be rendered in the brand colour.
   --------------------------------------------------------------------------- */
:root{
  --ground: var(--fzd-page-bg, #ffffff);
  --surface: var(--fzd-surface, #ffffff);
  --surface-2: var(--fzd-hero-bg, #f1f5f7);
  --line: var(--fzd-border, #d8dfe3);
  --ink: var(--fzd-heading, #16202a);
  --ink-2: var(--fzd-body-mid, #3f4b55);
  --muted: var(--fzd-muted, #68757f);
  --accent: var(--fzd-accent, #0d9488);
  --accent-ink: var(--fzd-accent-deep, #0f766e);
  --accent-wash: var(--fzd-accent-soft, #ccfbf1);
  --flag: #b23a0e;
  --flag-wash: #fbeae3;
  --ok: #2f6b3c;
  --shadow: 0 1px 2px rgba(20,24,28,.06), 0 4px 14px rgba(20,24,28,.05);
  --r: 3px;
}
/* ---------- masthead ---------- */

/* ---------- layout ---------- */
.sb-cols{display:grid;grid-template-columns:308px 1fr;gap:26px;align-items:start}
@media (max-width:880px){.sb-cols{grid-template-columns:1fr}}

/* ---------- filter panel ---------- */
.sb-panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);position:sticky;top:16px
}
@media (max-width:880px){.sb-panel{position:static}}
.sb-panel-hd{
  padding:13px 16px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;gap:10px
}
.sb-panel-hd h2{
  font-family:"Barlow Semi Condensed",sans-serif;font-size:14px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;margin:0
}
.sb-reset{
  background:none;border:0;padding:0;cursor:pointer;font-family:Barlow,sans-serif;
  font-size:12.5px;color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px
}
.sb-reset:hover{color:var(--ink)}
fieldset{border:0;margin:0;padding:15px 16px;border-bottom:1px solid var(--line)}
fieldset:last-of-type{border-bottom:0}
legend{
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:600;font-size:14.5px;
  padding:0;margin-bottom:3px;color:var(--ink)
}
.sb-hint{font-size:12.5px;color:var(--muted);margin:0 0 10px;line-height:1.4}
.sb-opts{display:flex;flex-direction:column;gap:5px}
.sb-opt{
  display:flex;align-items:flex-start;gap:9px;padding:7px 9px;cursor:pointer;
  border:1px solid transparent;border-radius:var(--r);transition:background .12s,border-color .12s
}
.sb-opt:hover{background:var(--surface-2)}
.sb-opt input{margin:2px 0 0;accent-color:var(--accent);flex:0 0 auto;cursor:pointer}
.sb-opt input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sb-opt-t{font-size:14.5px;line-height:1.3}
.sb-opt-n{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);
  margin-top:2px;font-variant-numeric:tabular-nums
}
.sb-opt.sb-on{background:var(--accent-wash);border-color:var(--accent)}

/* ---------- results ---------- */
.sb-res-hd{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding-bottom:11px;margin-bottom:16px;border-bottom:1px solid var(--line);flex-wrap:wrap
}
.sb-count{font-family:"Barlow Semi Condensed",sans-serif;font-size:21px;font-weight:600}
.sb-count b{font-family:"IBM Plex Mono",monospace;font-size:20px;color:var(--accent-ink);font-weight:600}
.sb-sort{
  font-family:Barlow,sans-serif;font-size:13px;padding:5px 8px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);color:var(--ink);cursor:pointer
}
.sb-sort:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.sb-grid{display:flex;flex-direction:column;gap:11px}
.sb-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 17px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:1fr 128px;gap:16px;align-items:start
}
@media (max-width:560px){.sb-card{grid-template-columns:1fr}}
.sb-title{
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:600;font-size:17px;
  line-height:1.22;margin:0 0 9px;text-wrap:balance
}
.sb-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px}
.sb-chip{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.03em;
  padding:2.5px 7px;border-radius:2px;background:var(--surface-2);color:var(--ink-2);
  text-transform:uppercase
}
.sb-chip.sb-acc{background:var(--accent-wash);color:var(--accent-ink)}
.sb-chip.sb-unk{background:var(--flag-wash);color:var(--flag)}

.sb-specs{display:flex;flex-wrap:wrap;gap:3px 22px}

/* baseline rail — the differentiator, made visible */
.sb-rail{border-left:1px solid var(--line);padding-left:15px}
@media (max-width:560px){.sb-rail{border-left:0;border-top:1px solid var(--line);padding:13px 0 0}}
.sb-rail-lbl{
  font-family:"Barlow Semi Condensed",sans-serif;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0 0 6px
}
.sb-cap{
  font-family:"IBM Plex Mono",monospace;font-size:26px;font-weight:600;line-height:1;
  margin:0;font-variant-numeric:tabular-nums
}
.sb-u{font-size:12px;color:var(--muted);font-weight:400;margin-left:3px}
.sb-bar{height:5px;background:var(--surface-2);border-radius:3px;margin:9px 0 5px;position:relative;overflow:hidden}
.sb-bar i{position:absolute;inset-block:0;background:var(--accent);border-radius:3px;display:block}
.sb-bar u{position:absolute;inset-block:-3px;width:2px;background:var(--ink);text-decoration:none}
.sb-vs{font-size:11.5px;line-height:1.35;color:var(--ink-2);margin:0}
.sb-vs b{color:var(--ink);font-weight:600}
.sb-vs.sb-none{color:var(--muted);font-style:italic}

.sb-buy{
  display:inline-block;margin-top:11px;padding:7px 13px;background:var(--accent);color:#fff;
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:600;font-size:13.5px;
  letter-spacing:.05em;text-transform:uppercase;text-decoration:none;border-radius:var(--r);
  transition:background .12s
}
.sb-buy:hover{background:var(--accent-ink)}
.sb-buy:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.sb-empty{
  padding:44px 22px;text-align:center;border:1px dashed var(--line);border-radius:var(--r);color:var(--muted)
}
.sb-empty p{margin:0 0 8px}
.sb-more{
  width:100%;padding:11px;margin-top:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);font-family:"Barlow Semi Condensed",sans-serif;font-weight:600;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);cursor:pointer
}
.sb-more:hover{background:var(--surface-2)}

footer.disc{
  margin-top:34px;padding:17px 0 0;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);line-height:1.55;max-width:74ch
}
footer.disc b{color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------------------------------------------------------------------------
   Spec list.

   The <dd> elements carry a 40px browser default margin-inline-start. The
   prototype cancelled it with a `.spec dd` rule, but the rendered markup uses a
   bare <div> wrapper with no class, so that selector never matched and every
   value sat indented from its own label. Target the list itself, not a class
   the markup does not carry.

   <dl> also has a 1em default block margin, which is where the dead space above
   the Amazon button came from.
   --------------------------------------------------------------------------- */
.sb-finder .sb-specs{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin:0; padding:0;
}
.sb-finder .sb-specs > div{ min-width:82px }
.sb-finder .sb-specs dt{
  font-family:"Barlow Semi Condensed",sans-serif; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin:0 0 2px; white-space:nowrap;
}
.sb-finder .sb-specs dd{
  margin:0;                       /* kills the 40px default indent */
  font-family:"IBM Plex Mono",monospace; font-size:14px; font-weight:500;
  font-variant-numeric:tabular-nums; color:var(--ink); line-height:1.25;
}
.sb-finder .sb-ns{
  color:var(--flag); font-size:11.5px; font-weight:400; letter-spacing:.02em;
  font-family:Barlow,sans-serif;
}
.sb-finder .sb-u{ font-size:11px; color:var(--muted); font-weight:400; margin-left:3px }

/* Card body as a column so the button spacing is one gap, not a stack of margins. */
.sb-finder .sb-body{ display:flex; flex-direction:column; align-items:flex-start; gap:11px }
.sb-finder .sb-title{ margin:0 }
.sb-finder .sb-chips{ margin:0 }
.sb-finder .sb-buy{ margin-top:2px }

/* Rail: give the baseline note room and stop it reading as an error. */
.sb-finder .sb-rail{ display:flex; flex-direction:column; gap:6px }
.sb-finder .sb-cap{ margin:0 }
.sb-finder .sb-vs{ margin:0; font-size:11.5px; line-height:1.45 }
.sb-finder .sb-vs.sb-none{ font-style:normal; color:var(--muted) }
.sb-finder .sb-bar{ margin:2px 0 0 }
.sb-finder .sb-ns-big{
  font-size:15px; color:var(--flag); font-family:Barlow,sans-serif; margin:0; font-weight:500;
}
.sb-finder .sb-dim{ color:var(--muted) }
.sb-finder .sb-noscript{ padding:14px; border:1px solid var(--line); border-radius:3px; color:var(--ink-2) }
.sb-finder [aria-busy="true"]{ opacity:.55; transition:opacity .15s }
/* The widget renders inside a WordPress theme, so it must declare its own type rather than
   inheriting whatever the theme sets. The prototype carried these on `body`, which is not shipped.
   Every family has a real fallback stack: Google Fonts is the only external host the page may
   reach, and a blocked or slow load must not leave the finder in a serif. */
.sb-finder{
  container-type:inline-size;
  font-family:Barlow,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.5; color:var(--ink);
}
.sb-finder h2,.sb-finder h3,.sb-finder legend,.sb-finder .sb-count,
.sb-finder .sb-buy,.sb-finder .sb-more,.sb-finder .sb-rail-lbl,.sb-finder .sb-specs dt{
  font-family:"Barlow Semi Condensed",Barlow,"Arial Narrow",sans-serif;
}
.sb-finder .sb-cap,.sb-finder .sb-specs dd,.sb-finder .sb-chip,.sb-finder .sb-opt-n{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.sb-finder *{ box-sizing:border-box }

/* ---------------------------------------------------------------------------
   Thumbnail column.

   Cards become thumb | body | baseline-rail. The image box is fixed so a row's
   height does not depend on whether its thumbnail has loaded, and object-fit
   keeps tall chest freezers and wide reach-ins in the same square without
   distorting either.
   --------------------------------------------------------------------------- */
.sb-finder .sb-card{
  grid-template-columns:88px 1fr 128px;
  gap:16px;
  align-items:start;
}
.sb-finder .sb-thumb{
  width:88px; height:88px; border:1px solid var(--line); border-radius:var(--r);
  background:#fff;                     /* Amazon cutouts assume white; keep it in both themes */
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.sb-finder .sb-thumb img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block;
}
.sb-finder .sb-thumb-none{
  background:var(--surface-2); border-style:dashed;
}
@container (max-width: 720px){
  .sb-finder .sb-card{ grid-template-columns:64px 1fr; }
  .sb-finder .sb-thumb{ width:64px; height:64px }
  .sb-finder .sb-rail{
    grid-column:1 / -1; border-left:0; border-top:1px solid var(--line); padding:12px 0 0;
  }
}
@media (max-width:560px){
  .sb-finder .sb-card{ grid-template-columns:64px 1fr }
  .sb-finder .sb-thumb{ width:64px; height:64px }
  .sb-finder .sb-rail{ grid-column:1 / -1; border-left:0; border-top:1px solid var(--line); padding:12px 0 0 }
}

/* ---------------------------------------------------------------------------
   Card breathing room + the comparison panel.

   The first pass packed title, chips, specs and button into one column with
   almost no vertical rhythm, so the card read as a dense block rather than as
   three distinct things. Spacing here is deliberate: a larger gap BETWEEN
   groups than within them is what makes the grouping legible without borders.
   --------------------------------------------------------------------------- */
.sb-finder .sb-card{
  padding:20px 22px;
  gap:22px;
  grid-template-columns:96px 1fr 210px;
}
.sb-finder .sb-thumb{ width:96px; height:96px }

/* Card body: one rhythm, set once, instead of per-element margins. */
.sb-finder .sb-body{ gap:14px }
.sb-finder .sb-title{ font-size:17.5px; line-height:1.3 }
.sb-finder .sb-chips{ gap:6px }
.sb-finder .sb-chip{ padding:3.5px 9px; font-size:11px }
.sb-finder .sb-chip.sb-price{
  background:transparent; color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line);
}

/* Specs get real column spacing — they were colliding at narrow widths. */
.sb-finder .sb-specs{ gap:14px 34px }
.sb-finder .sb-specs > div{ min-width:92px }
.sb-finder .sb-specs dt{ margin-bottom:4px }
.sb-finder .sb-specs dd{ font-size:15px }
.sb-finder .sb-buy{ margin-top:4px; padding:9px 16px }

/* Comparison panel. */
.sb-finder .sb-rail{ gap:0; padding-left:20px }
.sb-finder .sb-rail-lbl{ margin:0 0 4px }
.sb-finder .sb-cap{ font-size:28px; line-height:1 }
.sb-finder .sb-class{
  margin:8px 0 0; font-size:11.5px; line-height:1.35; color:var(--ink-2);
  font-family:"Barlow Semi Condensed",Barlow,sans-serif; letter-spacing:.02em;
}
.sb-finder .sb-metric{
  margin-top:14px; padding-top:13px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:5px;
}
.sb-finder .sb-metric-lbl{
  margin:0; font-family:"Barlow Semi Condensed",Barlow,sans-serif; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.sb-finder .sb-metric-v{
  margin:0; font-family:"IBM Plex Mono",monospace; font-size:19px; font-weight:600;
  line-height:1.1; font-variant-numeric:tabular-nums;
}
.sb-finder .sb-metric-v .sb-u{
  display:block; margin:3px 0 0; font-size:10.5px; line-height:1.3; letter-spacing:.01em;
}
/* Semantic, and separate from the accent — better and worse are not brand colours. */
.sb-finder .sb-good{ color:var(--ok) }
.sb-finder .sb-poor{ color:var(--flag) }
.sb-finder .sb-vs.sb-sub{
  margin-top:12px; padding-top:11px; border-top:1px solid var(--line);
  color:var(--muted); font-size:11px;
}
@container (max-width: 780px){
  .sb-finder .sb-card{ grid-template-columns:72px 1fr }
  .sb-finder .sb-thumb{ width:72px; height:72px }
  .sb-finder .sb-rail{
    grid-column:1 / -1; border-left:0; border-top:1px solid var(--line);
    padding:16px 0 0; margin-top:4px;
  }
}

/* ---------------------------------------------------------------------------
   Vertical rhythm inside the card body.

   The body column is a flex column, so ONE gap governs the spacing between
   title, attributes, specifications and the call to action — no per-element
   margins to collide. The rule that makes it legible is that the gap between
   groups exceeds the gap within any group: 18px between sections against 4px
   from a spec label to its value.

   Note the explicit .sb-body class. This was previously `> div:first-child`,
   which stopped matching the moment a thumbnail was added ahead of it, and the
   spacing silently reverted to browser defaults.
   --------------------------------------------------------------------------- */
.sb-finder .sb-body{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:18px;
}
.sb-finder .sb-body > *{ margin:0 }
.sb-finder .sb-title{ line-height:1.32 }
/* Attributes belong to the title, so they sit closer to it than to the specs. */
.sb-finder .sb-chips{ margin-top:-8px }
.sb-finder .sb-specs{ gap:16px 34px }
.sb-finder .sb-buy{ margin-top:2px }


/* ---------------------------------------------------------------------------
   Theme isolation.

   The widget renders inside a WordPress theme whose own rules reach into it: a
   card title is an <h3> inside .page-content, so base.css was colouring it with
   the heading accent and product names read as links. Anything the widget draws
   must state its own colour, not inherit one — the same principle that stopped
   it borrowing the host's background.
   --------------------------------------------------------------------------- */
.sb-finder .sb-title,
.sb-finder .sb-panel h2,
.sb-finder .sb-panel legend{
  color:var(--ink);
}
.sb-finder .sb-title{
  font-family:"Barlow Semi Condensed",Barlow,"Arial Narrow",sans-serif;
  font-weight:600;
  letter-spacing:normal;
  text-transform:none;
}
/* The theme underlines and colours links in body copy; inside the widget only the
   action button and the reset control are links, and both style themselves. */
.sb-finder a:not(.sb-buy){ color:var(--accent-ink) }

/* Space above each question heading.
 *
 * It has to be MARGIN ON THE FIELDSET. A browser anchors the rendered legend to its
 * fieldset's block-start edge, so the fieldset's own padding-top and the legend's
 * margin-top both leave the heading exactly where it was — measured at 0px of
 * movement for each, with the legend's top identical to the fieldset's top. Moving
 * the fieldset moves the anchored legend with it.
 *
 * The divider is the previous fieldset's border-bottom, so this margin lands between
 * that rule and the next heading, which is where the separation is wanted. The first
 * question gets the same treatment against the panel header, so every heading in the
 * panel sits the same distance below the rule above it.
 */
.sb-finder .sb-panel fieldset{ margin-top:16px }

/* Visually hidden but available to assistive tech — the sort control needs a name,
   and the visible <select> options do not provide one. */
.sb-finder .sb-vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* The no-JS submit row. <noscript> content is only parsed when scripting is off, so nothing
   further is needed to hide it — this only styles it for the readers who see it. */
.sb-finder .sb-noscript-actions{
  display:flex; align-items:center; gap:14px;
  padding:16px; border-top:1px solid var(--line);
}

/* ---------------------------------------------------------------------------
   The action button, defended against the theme.

   `.page-content a` (specificity 0,1,1) outranks `.sb-buy` (0,1,0), so the theme
   painted the button with its own link colour and underline — #0f766e text on a
   #0d9488 ground, which is a 1.2:1 contrast ratio and effectively unreadable.
   Scoping under .sb-finder takes it to 0,2,0 and wins cleanly without !important.

   Every property the theme sets on links is restated here rather than assumed:
   colour, decoration, underline offset and hover, because inheriting any one of
   them reintroduces the same failure in a different form.
   --------------------------------------------------------------------------- */
/* The ground is --accent-deep, not --accent.
   Measured: white on --accent (#0d9488) is 3.74:1. That clears WCAG AA only for LARGE text, and
   this button is 13.5px semibold — not large — so the threshold is 4.5:1 and it failed. White on
   --accent-deep (#0f766e) measures 5.47:1 and passes for normal text with room to spare. The
   hover then goes a step darker again so the state change stays perceptible. */
.sb-finder .sb-buy,
.sb-finder .sb-buy:link,
.sb-finder .sb-buy:visited{
  color:#ffffff;
  background:var(--accent-ink);
  text-decoration:none;
  border-bottom:0;
  box-shadow:none;
}
.sb-finder .sb-buy:hover,
.sb-finder .sb-buy:focus{
  color:#ffffff;
  background:#115e59;   /* teal-800 — 7.58:1, and a visible step darker than the resting state */
  text-decoration:none;
}
.sb-finder .sb-buy:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:2px;
}
/* Same defence for the panel's reset control, which is also an <a>/<button> in content flow. */
.sb-finder .sb-reset{
  color:var(--accent-ink);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* ---------------------------------------------------------------------------
   Card layout: two rows.

   Replaces the three-column grid. Amazon listing titles run past 160 characters
   routinely, and a ~400px middle column wrapped them to five or six lines while
   the columns either side stayed short — a tall band of white space beside the
   specs, and no two cards the same height.

   Row 1 is thumbnail + title, so the title has the full card width and wraps to
   two lines instead of six. Row 2 carries the things that are naturally narrow.
   --------------------------------------------------------------------------- */
.sb-finder .sb-card{
  display:block;
  padding:18px 20px;
}
.sb-finder .sb-head{
  display:flex;
  align-items:center;
  gap:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.sb-finder .sb-head .sb-thumb{
  flex:0 0 auto; width:76px; height:76px;
}
.sb-finder .sb-title{
  margin:0;
  font-size:17px;
  line-height:1.32;
  /* Long titles are the norm here; cap at three lines so one outlier cannot make
     a card twice the height of its neighbours. The full title stays in the DOM
     for crawlers and screen readers. */
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.sb-finder .sb-detail{
  display:grid;
  grid-template-columns:1fr 260px;
  gap:22px;
  padding-top:14px;
  align-items:start;
}
.sb-finder .sb-body{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
}
.sb-finder .sb-chips{ margin:0 }
.sb-finder .sb-specs{ gap:12px 32px; margin:0 }
.sb-finder .sb-rail{
  border-left:1px solid var(--line);
  padding-left:20px;
  gap:0;
}
@container (max-width: 700px){
  .sb-finder .sb-detail{ grid-template-columns:1fr; gap:16px }
  .sb-finder .sb-rail{
    border-left:0; border-top:1px solid var(--line); padding:14px 0 0;
  }
}
@media (max-width:560px){
  .sb-finder .sb-detail{ grid-template-columns:1fr; gap:16px }
  .sb-finder .sb-rail{ border-left:0; border-top:1px solid var(--line); padding:14px 0 0 }
  .sb-finder .sb-head .sb-thumb{ width:60px; height:60px }
}

/* Panel header: "Clear all" was breaking onto two lines against the heading. */
.sb-finder .sb-panel-hd{ align-items:center; gap:12px }
.sb-finder .sb-panel-hd h2{ font-size:13px; line-height:1.25 }
.sb-finder .sb-reset{ white-space:nowrap; flex:0 0 auto }

/* ---------------------------------------------------------------------------
   Panel header.

   The theme sets margin-top:44px on headings in content flow. Inside a flex row
   with align-items:center that margin is centred ALONG WITH the element, so the
   heading sat 57px from the top while "Clear all" sat at 47px — 15px out of
   alignment — and the header box was 110px tall to hold 16px of text.

   Zeroing the margins is the fix; the box then sizes to its content and both
   items centre on the same axis. Third instance of the theme reaching in, after
   the card titles and the action button.
   --------------------------------------------------------------------------- */
.sb-finder .sb-panel-hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  min-height:0;
}
.sb-finder .sb-panel-hd h2,
.sb-finder .sb-panel-hd .sb-reset{
  margin:0;
  padding:0;
  line-height:1.3;
}
.sb-finder .sb-panel-hd h2{
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
}
.sb-finder .sb-panel-hd .sb-reset{
  font-size:12.5px;
  white-space:nowrap;
  flex:0 0 auto;
  align-self:center;
}