/* DIRECTION C - "Parts Counter"
   Light base, tool first. No hero photograph. The page opens as a working counter:
   a large part-number field with three ways in, then a category rail beside a live
   merchandised list, then equipment as a class comparison strip.
   This takes the mechanic the client praised on the trade catalogues and drops the
   density he rejected: hairlines, generous padding, large type, one red accent. */

body{background:var(--white);color:var(--ink-600)}
h1,h2,h3,h4{color:var(--ink-800)}
h1{font-size:48px;line-height:1.08;font-weight:700;letter-spacing:-.025em;color:#fff}
h2{font-size:34px;line-height:1.16}
h3{font-size:22px;line-height:1.3}
/* Links inherit their surrounding colour by default. A coloured default is not safe here:
   on the bare `a` selector it renders a forbidden red on the dark ground, and any scoped
   version (.hero a, .compare a) outranks the component rules and turns equipment buttons
   red, which is the one pairing the brand file locks. Components set their own colour; a
   genuine inline text link uses .link. */
a{color:inherit}
.link{color:var(--red);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}


.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--s5)}
.wrap-wide{max-width:var(--container-wide);margin:0 auto;padding:0 var(--s5)}
.section{padding:var(--s9) 0}
.section--alt{background:var(--grey-100)}
.eyebrow{font:600 12px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin:0 0 var(--s4)}
.lede{font-size:18px;line-height:1.6;max-width:62ch}
.muted{color:var(--grey-500)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
     font:600 15px/1 var(--font);padding:15px 26px;border-radius:var(--r-sm);
     text-decoration:none;border:1px solid transparent;cursor:pointer;min-height:48px;
     transition:background .16s ease-out,color .16s ease-out,border-color .16s ease-out}
.btn--primary{background:var(--red);color:#fff}
.btn--primary:hover{background:var(--red-pressed)}
.btn--ghost{background:transparent;color:var(--ink-800);border-color:var(--grey-300)}
.btn--ghost:hover{border-color:var(--ink-800)}
.btn--equipment{background:var(--ink-800);color:#fff;border-color:var(--ink-800)}
.btn--equipment:hover{background:var(--ink-600);border-color:var(--ink-600)}
.btn--equipment::after{content:"\2192";font-weight:600}
.btn--sm{min-height:44px;padding:13px 18px;font-size:14px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.counter a:focus-visible,.counter button:focus-visible,.counter input:focus-visible,
.hdr a:focus-visible,.hdr button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Header - dark, compact, and it runs straight into the counter block below it. */
.hdr{background:var(--ink-800);color:#fff}
.hdr__bar{display:flex;align-items:center;gap:var(--s6);padding:var(--s4) 0}
.hdr__logo{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center}
.hdr__logo img{height:36px;width:auto}
.hdr__nav{display:flex;gap:var(--s6);font:600 14px/1 var(--font);min-width:0}
.hdr__nav a{color:#fff;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap;flex:0 0 auto;transition:color .16s ease-out}
.hdr__nav a:hover{color:var(--grey-300)}
.hdr__util{display:flex;align-items:center;gap:var(--s4);margin-left:auto;font:500 14px/1 var(--font)}
.hdr__util a{color:#fff;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.hdr__util a:hover{color:var(--grey-300)}

/* The counter - the whole top of the page is one working control. */
.counter{background:var(--ink-800);color:#fff;padding:var(--s7) 0 var(--s8);
         border-top:1px solid rgba(255,255,255,.10)}
.counter__lede{font-size:17px;color:var(--grey-300);max-width:56ch;margin-top:var(--s4)}
.tabs{display:flex;gap:var(--s2);margin:var(--s7) 0 var(--s4);flex-wrap:wrap}
.tab{font:600 14px/1 var(--font);color:var(--grey-300);background:transparent;
     border:1px solid rgba(255,255,255,.22);border-radius:var(--r-sm);
     padding:0 var(--s5);min-height:44px;display:inline-flex;align-items:center;cursor:pointer;
     text-decoration:none;transition:color .16s ease-out,border-color .16s ease-out,background .16s ease-out}
.tab[aria-pressed="true"]{background:#fff;color:var(--ink-800);border-color:#fff}
.tab:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.tab[aria-pressed="true"]:hover{color:var(--ink-800);border-color:#fff}
/* No overflow:hidden here. It clipped the 2px focus outline off the part-number field,
   which is both the page's most important control and a locked brand directive. */
.bigfind{display:flex;align-items:stretch;background:#fff;border-radius:var(--r-sm);max-width:860px}
.bigfind input{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.bigfind button{border-radius:0 var(--r-sm) var(--r-sm) 0}
.bigfind input{flex:1;border:0;padding:24px var(--s5);font:400 18px/1 var(--font);color:var(--ink-800);min-width:0}
.bigfind input::placeholder{color:var(--grey-500)}
.bigfind button{border:0;background:var(--red);color:#fff;padding:0 var(--s7);font:600 16px/1 var(--font);cursor:pointer;white-space:nowrap}
.bigfind button:hover{background:var(--red-pressed)}
.counter__hints{display:flex;gap:var(--s3) var(--s6);flex-wrap:wrap;margin-top:var(--s3);font-size:15px;color:var(--grey-300)}
.counter__hints span{display:inline-flex;align-items:center;gap:var(--s2)}
.counter__hints a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);
                  min-height:44px;display:inline-flex;align-items:center;padding-bottom:2px}
.counter__hints a:hover{border-bottom-color:#fff}

/* Body - category rail beside the merchandised list. */
.deck{display:grid;grid-template-columns:288px 1fr;gap:var(--s8);align-items:start}
.railbox{border-top:2px solid var(--ink-800)}
.railbox h3{padding:var(--s5) 0 var(--s4)}
.railitem{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
          padding:var(--s4) 0;border-bottom:1px solid var(--grey-200);text-decoration:none;color:var(--ink-800);
          font:500 16px/1.35 var(--font);transition:color .16s ease-out}
.railitem:hover{color:var(--red)}
.railitem span:last-child{font:500 12px/1 var(--mono);color:var(--grey-500);white-space:nowrap}
.railbox .btn{margin-top:var(--s5)}

.deckhead{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
          border-top:2px solid var(--ink-800);padding:var(--s5) 0 var(--s4);flex-wrap:wrap}
.deckhead a{font:600 14px/1 var(--font);text-decoration:none;color:var(--red);
            min-height:44px;display:inline-flex;align-items:center;transition:color .16s ease-out}
.deckhead a:hover{color:var(--red-pressed)}
.prow{display:grid;grid-template-columns:124px 1fr 116px 148px 136px;gap:var(--s4);align-items:center;
      padding:var(--s5) 0;border-bottom:1px solid var(--grey-200)}
.prow__sku{font:500 14px/1.3 var(--mono);color:var(--ink-800)}
.prow__name{font:500 16px/1.4 var(--font);color:var(--ink-800)}
.prow__brand{font-size:13px;color:var(--grey-500);margin-top:2px}
.prow__price{font:500 17px/1 var(--mono);color:var(--ink-800);text-align:right}
.prow__act{text-align:right}
.badge{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--font);
       padding:7px 10px;border-radius:var(--r-sm);white-space:nowrap}
.badge--stock{background:rgba(15,122,61,.10);color:var(--in-stock)}
.badge--lead{background:rgba(138,90,0,.10);color:var(--lead-time)}
.badge--quote{background:var(--grey-100);color:var(--ink-600);border:1px solid var(--grey-300)}
/* Above the rows, not 531px below them, and stated as placeholders rather than as a
   note about the layout. A client can forward this page; nobody must quote $48.20. */
.samplenote{font:500 14px/1.5 var(--font);color:var(--ink-600);background:var(--grey-100);
            border-left:2px solid var(--grey-300);padding:var(--s3) var(--s4);margin:0 0 var(--s4)}
.deckfoot{padding-top:var(--s5);font-size:14px;color:var(--grey-500)}

/* Equipment - a class comparison strip, not a photo wall. */
.compare{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);margin-top:var(--s6)}
.ccol{background:#fff;border:1px solid var(--grey-200);border-radius:var(--r-sm);
      display:flex;flex-direction:column;text-decoration:none;color:inherit;overflow:hidden;
      transition:border-color .16s ease-out}
.ccol:hover{border-color:var(--ink-800)}
.ccol img{aspect-ratio:16/10;object-fit:contain;background:#fff;width:100%;padding:var(--s4)}
.ccol__b{padding:var(--s4) var(--s5) var(--s5);border-top:1px solid var(--grey-200)}
.ccol__name{font:600 17px/1.3 var(--font);color:var(--ink-800)}
.spec{width:100%;border-collapse:collapse;font-size:14px;margin-top:var(--s4)}
.spec th{text-align:left;font-weight:500;color:var(--grey-500);padding:7px 0;width:56%}
.spec td{text-align:right;font-family:var(--mono);font-weight:500;color:var(--ink-800);padding:7px 0}
.spec tr+tr th,.spec tr+tr td{border-top:1px solid var(--grey-200)}
/* Ink, not red. Brand red is never an equipment affordance (SOW 12/13, ASK-0003). */
.ccol__go{font:600 13px/1 var(--font);color:var(--ink-800);margin-top:var(--s4)}
.ccol:hover .ccol__go{color:var(--red-pressed)}

/* Brands - compact plates. */
/* Grid, not centred flex: eleven plates never fill a flex row, so the remainder was
   centred against a left-aligned page and the lone plate at 375 stretched to double width. */
.plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--s3);margin-top:var(--s6)}
.plate{display:flex;align-items:center;justify-content:center;height:68px;
       background:#fff;border:1px solid var(--grey-200);border-radius:var(--r-sm);padding:var(--s3);
       text-decoration:none;transition:border-color .16s ease-out}
.plate:hover{border-color:var(--ink-800)}
.plate img{max-height:28px;max-width:100%;width:auto;object-fit:contain}
.plate__type{font:600 22px/1 var(--font);color:var(--ink-800);letter-spacing:-.02em;white-space:nowrap}

/* Big 5 - two columns of long-form entries. */
/* Column flow, not row flow: five items across two columns split 3/2 and leave one
   short row, where row flow left a two-row hole under the second column. */
/* Heading column beside a single list column. Two-across flow left an empty cell in
   either direction with five items; this has no hole and reads as a list. */
.answers2{display:grid;grid-template-columns:360px 1fr;gap:var(--s8);align-items:start}
.five2{display:block}
.fitem{padding:var(--s5) 0;border-top:1px solid var(--grey-300);text-decoration:none;display:block;color:inherit}
.fitem__k{display:block;font:500 12px/1 var(--mono);color:var(--red);letter-spacing:.1em}
.fitem__t{display:block;font:600 20px/1.3 var(--font);color:var(--ink-800);margin-top:var(--s3)}
.fitem__d{display:block;font-size:15px;color:var(--grey-500);margin-top:var(--s2);max-width:46ch}
.fitem:hover .fitem__t{color:var(--red)}

.foot{background:var(--ink-900);color:var(--grey-300);padding:var(--s8) 0 var(--s7);font-size:15px}
.foot__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s5)}
.foot h4{color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--s4)}
.foot li{margin-bottom:2px}
.foot li a{display:inline-flex;align-items:center;min-height:34px}
.foot a{color:var(--grey-300);text-decoration:none}
.foot a:hover{color:#fff}
.foot a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* C-1 fix: the nav was display:none below 1200px with no hamburger, no drawer and no
   script, so six of the nine top-level destinations were unreachable on every tablet and
   phone. It now scrolls, with a fade so the cut edge reads as scrollable, not broken. */
@media (max-width:1200px){
  .hdr__nav{overflow-x:auto;flex-wrap:nowrap;gap:var(--s5);-webkit-overflow-scrolling:touch;
            scrollbar-width:none;
            -webkit-mask-image:linear-gradient(to right,#000 86%,transparent);
            mask-image:linear-gradient(to right,#000 86%,transparent)}
  .hdr__nav::-webkit-scrollbar{display:none}
  .compare{grid-template-columns:repeat(2,1fr)}
  .answers2{grid-template-columns:1fr;gap:var(--s6)}
}
@media (max-width:1024px){
  h1{font-size:40px} h2{font-size:30px}
  .section{padding:var(--s8) 0}
  /* M-4 fix: at full width the rail's space-between put a category label and its own
     example parts 790px apart, eight rows deep, which is the Grainger listing the client
     scored 3/10. Below the two-column layout the rail becomes a card grid instead. */
  .deck{grid-template-columns:1fr;gap:var(--s7)}
  .railbox{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--s5);
           border-top:2px solid var(--ink-800)}
  .railbox h3{grid-column:1/-1}
  .railbox .btn{grid-column:1/-1;justify-self:start}
  .railitem{flex-direction:column;align-items:flex-start;gap:var(--s1)}
  /* M-11 fix: the buy action used to drop to its own full-width row, ending up ~976px
     from the price it belongs to. Price, availability and action stay together. */
  .prow{grid-template-columns:112px 1fr auto;row-gap:var(--s3)}
  .prow__price{text-align:left;grid-column:2}
  .prow__act{grid-column:3;grid-row:1/3;text-align:right;align-self:center}
  .prow>div:nth-child(4){grid-column:2}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  body{font-size:16px}
  h1{font-size:32px} h2{font-size:26px} h3{font-size:20px}
  .section{padding:56px 0}
  .wrap,.wrap-wide{padding:0 var(--s4)}
  /* The bar cannot fit logo + nav + utility on one 375px row once the logo is allowed to
     keep its size, so the nav takes its own full-width scrolling row, as Option A does.
     Letting the logo shrink instead crushed the brand mark to 12px wide. */
  .hdr__bar{flex-wrap:wrap;gap:var(--s3) var(--s4)}
  .hdr__logo{order:0}
  .hdr__logo img{height:30px}
  .hdr__util{order:1;margin-left:auto}
  .hdr__nav{order:2;flex-basis:100%;margin-left:0;padding-bottom:var(--s2)}
  .counter{padding:var(--s7) 0 56px}
  .bigfind{flex-wrap:wrap}
  .bigfind input{flex-basis:100%;padding:18px var(--s4);font-size:16px;border-radius:var(--r-sm) var(--r-sm) 0 0}
  .bigfind button{flex:1;padding:17px;border-radius:0 0 var(--r-sm) var(--r-sm)}
  .tab{padding:0 var(--s4)}
  .railbox{grid-template-columns:repeat(2,1fr)}
  /* M-5 fix: one class per screen at 768 turned the comparison into the block stacking
     the client called out on DECKED, and pushed the page from 5,617px to 7,675px. */
  .compare{grid-template-columns:repeat(2,1fr)}
  .foot li a{min-height:44px}
}
@media (max-width:560px){
  .compare{grid-template-columns:1fr}
  .railbox{grid-template-columns:1fr}
  .prow{grid-template-columns:1fr auto;row-gap:var(--s2)}
  .prow__sku{grid-column:1/-1}
  .prow__price{grid-column:1}
  .prow>div:nth-child(4){grid-column:1}
  .prow__act{grid-column:2;grid-row:2/5;align-self:center}
}
@media (max-width:428px){
  .foot__grid{grid-template-columns:1fr}
  .plates{grid-template-columns:repeat(auto-fill,minmax(136px,1fr))}
  .plate__type{font-size:19px}
}