/* ==========================================================================
   Selector system — filters, tabs, tags and small toggles.
   Loaded last on every page so it settles the earlier capsule styles in fmp.css and the page sheets.
   Architectural, not capsules: a 3px radius, a fine border, an editorial label, a clear graphite active state.
   Primary buttons (.b), round icon controls, map/globe nodes and the toast keep their own shapes on purpose.
   ========================================================================== */
:root{--r-sel:3px}

/* ---- filter rails: Projects, Products, news, kits, places in the scene ---- */
.pill,.role-filter button{
  border-radius:var(--r-sel);min-height:44px;padding:0 16px;gap:10px;
  border:1px solid var(--line-2);background:transparent;color:var(--ink-2);
  font:500 12.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  transition:border-color .2s var(--e),color .2s var(--e),background-color .2s var(--e)}
.pill b,.pill span,.pill i,.role-filter button span{font:500 12px/1 var(--mono);letter-spacing:0;color:var(--mute);font-style:normal}
.pill:hover,.role-filter button:hover{border-color:var(--ink-2);color:var(--ink);background:rgba(255,255,255,.5)}
.pill[aria-pressed="true"],.pill[aria-selected="true"],.pill.on,
.role-filter button[aria-pressed="true"]{background:var(--graphite);border-color:var(--graphite);color:#fff}
.pill[aria-pressed="true"] b,.pill[aria-selected="true"] b,.pill[aria-pressed="true"] span,.pill[aria-selected="true"] span,.pill.on span,
.role-filter button[aria-pressed="true"] span{color:var(--co)}
.pill:focus-visible,.role-filter button:focus-visible{outline:2px solid var(--co);outline-offset:2px}

/* ---- segmented toggles: apply mode, view mode ---- */
.a-mode,.mode{border-radius:var(--r-sel);padding:3px;gap:3px}
.a-mode label,.mode button{border-radius:2px}

/* ---- tags: product facts, project families, countries, certifications, preview labels ---- */
.tg,.pv-k,.cty span,.pjs-fam li>*,.pv-steps li{border-radius:var(--r-sel)}
.cert{border-radius:var(--r-sm)}

/* ---- small controls: steppers, add-to-cart on cards, kit products, timers, legends ---- */
.stepper,.cq,.card-add,.pk,.tmr,.tmr input,.legend button,.quick button,.sa-fam .acts button,.a-file input::file-selector-button{border-radius:var(--r-sel)}

/* ---- navigation hover/active and the catalogue search field ---- */
.navp a{border-radius:var(--r-sel)}
.srch input{border-radius:var(--r-sm)}
.nl-row input{border-radius:var(--r-sm)}

/* ---- category tiles on Careers: boxes, not cards ---- */
.cr-cat{border-radius:var(--r-sel)}
.navp{border-radius:var(--r-sel)}
.env-tag{border-radius:var(--r-sel)}

/* panels and cards that set their own corner: bring them onto the card token (--r) */
.sheet-p,.sheet.top .sheet-p,.cmd-p,.sa-item{border-radius:var(--r)}

/* phones: a filter rail is one scrolling row (the end fades to show there is more), never a stack of rows */
@media (max-width:760px){
  .pj-f,.sx-row,.upd-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding:0 var(--gutter) 2px;scroll-padding:0 var(--gutter);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .pj-f::-webkit-scrollbar,.sx-row::-webkit-scrollbar,.upd-tabs::-webkit-scrollbar{display:none}
  .pj-f>*,.sx-row>*,.upd-tabs>*{flex:none;white-space:nowrap}
  /* careers: the four fields as a 2 × 2 grid of boxes */
  .cr-cats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .cr-cat{min-height:0;padding:16px}
}

/* Contact · direct methods: one row, each with its icon (WhatsApp in its own brand green) */
.direct{grid-template-columns:repeat(4,minmax(0,1fr))}
.direct a{border-radius:var(--r)}
.direct b{font-size:18px;overflow-wrap:anywhere}
.dm-ic{display:grid;place-items:center;width:40px;height:40px;margin-bottom:16px;border:1px solid var(--line);border-radius:var(--r-sel);color:var(--ink)}
.dm-wa{color:#25D366}
@media (max-width:1100px){.direct{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.direct{grid-template-columns:1fr}}