/* =====================================================================
   /who-buys and /who-sells — the product picker.

   Built from the existing design system. `data-kind` on the page sets
   --accent / --accent-10 / --accent-ink once, from the site-wide rule in
   mesteel.css, and everything below reads those — there is no colour defined
   on this page at all.

   THE COLOUR. Green for selling, ORANGE for buying, which is the site's own
   language everywhere else: the profile tags, the marketplace, the dashboard,
   the company cards. This file briefly overrode buy to blue and was the one
   place that disagreed.

   NO NATIVE CONTROLS, AND NO SECOND PILL. Every selectable thing is a
   <button role="checkbox"> wearing `.pill-opt` — the same pill the dashboard's
   Activities and Products use, defined once in mesteel.css. This file sizes
   and truncates it; it does not restyle it.
   ===================================================================== */

/* ---------- The hero ----------
   A photograph, like every other section's, rather than the flat accent band
   this was. The picture comes from Admin -> Settings -> Hero images
   (`who_buys` / `who_sells`) and arrives as --hero-img / --hero-pos, with the
   shipped default as the var() FALLBACK so a stylesheet served to a page that
   sets neither still looks like something.

   THREE LAYERS, and the order is the whole design:

     the element   the photograph
     :before       the side's accent, blended into the photograph with
                   `mix-blend-mode:color` — this is what still tells Buys
                   from Sells at a glance, and it is the only thing on the
                   page that does so before a word is read.

                   NOT a flat veil, which is what this was first: a veil
                   of --accent-10 is a 10% tint, and the buy side's
                   #FFEDD5 over a pale photograph under a white wash was
                   invisible — the two pages looked identical, which is
                   the one thing this layer exists to prevent.

                   NOT multiply either, which can only subtract: on a
                   cool photograph #C2410C came out pink rather than
                   orange. `color` takes the hue and saturation from the
                   accent and keeps the photograph's own LUMINOSITY, so
                   every pixel is exactly as light as it was — the
                   contrast under the wash is the contrast of the
                   untinted picture, and tinting cannot cost the heading
                   its readability however dark a photograph somebody
                   uploads. `isolation:isolate` on the parent keeps the
                   blend off the page behind it.
     :after        the white wash, left to right, EXACTLY the stops .ed-hero
                   uses in mesteel.css — the heading sits in the same light
                   as it does on /news and /prices, so the contrast question
                   has one answer site-wide rather than one per page

   `:after` is painted over `:before` because it comes later in the document
   with both at auto z-index; `.head` lifts out of both at --z-raised,
   which is also what lets its controls' dropdowns paint over the page. */
.pick-hero{position:relative;overflow:hidden;isolation:isolate;
  /* The header is overlaid (solidHeader => false), so the top padding is its
     clearance — the kick line ran under the logo without it. */
  padding:112px 0 34px;
  background:var(--hero-img,url(../img/hero-warehouse.jpg)) var(--hero-pos,center 65%)/cover}
.pick-hero:before{content:"";position:absolute;inset:0;
  background:var(--accent);mix-blend-mode:color;opacity:.55}
.pick-hero:after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.78) 42%,rgba(255,255,255,.14) 100%)}
/* --z-raised: this band holds the picker's own controls. */
.pick-hero .head{position:relative;z-index:var(--z-raised)}
.pick-hero .kick{color:var(--accent)}

/* A STRONGER WASH under 1100px — the SAME breakpoint and the same stops as
   .ed-hero's in mesteel.css, because these two bands carry the same text at
   the same widths and must not disagree about where a wash built for 1440
   stops working.

   Measured on the rendered page with the text hidden, at the darkest ground
   inside the line's own rectangle: the sentence under the heading was
   #475569 on #868687, 2.08:1 at 768 and 2.21 at 360. The heading above it
   was 7:1 and never in doubt, which is how a band can look fine and fail.
   After: 5.36-5.48. The photograph is fainter for it, which is the right
   way round — a band is decoration and the sentence is not. */
@media (max-width:1100px){
  .pick-hero:after{background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.90) 55%,rgba(255,255,255,.70) 100%)}
}
.pick-hero h1{font-size:34px;line-height:1.08;letter-spacing:-.03em;margin:8px 0 0}
.pick-hero .sub{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:#475569;max-width:62ch}

.pick-wrap{display:flex;flex-direction:column;gap:14px;padding-bottom:40px}

/* ---------- product pills ----------
   Outline when off, filled with the accent and a tick when on. Flex-wrap, not
   a fixed grid: product names run from "Wire" to
   "Bright Shafting Bars (Cold Formed)", and a column wide enough for the
   longest wastes most of a row on the shortest. */
.pick-prods{display:flex;flex-wrap:wrap;gap:7px;padding:4px 0 10px}

/* A product pill is slightly smaller than the dashboard's, because there are
   148 of them on one page rather than a dozen in a pane. */
.p-pill{font-size:13px;min-height:34px;padding:0 13px;max-width:100%}
.p-pill:focus-visible,.pc-chev:focus-visible{outline:none;
  box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}

/* Long names truncate; the full name with its qualifier is the title. */
.p-pill .pp-t,.lvl-pill .lp-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:30ch}
/* The count, inside the pill and muted. */
.p-pill em,.lvl-pill em{font-style:normal;font-size:11px;font-weight:700;flex:none;
  opacity:.6}
.p-pill mark{background:rgba(255,235,120,.75);color:inherit;border-radius:3px;padding:0 1px}
/* Nothing lists it. Greyed, still selectable. */
.p-pill.off{color:var(--faint);border-style:dashed}
.p-pill.off em{opacity:.5}

/* A heading pill is bigger than the products under it — that is the hierarchy,
   since both wear the same component. */
.lvl-pill{font-size:14px;min-height:38px;padding:0 15px;max-width:100%}
.lvl-pill.sm{font-size:12.5px;min-height:32px;padding:0 13px}

/* ---------- category sections ---------- */
.pick-cat{background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);overflow:hidden}
.pc-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px}
.pc-h small{font-size:12.5px;font-weight:600;color:var(--mute)}
.pc-h .sp{flex:1}
.pc-chev{background:none;border:0;padding:6px;cursor:pointer;color:var(--faint);
  font:inherit;border-radius:8px}
.pc-chev span{display:inline-block;transition:transform .15s ease}
.pc-chev span[data-open="true"]{transform:rotate(180deg)}
.pc-body{padding:2px 16px 8px;border-top:1px solid var(--line)}

/* Group / sub-group heading row. */
.pc-lvl{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:12px 0 2px}

/* ---------- the sticky bar ---------- */
.pick-bar{position:sticky;top:12px;z-index:var(--z-sticky);display:flex;gap:14px;align-items:center;
  flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:12px 16px;box-shadow:var(--shadow)}
.pick-bar[data-on="true"]{border-color:var(--accent)}
.pick-bar .pb-main{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:8px}
.pick-bar .pb-main > b{font-size:14px}
.pick-bar .pb-chips{display:flex;flex-wrap:wrap;gap:6px;max-width:100%}
.pick-bar .chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;
  font-size:12px;font-weight:700;background:var(--accent-10);color:var(--accent-ink);
  border:0;border-radius:999px;padding:4px 10px;cursor:pointer;font-family:inherit}
.pick-bar .chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22ch}
.pick-bar .chip:hover{filter:brightness(.96)}
.pick-bar .chip i{font-style:normal;font-weight:800;opacity:.7;flex:none}
.pick-bar .chip.more{background:#F1F5F9;color:var(--mute);cursor:default}
.pick-bar .pb-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* .pb-all was the native "Match all" checkbox. It is a .seg2 now — the last
   <input type=checkbox> on this page is gone with it. */

/* The primary button in the page's accent, from .btn. */
.btn-go{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(15,31,74,.18)}
.btn-go:hover:not(:disabled){filter:brightness(.94);color:#fff}
.btn-go:focus-visible{outline:none;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--accent)}
/* The site's disabled style: grey, flat, and not pretending to be pressable. */
.btn-go:disabled{background:#CBD5E1;color:#F8FAFC;box-shadow:none;cursor:not-allowed;
  filter:none}
/* .btn.sm lives in mesteel.css now — the picker is no longer the only page
   that wants a small button. */
.pick-bar .btn.wide{min-width:210px}

/* ---------- search ---------- */
.pick-search{display:flex;flex-direction:column;gap:6px}
.pick-search .f{display:flex;flex-direction:column;gap:5px}
.pick-search .f > span{font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--mute)}
.pick-search input{width:100%;height:46px;padding:0 14px;font:inherit;font-size:15px;
  border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink)}
.pick-search input:focus{outline:none;border-color:var(--accent)}
.pick-search .fine{margin:0;font-size:12.5px;color:var(--mute)}

.pick-none{margin:0;padding:18px;background:#fff;border:1px solid var(--line);
  border-radius:18px;font-size:14px;color:var(--mute)}

@media (max-width:899px){
  .pick-hero{padding:104px 0 26px}
  .pick-hero h1{font-size:26px}
  /* Bottom, where a thumb is, and where it cannot cover the first pill. */
  .pick-bar{position:fixed;top:auto;bottom:0;left:0;right:0;border-radius:18px 18px 0 0;
    border-left:0;border-right:0;border-bottom:0;padding:10px 14px 14px;
    box-shadow:0 -6px 22px rgba(15,31,74,.14)}
  .pick-bar .pb-act{width:100%}
  .pick-bar .btn.wide{flex:1;min-width:0}
  /* The fixed bar is ~190px once the chips wrap to two rows, and 160 left
     the last pill under it. */
  .pick-wrap{padding-bottom:215px}
  .pc-h{gap:8px}
  .pc-h .sp{display:none}
  /* A pill must never be wider than the column it is in. */
  .p-pill .pp-t,.lvl-pill .lp-t{max-width:20ch}
}

/* Group above its sub-groups, each heading once. The indent is small on
   purpose — at 360px a deeper one costs a pill per row, and the pill's own
   size already separates a group from a sub-group. */
.pc-g{padding-top:16px}
.pc-s{padding-left:12px}
.pick-prods.ind{padding-left:12px}
@media (max-width:899px){
  .pc-s,.pick-prods.ind{padding-left:6px}
}