/* Shared "Find Your Servo" requirement filter, 2026-09-21; facet counts and the
   centred action 2026-09-22.
   Extracted from the homepage inline CSS so products/index.html can mount the same
   widget; the markup itself is generated by assets/finder.js into
   <div class="finder-mount" id="servo-finder">.
   Load after site.css, and after inner.css on inner pages.
   Every selector is scoped to .finder* / #f-* / #finder-*, so nothing here
   depends on the homepage-only .cards, .card, .placeholder or .section rules, and
   nothing here can restyle them. */
.finder{background:#0f1b2d;color:#fff;border-radius:10px;padding:28px;display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.finder .field{flex:1;min-width:150px}
.finder label{display:block;font-size:12px;color:#9fb3c8;margin-bottom:6px;cursor:pointer}
.finder select,.finder input{width:100%;padding:9px 12px;border-radius:6px;border:1px solid #334e68;background:#1c3048;color:#fff;font-size:14px}
/* Six dropdowns share one row only while the box is roughly 1030px wide or wider;
   below that they wrapped 5 + 1 and left one select stretched across the panel, so
   the tablet range gets an even 3 x 2 instead. min-width:150px still applies, so the
   columns drop to two on their own before anything gets squeezed. */
@media(max-width:1073px){.finder .field{flex:1 1 calc(33.333% - 9.334px)}}
/* The action used to be a seventh flex child inside .finder, and its old #0f1b2d
   fill was the same colour as the panel behind it, so the one thing the buyer is
   meant to press was the least visible element in the widget. It now sits centred
   below the box. Colour still comes from the shared .btn-primary and .finder-go only
   adds the icon, the bigger tap target and the shadow, so the site keeps one blue
   instead of growing a second one. */
.finder-actions{display:flex;justify-content:center;margin-top:18px}
.finder-go{display:inline-flex;align-items:center;gap:9px;padding:11px 26px;font-size:15px;box-shadow:0 4px 14px rgba(15,108,205,.28);transition:box-shadow .15s ease,transform .15s ease}
.finder-go:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(15,108,205,.34)}
.finder-go:active{transform:translateY(0)}
.finder-go:focus-visible{outline:2px solid #0f6ecd;outline-offset:3px}
.finder-go .fg-ico{flex:none}
/* Leave-one-out counts: #f-status carries the live hit count for the current
   selection, and a value that would return nothing is never offered at all. */
.finder-foot{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:12px}
#f-status{font-size:13px;color:#52606d;font-weight:600}
#f-status.empty{color:#b3261e}
.finder-clear{background:none;border:none;padding:0;color:#0f6ecd;font-size:13px;font-weight:600;text-decoration:underline;cursor:pointer}
.finder-clear:focus-visible{outline:2px solid #0f6ecd;outline-offset:2px}
.finder-clear[hidden]{display:none}
.finder select option[disabled]{color:#98a4b0}
#finder-results{display:none;margin-top:24px}
#finder-results h3{color:#0f1b2d;font-size:18px;margin-bottom:14px}
#finder-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:16px}
.finder-card{display:block;border:1px solid #e4e7eb;border-radius:8px;background:#fff;padding:14px;text-decoration:none;color:inherit}
.finder-card:hover{border-color:#0f6ecd;box-shadow:0 2px 10px rgba(15,108,205,.14)}
.finder-card:focus-visible{outline:2px solid #0f6ecd;outline-offset:2px}
#finder-results .fh{font-size:13px;color:#7b8794;margin:-8px 0 14px}
#finder-more{font-size:13px;color:#7b8794;margin:12px 0 0}
.finder-card .fc-code{font-weight:700;color:#0f6ecd;font-size:14px}
.finder-card .fc-line{font-size:12px;color:#52606d;margin:4px 0 8px}
.finder-card .chip{display:inline-block;background:#eef1f4;border-radius:4px;font-size:11px;color:#52606d;padding:2px 8px;margin:2px 3px 0 0}
.finder-empty{background:linear-gradient(135deg,#dbe4ee,#edf2f7);border:1px dashed #9fb3c8;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#7b8794;font-size:13px;text-align:center;padding:16px}
/* The widget is reached from the header search starter panel as products/...#find, so
   the sticky header must not cover the heading it lands on. */
#find{scroll-margin-top:calc(var(--nav-h,96px) + 14px)}
@media(max-width:560px){.finder{padding:18px 16px;gap:12px}.finder .field{flex:1 1 calc(50% - 6px);min-width:0}.finder-actions{margin-top:12px}.finder-go{width:100%;justify-content:center}}
@media(max-width:503px){#finder-cards{grid-template-columns:minmax(0,1fr);gap:10px}}
@media(prefers-reduced-motion:reduce){.finder-go{transition:none}.finder-go:hover{transform:none}}