/* Products · Plan a job: the planner's entrance at the top of the shelf (the planner itself is kits.html). A graphite
   panel with a large title, so it reads as a tool of its own and not as one more filter. */
.pp-plan{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;margin:0 0 clamp(40px,5vw,64px);padding:clamp(28px,3.6vw,52px) clamp(24px,3.6vw,52px);background:var(--graphite);color:#f4efe6;border-radius:var(--r)}
.pp-plan-h{margin:0 0 14px;font:700 clamp(36px,4.4vw,60px)/.98 var(--disp);font-stretch:100%;letter-spacing:-.03em;color:#fff}
.pp-plan-s{margin:0 0 8px;font:500 clamp(17px,1.5vw,20px)/1.3 var(--sans);color:#f4efe6}
.pp-plan-d{margin:0;font-size:14.5px;line-height:1.55;color:#b5ab9a;max-width:44ch}
.pp-plan-b{margin-top:24px;white-space:nowrap}
.pp-plan-j{list-style:none;margin:0;padding:0;border-top:1px solid rgba(244,239,230,.16)}
.pp-plan-j a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:12px 0;border-bottom:1px solid rgba(244,239,230,.16);font:500 16px/1.3 var(--sans);color:#f4efe6;text-decoration:none}
.pp-plan-j a .ar{color:var(--co);transition:transform .3s var(--e)}
.pp-plan-j a:hover{color:#fff}
.pp-plan-j a:hover .ar{transform:translateX(4px)}
.pp-plan-j a:focus-visible,.pp-plan-b:focus-visible{outline:2px solid var(--co);outline-offset:3px}
@media (max-width:900px){.pp-plan{grid-template-columns:1fr}}
@media (max-width:640px){.pp-plan{gap:18px;padding:24px 20px 22px;margin-bottom:36px}.pp-plan-h{font-size:34px;margin-bottom:10px}.pp-plan-d{display:none}.pp-plan-b{margin-top:16px}.pp-plan-j a{min-height:48px;font-size:15px}}
@media (prefers-reduced-motion:reduce){.pp-plan-j a .ar{transition:none}}

/* Products · refine row: division, system, application and sort, in the selector system's square-cornered style */
.shelf-rf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:12px;align-items:end;margin:-4px 0 28px}
.rf{display:grid;gap:6px;min-width:0;font:500 12.5px/1.2 var(--sans);color:var(--mute)}
.rf select{-webkit-appearance:none;appearance:none;width:100%;min-width:0;height:44px;padding:0 34px 0 12px;border:1px solid var(--line-2);border-radius:var(--r-sel,3px);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23141210' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center/12px;color:var(--ink);font:500 14px/1.2 var(--sans);text-overflow:ellipsis;cursor:pointer}
.rf select:hover{border-color:var(--ink-2)}
.rf select:focus-visible{outline:2px solid var(--co-text);outline-offset:2px}
.rf-reset{height:44px;padding:0 6px;border:0;background:none;color:var(--co-text);font:500 13.5px/1 var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.rf-reset:focus-visible,.shelf-empty-r:focus-visible{outline:2px solid var(--co-text);outline-offset:2px}
.shelf-empty{grid-column:1/-1;margin:8px 0;color:var(--mute)}
.shelf-empty-r{padding:0;border:0;background:none;color:var(--co-text);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#jobs .pill:disabled{opacity:.38;cursor:default}
@media (max-width:900px){.shelf-rf{grid-template-columns:1fr 1fr}.rf-reset{justify-self:start}}