/* ============================================================================
   WBV — Archive filter bar v3 (v18 design)
   Loaded ONLY when wbv_arc_bar_v3_enabled() is true (admin gate / ?wbv_bar=new).
   Everything is scoped under body.wbv-bar3 so the public bar is untouched and
   the inlined critical CSS (118 .wbv-arc-fb rules) cannot bleed in.
   Built 2026-08-01. Step 1 = presentation only.
   ========================================================================== */

body.wbv-bar3 {
  --b3-line:      #e8e4dd;
  --b3-line-2:    #dcd7cd;
  --b3-sand:      #f9f8f5;
  --b3-ink:       #1a1612;
  --b3-ink-2:     #5c554c;
  --b3-ink-3:     #948d81;
  --b3-accent:    #a08875;          /* bronze — LT default */
  --b3-deep:      #1f3d36;          /* selected / emphasis */
  --b3-tint:      160, 136, 117;    /* #a08875 */
  --b3-op:        .50;
  --b3-h:         46px;
  --b3-rad:       10px;
}

/* Per-leg tint. Never unify these — see the intent-token design system. */
body.wbv-bar3 .wbv-arc[data-intent="sale"] {
  --b3-tint: 20, 63, 97;            /* #143f61 */
  --b3-accent: #4f7c82;
  --b3-deep: #143f61;
}

/* --- 1. Glass frame ------------------------------------------------------
   Width must line up with the card grid, which lives in .wbv-arc-grid-wrap
   (max-width 1320 + 24px side padding -> 1272 of content, 16px below 700px).
   Mirroring that formula keeps the bar's border flush with the cards at every
   breakpoint instead of guessing a single max-width. */
body.wbv-bar3 .wbv-arc3 {
  max-width: 1272px;
  margin-left: auto;
  margin-right: auto;
  /* Mockup `.stage{margin:-96px auto 0}` — the bar sits OVER the hero.
     Measured on the live hero: the last line of hero copy ends 145px above the
     hero's bottom edge on desktop and 103px on phone, so -96 clears the text by
     49px on desktop. Phone uses -72 (31px clearance) — see the 560px block. */
  margin-top: -96px;
  border: 1px solid rgba(250, 250, 250, .26);
  padding: 12px 20px;
  border-radius: 14px;
  overflow: visible;
  box-shadow: 0 18px 46px rgba(20, 40, 50, .10);   /* softened from .20 — Pierre 2026-08-02 */
  position: relative;
  /* NO z-index here on purpose. A z-index on a positioned element creates a
     stacking context, and every descendant is then trapped inside it — the
     More-filters modal sets z-index:9001 but the whole frame was sitting at 5,
     so the sticky header (z-index:1001) painted straight over it. Depth is
     handled by the glass layer at 0 and the content at 1 below, which needs no
     stacking context on the frame itself. */
}

/* The tint + blur live on a pseudo-element, NOT on .wbv-arc3 itself.
   backdrop-filter (like filter/transform/perspective) makes an element a
   containing block for `position:fixed` descendants — which silently re-anchored
   the More-filters modal to the bar instead of the viewport, so it scrolled away
   with the page. The archive's own modal CSS was already correct
   (`position:fixed;top:50%;left:50%;translate(-50%,-50%)`); this frame was
   breaking it. Painting the glass on ::before keeps the look and restores a
   viewport-fixed modal. */
body.wbv-bar3 .wbv-arc3::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: rgba(var(--b3-tint), var(--b3-op));
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
}

/* Until the JS reflow finishes, hide the pieces mid-move so the old layout
   does not flash. .is-ready is added at the end of the reflow. */
body.wbv-bar3 .wbv-arc3:not(.is-ready) { visibility: hidden; }

/* Content sits above the glass layer purely by DOM order — ::before is the
   first child, these come after, and positioned z-index:auto boxes paint in
   tree order. Do NOT add z-index here: `z-index:1` on the panel makes it a
   stacking context, which re-trapped the modal (9001) underneath the sticky
   header (1001). Same class of bug as the backdrop-filter one. */
body.wbv-bar3 .wbv-arc3-top,
body.wbv-bar3 .wbv-arc3-panel { position: relative; }

/* --- 2. Top strip: segments left, (search right — Step 5) ---------------- */
body.wbv-bar3 .wbv-arc3-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 0 12px;
}
body.wbv-bar3 .wbv-arc3-segs {
  display: flex;
  align-items: center;
  flex: none;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--b3-rad);
  padding: 3px;
}
body.wbv-bar3 .wbv-arc3-segs a {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  font: 600 12px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .80);
  padding: 10px 18px;
  border-radius: 7px;
  transition: .16s;
  text-decoration: none;
}
/* Hover previews the selected state: same white pill, much lighter. Sits
   before the .active rule so an already-selected segment keeps the full
   treatment on hover rather than washing out. */
body.wbv-bar3 .wbv-arc3-segs a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .16);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
}

/* Zero-result segment: visible but inert. Dimmed rather than removed so the
   segment row keeps its shape and the absence is legible. */
body.wbv-bar3 .wbv-arc3-segs a.is-empty {
  opacity: .38;
  cursor: default;
  pointer-events: none;
}
body.wbv-bar3 .wbv-arc3-segs a.is-empty:hover { color: rgba(255, 255, 255, .80); }
/* v18 `.divi{width:1px;height:19px;background:rgba(255,255,255,.32);margin:0 5px}`
   — a hairline between segments. */
body.wbv-bar3 .wbv-arc3-divi {
  width: 1px;
  height: 19px;
  background: rgba(255, 255, 255, .32);
  flex: none;
  margin: 0 5px;
}
body.wbv-bar3 .wbv-arc3-seg-n {
  margin-left: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  opacity: .62;
}
body.wbv-bar3 .wbv-arc3-segs a.active .wbv-arc3-seg-n { opacity: .5; }
body.wbv-bar3 .wbv-arc3-segs a.active,
body.wbv-bar3 .wbv-arc3-segs a[aria-selected="true"] {
  background: #fff;
  color: #20313a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
}

/* --- 3. White panel — breaks out of the frame padding -------------------- */
body.wbv-bar3 .wbv-arc3-panel {
  background: #fff;
  margin: 0 -20px -12px;
  border-radius: 0 0 13px 13px;
}
body.wbv-bar3 .wbv-arc3-divider {
  height: 1px;
  background: var(--b3-line);
  margin: 0 20px;
}

/* --- 4. Filter row ------------------------------------------------------- */
body.wbv-bar3 .wbv-arc3-panel form.wbv-arc-fb {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
body.wbv-bar3 .wbv-arc3-panel .wbv-arc-filter-row,
body.wbv-bar3 .wbv-arc3-panel .wbv-arc-fb-fields {
  display: grid;
  gap: 12px;
  padding: 16px 20px;
  grid-template-columns: repeat(var(--b3-n, 4), 1fr) 150px;
  margin: 0;
  /* the archive's own container caps these at 1240/1320 — inside the panel
     they must fill it instead */
  max-width: none;
  width: auto;
  /* The field row ships its OWN border-bottom (1px #e5e2dc) and a 12px/36px
     drop shadow. Stacked against .wbv-arc3-divider that reads as a doubled
     line with a grey smear beneath it instead of the mockup's single hairline.
     Both are removed; the divider is the only separator. */
  box-shadow: none !important;
  /* border, not just border-bottom: the row also carries a 1px border-LEFT,
     which pushed the first filter cell to 106 while the segment group sat at
     105. Zeroing the lot lines both left edges up at 105. */
  border: 0 !important;
  background: transparent !important;
}

/* --- 5. Controls --------------------------------------------------------- */
body.wbv-bar3 details.wbv-arc-fb-field { position: relative; min-width: 0; }

body.wbv-bar3 details.wbv-arc-fb-field > summary {
  width: 100%;
  height: var(--b3-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  background: #fff;
  border: 1px solid var(--b3-line-2);
  border-radius: var(--b3-rad);
  cursor: pointer;
  text-align: left;
  transition: .16s;
  list-style: none;
  box-shadow: none;
}
body.wbv-bar3 details.wbv-arc-fb-field > summary::-webkit-details-marker { display: none; }
body.wbv-bar3 details.wbv-arc-fb-field > summary:hover {
  border-color: var(--b3-accent);
  background: var(--b3-sand);
}
/* v18 `.ctrl.on{border-color:var(--green);box-shadow:0 0 0 2px rgba(31,61,54,.09)}`
   — border + ring, NO fill. The archive paints `background:var(--accent-pale)`
   on top, which double-signals a state the border and the value text already
   carry. Forced back to white. */
body.wbv-bar3 details.wbv-arc-fb-field.has-selection > summary,
body.wbv-bar3 .wbv-arc-filter-row details.filter-cell.has-selection > summary,
body.wbv-bar3 .wbv-arc-fb-fields details.filter-cell.has-selection > summary {
  border-color: var(--b3-deep);
  box-shadow: 0 0 0 2px rgba(31, 61, 54, .09);
  background: #fff !important;
  background-image: none !important;
}
body.wbv-bar3 details.wbv-arc-fb-field.has-selection > summary:hover {
  background: var(--b3-sand) !important;
}

/* v18 `.tx span.any{color:var(--ink-2)}` — the placeholder reads muted. */
body.wbv-bar3 details.wbv-arc-fb-field:not(.has-selection) .val { color: var(--b3-ink-2); }
body.wbv-bar3 details.wbv-arc-fb-field .meta { flex: 1; min-width: 0; display: block; }

/* Mockup `.ic` — a bronze outline glyph left of the label. Injected by the
   reflow keyed on data-wbv-fb-key, so no renderer change. */
body.wbv-bar3 .wbv-arc3-ic {
  flex: none;
  width: 22px;
  display: grid;
  place-items: center;
  color: var(--b3-accent);
}
/* v18 default is `.tx small{display:none}` with --h:46px. The labelled 58px
   variant only exists behind the demo's `body.lab` toggle, so it is NOT the
   design — labels off, box shrinks. */
/* The archive forces these visible with
   `.wbv-arc-filter-row details.filter-cell .meta .lbl{display:block}` (0,4,1),
   which outweighs a plain scoped selector — hence !important rather than a
   specificity arms race. */
body.wbv-bar3 details.wbv-arc-fb-field .lbl,
body.wbv-bar3 .wbv-arc-filter-row details.filter-cell .meta .lbl,
body.wbv-bar3 .wbv-arc-fb-fields details.filter-cell .meta .lbl { display: none !important; }
body.wbv-bar3 details.wbv-arc-fb-field .val {
  display: block;
  font: 400 13px/1.25 'Manrope', system-ui, sans-serif;
  color: var(--b3-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.wbv-bar3 details.wbv-arc-fb-field .caret { flex: none; opacity: .4; }

/* --- 6. Dropdown — NO checkbox box (spec §2) ----------------------------- */
body.wbv-bar3 details.wbv-arc-fb-field > .wbv-arc-fb-panel {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  min-width: 100%;
  background: #fff;
  border: 1px solid var(--b3-line);
  border-radius: var(--b3-rad);
  box-shadow: 0 16px 40px rgba(31, 61, 54, .2);
  padding: 7px;
  z-index: 40;
  max-height: 340px;
  overflow: auto;
}
body.wbv-bar3 .wbv-arc-fb-options { display: block; }

body.wbv-bar3 .wbv-arc-fb-check {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 11px;
  border-radius: 9px;
  font: 400 13.5px 'Manrope', system-ui, sans-serif;
  color: var(--b3-ink);
  text-align: left;
  position: relative;
  transition: background .14s;
}
body.wbv-bar3 .wbv-arc-fb-check:hover { background: var(--b3-sand); }
body.wbv-bar3 .wbv-arc-fb-check.is-sub { padding-left: 26px; }

/* The box is gone; the input stays in the DOM because the archive JS reads it. */
body.wbv-bar3 .wbv-arc-fb-check input[type="checkbox"],
body.wbv-bar3 .wbv-arc-fb-check input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  margin: 0;
}
body.wbv-bar3 .wbv-arc-fb-check span { flex: 1; min-width: 0; }

/* Selected = checkmark + light tint on the row. */
body.wbv-bar3 .wbv-arc-fb-check:has(input:checked) {
  background: rgba(var(--b3-tint), .09);
  color: var(--b3-deep);
  font-weight: 700;
}
/* NO checkmark of our own. wbv-archive-v2.min.css already draws one via
   `.wbv-arc-fb-panel .wbv-arc-fb-check:has(input:checked)::after` (a masked
   tick pinned right). Adding a second produced the double tick. Theirs is
   already the spec's design — tick + tinted row, no box — so we keep it and
   only restyle the row. */

/* --- 7. More filters cell ------------------------------------------------
   v18 `.more` is a button reading "More filters" + caret — it carries NO value
   text. With labels hidden the cell was left showing a bare "Any", which says
   nothing. So on this ONE cell the label is what shows and the value is
   suppressed; the applied state is still signalled by the border ring. */
/* Must outrank this file's own label-hiding rule, which is (0,5,2) because it
   has to beat the archive's .wbv-arc-filter-row chain. Adding the attribute
   selector takes these to (0,6,2). */
body.wbv-bar3 .wbv-arc-filter-row details.filter-cell[data-wbv-fb-more] .meta .lbl,
body.wbv-bar3 .wbv-arc-fb-fields details.filter-cell[data-wbv-fb-more] .meta .lbl,
body.wbv-bar3 details[data-wbv-fb-more] .lbl,
body.wbv-bar3 details.wbv-arc-fb-more .lbl {
  display: block !important;
  font: 400 13px 'Manrope', system-ui, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--b3-ink) !important;
  margin: 0 !important;
}
body.wbv-bar3 .wbv-arc-filter-row details.filter-cell[data-wbv-fb-more] .meta .val,
body.wbv-bar3 .wbv-arc-fb-fields details.filter-cell[data-wbv-fb-more] .meta .val,
body.wbv-bar3 details[data-wbv-fb-more] .val,
body.wbv-bar3 details.wbv-arc-fb-more .val { display: none !important; }
body.wbv-bar3 details[data-wbv-fb-more] .meta,
body.wbv-bar3 details.wbv-arc-fb-more .meta { flex: 0 1 auto; }


body.wbv-bar3 details.wbv-arc-fb-more > summary,
body.wbv-bar3 details[data-wbv-fb-more] > summary {
  justify-content: center;
  background: var(--b3-sand);
  border: 1px solid var(--b3-line-2);
}
body.wbv-bar3 details[data-wbv-fb-more] > summary:hover {
  border-color: var(--b3-accent);
  background: #fff;
}
/* The More modal keeps its current behaviour and contents — radius only. */
body.wbv-bar3 .wbv-arc-more-modal,
body.wbv-bar3 .wbv-arc-more-sheet,
body.wbv-bar3 [data-wbv-fb-more] .wbv-arc-fb-panel--more { border-radius: var(--b3-rad); }

/* --- 8. Meta row: count · clear · sort ----------------------------------- */
body.wbv-bar3 .wbv-arc3-panel .wbv-arc-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  margin: 0;
  border: 0;
  background: none;
  max-width: none;
  width: auto;
  justify-content: flex-start;   /* the spacer handles the push, not space-between */
}
/* v18 `.cnt{font-size:14.5px;font-weight:400;color:var(--ink-2)}`
   `.cnt b{font-weight:700;color:var(--green)}` */
body.wbv-bar3 .wbv-arc3-panel .count,
body.wbv-bar3 .wbv-arc3-panel [data-wbv-count-block] {
  font-size: 14.5px;
  font-weight: 400;
  color: var(--b3-ink-2);
  margin: 0;
}
body.wbv-bar3 .wbv-arc3-panel [data-wbv-count-block] b,
body.wbv-bar3 .wbv-arc3-panel [data-wbv-count-block] strong {
  font-weight: 700;
  color: var(--b3-deep);
}
body.wbv-bar3 .wbv-arc3-spacer { flex: 1; }

/* Sort sits at the right edge. The spacer element used to be injected by the
   reflow script; with the bar server-rendered there is no script to do that, so
   this is done in CSS. Both toolbar shapes are covered: LT puts the sort
   <details> straight in the toolbar, Sale wraps it in .actions. */
body.wbv-bar3 .wbv-arc3-panel .wbv-arc-toolbar > .actions,
body.wbv-bar3 .wbv-arc3-panel .wbv-arc-toolbar > details.wbv-arc-sort,
body.wbv-bar3 .wbv-arc3-panel .wbv-arc-toolbar > .wbv-arc-toolbar-actions {
  margin-left: auto;
}
body.wbv-bar3 .wbv-arc3-panel .wbv-arc-toolbar > .count,
body.wbv-bar3 .wbv-arc3-panel .wbv-arc-toolbar > [data-wbv-count-block] {
  margin-right: 0;
}
body.wbv-bar3 .wbv-arc3-panel [data-wbv-clear-link] {
  font: 600 13.5px 'Manrope', system-ui, sans-serif;
  color: var(--b3-ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.wbv-bar3 .wbv-arc3-panel [data-wbv-clear-link]:hover { color: var(--b3-deep); }

body.wbv-bar3 .wbv-arc3-panel details.wbv-arc-sort { position: relative; flex: none; }
body.wbv-bar3 .wbv-arc3-panel details.wbv-arc-sort > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--b3-line-2);
  border-radius: var(--b3-rad);
  cursor: pointer;
  font: 400 13.5px 'Manrope', system-ui, sans-serif;
  list-style: none;
}
body.wbv-bar3 .wbv-arc3-panel details.wbv-arc-sort > summary::-webkit-details-marker { display: none; }
body.wbv-bar3 .wbv-arc3-panel details.wbv-arc-sort > summary:hover { border-color: var(--b3-accent); }

/* --- 9. Responsive: 1 row -> 2 cols <=1024 -> 1 col <=560 ---------------- */
/* Below 1320 the grid wrap's own padding defines the gutter — match it. */
@media (max-width: 1320px) {
  body.wbv-bar3 .wbv-arc3 { max-width: none; margin-left: 24px; margin-right: 24px; }
}
@media (max-width: 700px) {
  body.wbv-bar3 .wbv-arc3 { margin-left: 16px; margin-right: 16px; }
}

@media (max-width: 1024px) {
  body.wbv-bar3 .wbv-arc3-panel .wbv-arc-filter-row,
  body.wbv-bar3 .wbv-arc3-panel .wbv-arc-fb-fields {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 560px) {
  /* Less overlap on phone: only 103px of empty hero below the copy there. */
  body.wbv-bar3 .wbv-arc3 { padding: 12px 16px; border-radius: 12px; margin-top: -72px; }

  /* Mockup: `.meta{flex-wrap:wrap}` + `.sp{flex-basis:100%;height:0}` — the
     spacer becomes a full-width line break, so the count sits on its own line
     and Clear all + Sort drop below it. Pushed to the RIGHT edge. */
  body.wbv-bar3 .wbv-arc3-panel .wbv-arc-toolbar {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }
  body.wbv-bar3 .wbv-arc3-spacer { flex-basis: 100% !important; height: 0 !important; }
  body.wbv-bar3 .wbv-arc3-panel .count,
  body.wbv-bar3 .wbv-arc3-panel [data-wbv-count-block] {
    flex: 0 0 100% !important;
    text-align: left !important;
  }
  body.wbv-bar3 .wbv-arc3-panel details.wbv-arc-sort { margin-left: auto !important; }
  body.wbv-bar3 .wbv-arc3-panel { margin: 0 -16px -12px; }
  body.wbv-bar3 .wbv-arc3-divider { margin: 0 16px; }
  body.wbv-bar3 .wbv-arc3-top { padding: 0 0 10px; }
  body.wbv-bar3 .wbv-arc3-segs { width: 100%; }
  body.wbv-bar3 .wbv-arc3-segs a { flex: 1; padding: 10px 8px; font-size: 11px; letter-spacing: .05em; text-align: center; }
  body.wbv-bar3 .wbv-arc3-panel .wbv-arc-filter-row,
  body.wbv-bar3 .wbv-arc3-panel .wbv-arc-fb-fields {
    grid-template-columns: 1fr !important;
    padding: 14px;
  }
  body.wbv-bar3 .wbv-arc3-panel .wbv-arc-toolbar { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  body.wbv-bar3 .wbv-arc3-spacer { flex-basis: 100%; height: 0; }
}

/* --- 10. Preview badge — only on the ?wbv_bar=new share link ------------- */
body.wbv-bar3 .wbv-arc3-flag {
  position: absolute;
  top: -11px;
  right: 14px;
  z-index: 6;
  font: 800 10px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f6e6e0;
  color: #a4462a;
}

/* --- 11. Mobile <=900px ---------------------------------------------------
   The archive collapses the bar behind a floating "Filters" button below 900px
   (.wbv-arc-fb{display:none} + .wbv-arc-filter-trigger{display:inline-flex},
   in BOTH wbv-archive-v2.min.css and the inlined critical CSS). The v18 design
   has no drawer — one bar, always visible — so both of those are undone here.
   Those source rules carry !important and body.intent-* specificity, hence the
   matching weight below. Scoped to body.wbv-bar3, so the public bar keeps its
   drawer exactly as it is today.
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  body.wbv-bar3.intent-lt .wbv-arc3-panel .wbv-arc-fb,
  body.wbv-bar3.intent-sale .wbv-arc3-panel .wbv-arc-fb,
  body.wbv-bar3.wbv-filters-open .wbv-arc3-panel .wbv-arc-fb {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transform: none !important;
    z-index: auto !important;
    overflow: visible !important;
  }

  /* No floating button, no drawer chrome. */
  body.wbv-bar3 .wbv-arc-filter-trigger-wrap,
  body.wbv-bar3 .wbv-arc-filter-trigger,
  body.wbv-bar3 .wbv-arc-fsheet-header,
  body.wbv-bar3 .wbv-arc-fb > .wbv-arc-fsheet-header,
  body.wbv-bar3 [data-wbv-filter-backdrop],
  body.wbv-bar3 .wbv-arc-fb-drawer-footer { display: none !important; }

  /* The drawer turned the field row into a flex column — put the grid back. */
  body.wbv-bar3 .wbv-arc3-panel .wbv-arc-fb-fields,
  body.wbv-bar3 .wbv-arc3-panel .wbv-arc-filter-row,
  body.wbv-bar3.wbv-filters-open .wbv-arc3-panel .wbv-arc-fb .wbv-arc-fb-fields {
    display: grid !important;
    flex-direction: initial !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 16px 18px !important;
  }
  body.wbv-bar3 .wbv-arc3-panel .wbv-arc-fb-fields > details.filter-cell,
  body.wbv-bar3.wbv-filters-open .wbv-arc3-panel .wbv-arc-fb-fields > details.filter-cell {
    display: block !important;
    width: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  body.wbv-bar3 .wbv-arc3-panel .wbv-arc-fb-fields > details.filter-cell > summary,
  body.wbv-bar3.wbv-filters-open .wbv-arc3-panel .wbv-arc-fb-fields > details.filter-cell > summary {
    padding: 0 13px !important;
    height: var(--b3-h);
  }

  /* The drawer forced dropdowns to static/full-width; they float again. */
  body.wbv-bar3 .wbv-arc3-panel details.wbv-arc-fb-field > .wbv-arc-fb-panel,
  body.wbv-bar3.wbv-filters-open .wbv-arc3-panel .wbv-arc-fb-fields .wbv-arc-fb-panel {
    position: absolute !important;
    top: calc(100% + 7px) !important;
    left: 0 !important;
    width: auto !important;
    min-width: 100% !important;
  }
}

@media (max-width: 560px) {
  body.wbv-bar3 .wbv-arc3-panel .wbv-arc-fb-fields,
  body.wbv-bar3 .wbv-arc3-panel .wbv-arc-filter-row,
  body.wbv-bar3.wbv-filters-open .wbv-arc3-panel .wbv-arc-fb .wbv-arc-fb-fields {
    grid-template-columns: 1fr !important;
    padding: 14px !important;
  }
}

/* --- 12. Sort control — match the filter dropdowns ------------------------
   The sort trigger shipped its current value in a <strong> (700). Against 46px
   filter cells that reads heavier than anything else in the bar, so it is
   dropped to 500. The panel is restyled to the same language as the filter
   dropdowns: 7px padding, 10px radius, 9px rows, sand hover, tinted active row
   instead of the pale-accent block fill.
   ------------------------------------------------------------------------ */
body.wbv-bar3 .wbv-arc3-panel details.wbv-arc-sort [data-wbv-sort-current],
body.wbv-bar3 .wbv-arc3-panel details.wbv-arc-sort strong { font-weight: 500 !important; }

body.wbv-bar3 .wbv-arc3-panel .wbv-arc-sort-panel {
  top: calc(100% + 7px) !important;
  right: 0;
  min-width: 220px;
  background: #fff !important;
  border: 1px solid var(--b3-line) !important;
  border-radius: var(--b3-rad) !important;
  box-shadow: 0 16px 40px rgba(31, 61, 54, .2) !important;
  padding: 7px !important;
  z-index: 40;
}
body.wbv-bar3 .wbv-arc3-panel .wbv-arc-sort-opt {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 11px !important;
  border-radius: 9px !important;
  font: 400 13.5px 'Manrope', system-ui, sans-serif !important;
  color: var(--b3-ink) !important;
  text-align: left;
  background: none !important;
  border: 0;
}
body.wbv-bar3 .wbv-arc3-panel .wbv-arc-sort-opt:hover { background: var(--b3-sand) !important; }
body.wbv-bar3 .wbv-arc3-panel .wbv-arc-sort-opt.is-active {
  background: rgba(var(--b3-tint), .09) !important;
  color: var(--b3-deep) !important;
  font-weight: 700 !important;
}

/* --- 13. More-filters modal ---------------------------------------------
   Contents and behaviour unchanged (spec §3) — radius only, plus the Apply
   button to 10px to match every other control in the bar. */
body.wbv-bar3 .wbv-arc-fb-more[open] .wbv-arc-fb-modal { border-radius: var(--b3-rad) !important; }
body.wbv-bar3 .wbv-arc-fb-apply,
body.wbv-bar3 [data-wbv-more-apply],
body.wbv-bar3 .wbv-arc-fb-modal-footer button { border-radius: var(--b3-rad) !important; }

/* --- 14. Date input ------------------------------------------------------
   `available_from` was set to `font: inherit`, so it picked up the page's
   16.8px body size and rendered ~50px tall — noticeably larger than every
   other control in the sheet. Given an explicit font instead. */
body.wbv-bar3 .wbv-arc-fb-modal input[type="date"],
body.wbv-bar3 .wbv-arc-fb-modal-body input[type="date"],
body.wbv-bar3 .wbv-arc-fb-modal input[type="number"],
body.wbv-bar3 .wbv-arc-fb-modal-body input[type="number"],
body.wbv-bar3 .wbv-arc-fb-modal input[type="text"] {
  font: 400 14px 'Manrope', system-ui, sans-serif !important;
  line-height: 1.2 !important;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--b3-line-2);
  border-radius: var(--b3-rad);
  color: var(--b3-ink);
  background: #fff;
}

/* --- 15. Breathing room under the bar ------------------------------------
   The grid only gives itself margin-top:24px, which was fine when the bar was
   a flat row but reads cramped now the bar is a raised glass panel with a
   46px drop shadow — the shadow lands almost on the first card. 40px desktop,
   28px on phone where vertical space is scarcer. */
/* Set on the grid, not as margin-bottom on the bar: adjacent-sibling margins
   collapse, so a 16px bottom margin just lost to the grid's existing 24px. */
body.wbv-bar3 .wbv-arc-grid { margin-top: 40px !important; }
@media (max-width: 560px) {
  body.wbv-bar3 .wbv-arc-grid { margin-top: 28px !important; }
}

/* --- 13. Results line: one row on tablet and phone ------------------------
   116 stacks the results line under 900px —

       9 Villas
       in Umalas
       <- Browse all areas

   — because there the sort control drops below it and the line has the full
   width to itself. Under v3 it fits on one row at every width, so the stacking
   is undone: `9 villas for long-term rent in Umalas`, with the strong back to
   its inline size (20px + capitalize were there to make it a headline for the
   stacked block, and read as shouting inside a sentence).

   "for long-term rent" stays hidden on phones — the page title already says
   what kind of rental this is, and the number and the place are what matter on
   a 390px line. It comes back at 768px, where there is room for the sentence.
   The place-actions row ("<- Browse all areas") keeps its own line.
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  body.wbv-bar3 .wbv-arc-toolbar .count .wbv-c-place { display: inline !important; }
  body.wbv-bar3 .wbv-arc-toolbar .count .wbv-c-area {
    display: inline !important;
    margin-top: 0 !important;
  }
  body.wbv-bar3 .wbv-arc-toolbar .count .wbv-c-place strong {
    text-transform: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }
}
@media (min-width: 768px) and (max-width: 900px) {
  body.wbv-bar3 .wbv-arc-toolbar .count .wbv-c-long { display: inline !important; }
}

/* --- 14. Sort control between 768 and 900px -------------------------------
   116 hides the real sort in that band and shows a MIRROR of it next to the
   floating Filters button instead — a pair of ghost pills below the hero. v3
   has no floating button, so §11 above hides .wbv-arc-filter-trigger-wrap …
   and the mirror lives inside that wrap. Net effect: no sort at all between
   768 and 900px. It was there at 767 and at 901.

   The mirror is redundant here — v3 keeps the toolbar visible at every width —
   so the real one is simply put back, exactly as it renders at 767px.
   ------------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 900px) {
  body.wbv-bar3 .wbv-arc3-panel .wbv-arc-toolbar > details.wbv-arc-sort {
    display: block !important;
  }
}

/* --- 15. …and the sort comes back up onto that row ------------------------
   116 gives the count `flex-basis:100%` under 900px and drops the sort onto
   its own line — correct when the count was three stacked lines, but with §13
   above it is one short line, so the sort sat under a half-empty row. Both go
   back on one row above the phone breakpoint. Still `flex-wrap:wrap`, not
   nowrap: if a long area name ever needs the width it may still drop.
   Left alone at <=560px, where the count-then-right-aligned-sort stack is the
   approved phone layout.
   ------------------------------------------------------------------------ */
@media (min-width: 561px) and (max-width: 900px) {
  body.wbv-bar3 .wbv-arc3-panel .wbv-arc-toolbar > .count,
  body.wbv-bar3 .wbv-arc3-panel .wbv-arc-toolbar > [data-wbv-count-block] {
    flex: 1 1 auto !important;
  }
  body.wbv-bar3 .wbv-arc3-panel .wbv-arc-toolbar > details.wbv-arc-sort {
    flex: 0 0 auto !important;
    margin: 0 0 0 auto !important;
  }
  body.wbv-bar3 .wbv-arc3-panel .wbv-arc-toolbar > details.wbv-arc-sort > summary {
    width: auto !important;
  }
}

/* --- 16. Empty-state "Reset filters" button ------------------------------
   Was an inline style attribute repeated at three render sites (116 once, 113
   twice — initial render and the AJAX swap), which meant the pill could drift
   between them and nothing in a stylesheet could touch it. Lifted here
   verbatim, with one deliberate change: 999px -> 10px, matching the Apply
   button in the filter sheet and the --r-lg the rest of the bar uses.

   `wbv-archive.css` already carries a plain `.wbv-arc-reset-btn` rule (the
   green #1f3d36 / 6px version) which the inline style used to bury. This wins
   on specificity — body.wbv-bar3 + two classes against one — so no !important.
   On ?wbv_bar=old this stylesheet is not loaded at all, and the button falls
   back to that older rule, which is the correct look for the older bar.

   NOT restated here: `background`. wbv-archive-v2.min.css owns it with an
   !important gradient, and an !important author rule outranks a style
   attribute — so the inline `background:var(--accent)` was already dead code
   before it was removed. Repeating it here would only look like it did
   something. The gradient is built from var(--accent) anyway, so the colour is
   the same one the inline style was asking for.
   ------------------------------------------------------------------------ */
body.wbv-bar3 .wbv-arc-empty .wbv-arc-reset-btn,
body.wbv-bar3 .wbv-lt-empty .wbv-arc-reset-btn {
  display: inline-block;
  color: #fff;
  padding: 12px 22px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 13px;
}

/* --- 17. Phone: the three moved filter cells inside the sheet -------------
   Section 07 of the footer script moves the price, ownership and bedrooms
   <details> cells into the More-filters sheet at <=560px. They arrive as
   dropdown cells — a 46px bordered summary with an icon and a caret, and an
   absolutely-positioned popover panel — sitting among flat .sec-group
   sections. These rules strip that chrome so a moved cell renders as a
   native section: label on top, options below.

   Everything is forced to BLOCK, not flex. The cell inherits a row flex
   context from the bar, which squeezed the summary to 2px and the panel to
   zero width once it was no longer absolutely positioned. Block layout has
   nothing to fight.

   The <details> stays a <details> (held open by the script) purely so that
   code which looks a cell up and reads inside it keeps working unchanged.
   Scoped to [data-wbv-moved], which exists only while collapsed, so the
   desktop rendering of these same cells is untouched.

   The selectors are deliberately over-qualified — `details[data-wbv-fb-more]`
   in front, `.filter-cell.wbv-arc-fb-field` on the moved cell — purely for
   specificity. The moved cells now sit INSIDE the more-cell, so v3's rules for
   the more-cell's own label and value match inside them too, and the widest of
   those, `.wbv-arc-fb-fields details.filter-cell[data-wbv-fb-more] .meta .lbl`,
   scores (0,6,2) with !important. Class count is compared before element
   count, so a longer descendant chain does not beat it — only more classes do.
   These score (0,8,3).
   ------------------------------------------------------------------------ */
@media (max-width: 560px) {
  body.wbv-bar3 details[data-wbv-fb-more] .wbv-arc-fb-modal-body details.filter-cell.wbv-arc-fb-field[data-wbv-moved] {
    display: block !important;
    position: static !important;
    height: auto !important;
    /* The sheet body is a column flex container. `flex: none` is load-bearing:
       with the default `flex-shrink: 1` these items shrank to zero height the
       moment the sheet's content exceeded its box — the cell measured 0 while
       its summary and panel were still laid out inside it. Native .sec-groups
       escape this only because they keep `min-height: auto`. */
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 0 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* Summary becomes the .sec-label: 13px bold ink, 8px above the options. */
  body.wbv-bar3 details[data-wbv-fb-more] .wbv-arc-fb-modal-body details.filter-cell.wbv-arc-fb-field[data-wbv-moved] > summary {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 0 8px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    cursor: default !important;
    list-style: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--ink) !important;
    letter-spacing: 0 !important;
  }
  body.wbv-bar3 details[data-wbv-fb-more] .wbv-arc-fb-modal-body details.filter-cell.wbv-arc-fb-field[data-wbv-moved] > summary::-webkit-details-marker,
  body.wbv-bar3 details[data-wbv-fb-more] .wbv-arc-fb-modal-body details.filter-cell.wbv-arc-fb-field[data-wbv-moved] > summary::marker { display: none !important; }

  /* Icon, caret and the "Any price" value line are all cell furniture. */
  body.wbv-bar3 details[data-wbv-fb-more] .wbv-arc-fb-modal-body details.filter-cell.wbv-arc-fb-field[data-wbv-moved] .wbv-arc3-ic,
  body.wbv-bar3 details[data-wbv-fb-more] .wbv-arc-fb-modal-body details.filter-cell.wbv-arc-fb-field[data-wbv-moved] .caret,
  body.wbv-bar3 details[data-wbv-fb-more] .wbv-arc-fb-modal-body details.filter-cell.wbv-arc-fb-field[data-wbv-moved] .val { display: none !important; }
  body.wbv-bar3 details[data-wbv-fb-more] .wbv-arc-fb-modal-body details.filter-cell.wbv-arc-fb-field[data-wbv-moved] .meta {
    display: block !important;
    flex: none !important;
  }
  body.wbv-bar3 details[data-wbv-fb-more] .wbv-arc-fb-modal-body details.filter-cell.wbv-arc-fb-field[data-wbv-moved] .lbl {
    display: block !important;
    overflow: visible !important;
    /* Explicit longhands, no `font:` shorthand and no var(): v3 styles .lbl as
       a small light caption for the dropdown cells with !important, and both
       `font: inherit` and `font-weight: var(--fw-bold)` lost to it. */
    font-family: 'Manrope', system-ui, sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    color: inherit !important;
    text-transform: none !important;
    letter-spacing: inherit !important;
  }

  /* Panel drops out of popover positioning and becomes inline content. */
  body.wbv-bar3 details[data-wbv-fb-more] .wbv-arc-fb-modal-body details.filter-cell.wbv-arc-fb-field[data-wbv-moved] .wbv-arc-fb-panel {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* One column, and no inner scroller — the sheet already scrolls. */
  body.wbv-bar3 details[data-wbv-fb-more] .wbv-arc-fb-modal-body details.filter-cell.wbv-arc-fb-field[data-wbv-moved] .wbv-arc-fb-options {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    max-height: none !important;
    overflow: visible !important;
    width: auto !important;
    padding: 0 !important;
  }
  body.wbv-bar3 details[data-wbv-fb-more] .wbv-arc-fb-modal-body details.filter-cell.wbv-arc-fb-field[data-wbv-moved] .wbv-arc-fb-check {
    width: auto !important;
    flex-direction: row !important;
  }
}

/* --- 18. Free-text search (v18 `.top` placement) -------------------------
   Sits in .wbv-arc3-top, to the RIGHT of the segment tabs, per the v18 mockup
   (`.top` = segs + srch). NOT a cell in the fields grid: that grid is 4 cols on
   LT and 5 on Sale inside a 1272px frame, so a text input there gets ~200px.

   The top bar is glass over the hero photo, so this field is translucent white
   like .wbv-arc3-segs — NOT the white panel treatment the filter cells use.
   Mirrors the mockup's `.srch` exactly.
   ------------------------------------------------------------------------ */
body.wbv-bar3 .wbv-arc-q {
  position: relative;              /* dropdown anchor */
  margin-left: auto;             /* push to the right edge of the top row */
  flex: 0 1 430px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 44px;
  padding: 0 15px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: var(--b3-rad);
  transition: background .16s ease, border-color .16s ease;
}
body.wbv-bar3 .wbv-arc-q:hover { border-color: rgba(255, 255, 255, .34); }
body.wbv-bar3 .wbv-arc-q:focus-within {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .48);
}
body.wbv-bar3 .wbv-arc-q-icon { flex: none; color: #fff; opacity: .62; }
body.wbv-bar3 .wbv-arc-q-input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: none;
  color: #fff;
  font: 400 14px 'Manrope', sans-serif;
  height: 100%;
  padding: 0;
}
body.wbv-bar3 .wbv-arc-q-input::placeholder { color: rgba(255, 255, 255, .58); }
/* WebKit paints its own clear affordance on type=search; we render our own. */
body.wbv-bar3 .wbv-arc-q-input::-webkit-search-cancel-button,
body.wbv-bar3 .wbv-arc-q-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

body.wbv-bar3 .wbv-arc-q-clear {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  cursor: pointer;
}
body.wbv-bar3 .wbv-arc-q-clear:hover { background: rgba(255, 255, 255, .32); }
body.wbv-bar3 .wbv-arc-q-clear svg { width: 11px; height: 11px; }
body.wbv-bar3 .wbv-arc-q-clear[hidden] { display: none; }

/* Active state. Reuses the bar's existing on-state language — filter cells use
   green border + a 2px ring for "this control is applied" — rather than
   inventing a second dialect for the same idea. */
body.wbv-bar3 .wbv-arc-q.is-active {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .62);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .14);
}
body.wbv-bar3 .wbv-arc-q.is-active .wbv-arc-q-icon { opacity: 1; }

/* The query echoed in the count block, so mobile — where the field is hidden
   inside the sheet — still shows WHAT is applied, not just a number. */
body.wbv-bar3 .wbv-arc-q-for {
  font-weight: 600;
  color: var(--b3-ink);
}

/* Prediction dropdown. Anchored to the field, which is why .wbv-arc-q is
   position:relative. Terms come from wbv_search_vocab() — mined from the index,
   so the list can only ever offer something that returns results. */
body.wbv-bar3 .wbv-arc-q-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  background: #fff;
  border: 1px solid var(--b3-line);
  border-radius: var(--b3-rad);
  box-shadow: 0 14px 34px rgba(16, 28, 34, .17);
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
}
body.wbv-bar3 .wbv-arc-q-pop[hidden] { display: none; }

body.wbv-bar3 .wbv-arc-q-pop-head {
  padding: 8px 10px 6px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--b3-ink-2);
  border-bottom: 1px solid var(--b3-line);
  margin-bottom: 4px;
}
body.wbv-bar3 .wbv-arc-q-pop-head[hidden] { display: none; }

body.wbv-bar3 .wbv-arc-q-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  color: var(--b3-ink);
  text-align: left;
}
body.wbv-bar3 .wbv-arc-q-opt:hover,
body.wbv-bar3 .wbv-arc-q-opt.is-cursor { background: var(--b3-sand); }
body.wbv-bar3 .wbv-arc-q-opt-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Count right-aligned and muted: it qualifies the term, it is not the label. */
body.wbv-bar3 .wbv-arc-q-opt em {
  flex: none;
  font-style: normal;
  font-size: 12.5px;
  color: var(--b3-ink-3);
  font-variant-numeric: tabular-nums;
}

/* Tablet: keep it visible, just narrower — mockup `.srch{flex:0 1 280px}`. */
@media (max-width: 1024px) {
  body.wbv-bar3 .wbv-arc-q { flex: 0 1 280px; }
}

/* Phone: section 07 of snippet 164 MOVES the field into the More-filters sheet.
   The mockup renders a second input there instead; moving is deliberate —
   a clone would put a second input[name="q"] in the same form, exactly the
   double-submit trap documented for the three moved filter cells. Once moved
   it is on a white surface, so the glass treatment above has to be undone. */
@media (max-width: 560px) {
  body.wbv-bar3 details[data-wbv-fb-more] .wbv-arc-fb-modal-body .wbv-arc-q[data-wbv-moved-q] {
    margin: 0 0 14px;
    flex: none;
    width: 100%;
    height: 46px;
    background: var(--b3-sand);
    border-color: var(--b3-line-2);
  }
  body.wbv-bar3 details[data-wbv-fb-more] .wbv-arc-fb-modal-body .wbv-arc-q[data-wbv-moved-q]:focus-within,
  body.wbv-bar3 details[data-wbv-fb-more] .wbv-arc-fb-modal-body .wbv-arc-q[data-wbv-moved-q].is-active {
    background: #fff;
    border-color: var(--b3-accent);
    box-shadow: none;
  }
  body.wbv-bar3 details[data-wbv-fb-more] .wbv-arc-fb-modal-body .wbv-arc-q[data-wbv-moved-q] .wbv-arc-q-icon { color: var(--b3-ink-3); opacity: 1; }
  body.wbv-bar3 details[data-wbv-fb-more] .wbv-arc-fb-modal-body .wbv-arc-q[data-wbv-moved-q] .wbv-arc-q-input { color: var(--b3-ink); }
  body.wbv-bar3 details[data-wbv-fb-more] .wbv-arc-fb-modal-body .wbv-arc-q[data-wbv-moved-q] .wbv-arc-q-input::placeholder { color: var(--b3-ink-3); }
  body.wbv-bar3 details[data-wbv-fb-more] .wbv-arc-fb-modal-body .wbv-arc-q[data-wbv-moved-q] .wbv-arc-q-clear { background: var(--b3-line); color: var(--b3-ink-2); }
  /* Inside the sheet the field is at the top of a scrolling column, so an
     absolutely-positioned popover would be clipped by the sheet's overflow.
     Cap its height instead and let the sheet scroll to it. */
  body.wbv-bar3 details[data-wbv-fb-more] .wbv-arc-fb-modal-body .wbv-arc-q[data-wbv-moved-q] .wbv-arc-q-pop { max-height: 210px; }
}

/* --- 19. Search field spans column 3 -> the More cell ---------------------
   MEASURED IN CHROME on the live page, after two wrong analytical models.

   The trap: `.wbv-arc-fb-fields` has `padding: 16px 20px`, but that padding is
   cancelled by a negative margin on the form, so the grid's CONTENT box lines up
   exactly with `.wbv-arc3`'s content box — the same box `.wbv-arc3-top` uses.
   Reading the padding off the stylesheet and assuming a 20px inset (twice: once
   too little, then once too much) is what produced a 20px overshoot and then a
   20px shortfall. The tracks and the top row start at the SAME x.

   Live at viewport 1512: frame content [141, 1371]; grid 348 348 348 150 gap 12;
   col-3 left 861; More right 1371. So:

     track      = (C - 150 - N*12) / N          C = content width, N = --b3-n
     col-3 left = 2*track + 24                  (from the content-box left edge)
     width      = C - 2*track - 24              right edge IS the content edge
                                                -> no margin-right

   Checks out: (1230 - 150 - 36)/3 = 348; 1230 - 696 - 24 = 510; 1371 - 510 = 861.

   >1024px only: below that the grid collapses to 2 columns then 1, where a
   "3rd column" does not exist. The tablet rule keeps its 280px.
   ------------------------------------------------------------------------ */
@media (min-width: 1025px) {
  body.wbv-bar3 .wbv-arc-q {
    flex: 0 0 auto;
    width: calc(100% - 24px - 2 * ((100% - 150px - (var(--b3-n, 4) * 12px)) / var(--b3-n, 4)));
    min-width: 320px;
    max-width: 100%;
  }
}

/* --- 20. Sort trigger: ghost, not boxed ----------------------------------
   The toolbar row is count text + "Clear filters" text link + Sort. Sort was
   the only bordered control in it, which made it read as the row's main event
   rather than one option among three.

   Ghosted, NOT turned into a plain link: the caret is what says "this opens a
   menu", and a borderless label with no fill would read exactly like "Clear
   filters", which fires immediately instead of opening anything. Hover, focus
   and open all still paint a background, so the hit target is never invisible —
   it is quiet at rest, not absent.
   ------------------------------------------------------------------------ */
body.wbv-bar3 .wbv-arc3-panel details.wbv-arc-sort > summary {
  background: transparent;
  border-color: transparent;
  padding: 0 10px;
  color: var(--b3-ink-2);
  transition: background .15s ease, color .15s ease;
}
body.wbv-bar3 .wbv-arc3-panel details.wbv-arc-sort > summary:hover {
  background: var(--b3-sand);
  border-color: transparent;
  color: var(--b3-ink);
}
body.wbv-bar3 .wbv-arc3-panel details.wbv-arc-sort > summary:focus-visible {
  background: var(--b3-sand);
  border-color: transparent;
  outline: 2px solid var(--b3-accent);
  outline-offset: 1px;
}
/* Open reads as pressed, which is the state the border used to carry. */
body.wbv-bar3 .wbv-arc3-panel details.wbv-arc-sort[open] > summary {
  background: var(--b3-sand);
  border-color: transparent;
  color: var(--b3-ink);
}