/* kinnerbuilder.com — dense industrial catalogue styling.
   Deliberately close to the big distributor sites: white content on a dark
   navy chrome, one red accent used only for actions, tight type, and grids
   that survive 100+ tiles without becoming a scroll marathon. */

:root{
  --navy:#10243c;
  --navy-2:#183353;
  --red:#c8102e;
  --red-d:#a20d25;
  --ink:#12212f;
  --body:#3d4d5c;
  --mute:#6b7c8c;
  --line:#dde3e9;
  --line-2:#eef2f5;
  --bg:#f5f7f9;
  --white:#fff;
  --radius:4px;
  --wrap:1360px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--body);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
h1,h2,h3,h4{color:var(--ink);line-height:1.25;margin:0 0 .5em}
h1{font-size:30px;letter-spacing:-.01em}
h2{font-size:21px}
h3{font-size:16px}
a{color:#0b5ea8;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------------------------------------------------------------- header */
.topbar{background:var(--navy);color:#fff}
.topbar-in{display:flex;align-items:center;gap:24px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand-mark{
  background:var(--red);color:#fff;font-weight:800;font-size:15px;letter-spacing:.02em;
  width:36px;height:36px;display:grid;place-items:center;border-radius:var(--radius);
}
.brand-txt{font-size:19px;font-weight:400;letter-spacing:-.01em;white-space:nowrap}
.brand-txt strong{font-weight:800}

.searchbar{flex:1 1 auto;display:flex;max-width:820px}
.searchbar input{
  flex:1;min-width:0;border:0;border-radius:var(--radius) 0 0 var(--radius);
  padding:11px 14px;font-size:14px;color:var(--ink);
}
.searchbar input:focus{outline:2px solid var(--red);outline-offset:-2px}
.searchbar button{
  border:0;background:var(--red);color:#fff;font-weight:700;font-size:14px;
  padding:0 22px;border-radius:0 var(--radius) var(--radius) 0;cursor:pointer;
}
.searchbar button:hover{background:var(--red-d)}

.toplinks{display:flex;gap:20px;flex:0 0 auto}
.toplinks a{color:#cfdbe7;font-size:14px}
.toplinks a:hover{color:#fff}

.groupbar{background:var(--navy-2);overflow-x:auto}
.groupbar-in{display:flex;gap:22px;padding-top:10px;padding-bottom:10px;white-space:nowrap}
.groupbar a{color:#b9cadb;font-size:13px;font-weight:600}
.groupbar a:hover{color:#fff;text-decoration:none}

.crumbs{background:var(--white);border-bottom:1px solid var(--line)}
.crumbs .wrap{padding-top:9px;padding-bottom:9px;font-size:13px;color:var(--mute)}
.crumbs span{margin:0 7px;color:#b6c0c9}
.crumbs strong{color:var(--ink);font-weight:600}

main.wrap{padding-top:26px;padding-bottom:56px}

/* ------------------------------------------------------------------ hero */
.hero{
  background:linear-gradient(160deg,#12283f,#1d3f63);color:#fff;
  border-radius:6px;padding:44px 40px;margin-bottom:34px;
}
.hero-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:38px;align-items:center}
.hero-copy{min-width:0}
.hero-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;min-width:0}
.hm{position:relative;display:block;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:15/11;background:#0e2035;border:1px solid rgba(255,255,255,.14)}
.hm img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .18s ease;opacity:.94}
.hm:hover img{transform:scale(1.05);opacity:1}
.hm:hover{text-decoration:none;border-color:rgba(255,255,255,.4)}
.hm span{position:absolute;left:0;right:0;bottom:0;padding:14px 8px 5px;
  font-size:11px;font-weight:700;color:#fff;line-height:1.25;
  background:linear-gradient(to top,rgba(8,20,34,.88),rgba(8,20,34,0));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:900px){ .hero-split{grid-template-columns:1fr;gap:26px} }
.hero h1{color:#fff;font-size:33px;max-width:19em;margin-bottom:.35em}
.hero-sub{color:#c3d3e2;max-width:52em;font-size:16px;margin:0 0 22px}
.hero-search{display:flex;max-width:660px;margin-bottom:22px}
.hero-search input{flex:1;min-width:0;border:0;border-radius:var(--radius) 0 0 var(--radius);padding:13px 16px;font-size:15px;color:var(--ink)}
.hero-search button{border:0;background:var(--red);color:#fff;font-weight:700;padding:0 26px;border-radius:0 var(--radius) var(--radius) 0;cursor:pointer;font-size:15px}
.hero-search button:hover{background:var(--red-d)}
.hero-stats{list-style:none;display:flex;flex-wrap:wrap;gap:34px;margin:0;padding:0;color:#9fb6cc;font-size:13px}
.hero-stats strong{display:block;color:#fff;font-size:23px;font-weight:800;line-height:1.2}

/* --------------------------------------------------------------- popular */
.popular{margin-bottom:30px}
.popular h2{font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.chiprow{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  background:var(--white);border:1px solid var(--line);border-radius:100px;
  padding:6px 14px;font-size:13px;color:var(--ink);font-weight:600;
}
.chip span{color:var(--mute);font-weight:400;margin-left:4px}
.chip:hover{border-color:var(--navy);text-decoration:none}

/* ------------------------------------------------------------ tile grids */
.catgroup{margin-bottom:38px;scroll-margin-top:16px}
.group-h{
  font-size:17px;padding-bottom:9px;margin-bottom:16px;
  border-bottom:2px solid var(--navy);display:flex;align-items:baseline;gap:9px;
}
.group-n{font-size:12px;font-weight:600;color:var(--mute);background:var(--line-2);padding:2px 8px;border-radius:100px}

.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
.tile{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .12s,border-color .12s;
}
.tile:hover{border-color:var(--navy);box-shadow:0 2px 10px rgba(16,36,60,.13);text-decoration:none}
.tile-img{
  aspect-ratio:22/15;background:hsl(var(--h,210) 32% 94%);
  display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line-2);
}
.tile-img img{width:100%;height:100%;object-fit:cover}
.mono{font-size:30px;font-weight:800;color:hsl(var(--h,210) 40% 55%);letter-spacing:-.02em}
.tile-body{padding:11px 13px 13px}
.tile-body h3{font-size:14px;margin-bottom:3px}
.tile-body p{margin:0;font-size:12px;line-height:1.45;color:var(--mute)}
.tile-n{display:inline-block;margin-top:7px;font-size:11px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.04em}

.catlist{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
/* height:100% matters here — the 1px grid gap shows the container's border
   colour through, so a short cell next to a two-line one reads as a grey
   band across the row rather than as a card. */
.catlist a{display:flex;gap:12px;align-items:flex-start;background:var(--white);
  padding:11px 14px;color:var(--body);height:100%}
.catlist a:hover{background:#f0f5fa;text-decoration:none}
.catlist strong{color:var(--ink);font-size:14px}
.catlist .n{float:right;font-size:11px;font-weight:700;color:var(--red)}
.catlist em{display:block;font-style:normal;font-size:12px;color:var(--mute);margin-top:2px}
.cl-img{flex:0 0 52px;width:52px;height:52px;border-radius:3px;overflow:hidden;
  background:hsl(var(--h,210) 30% 95%);display:block}
.cl-img img{width:100%;height:100%;object-fit:cover;display:block}
.cl-txt{min-width:0;flex:1}

/* Thumbnails in a facet list. Small enough to stay a wayfinding aid rather
   than a second product grid competing with the parts beside it. */
.facet-thumbs li a{align-items:center;gap:9px;padding:5px 0}
.facet-thumbs img{flex:0 0 30px;width:30px;height:30px;object-fit:cover;border-radius:3px;
  background:var(--line-2);display:block}
.facet-thumbs b{font-weight:400;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.chip-img{display:inline-flex;align-items:center;gap:8px;padding:4px 14px 4px 5px}
.chip-img img{width:26px;height:26px;border-radius:100px;object-fit:cover;display:block;background:var(--line-2)}

/* ---------------------------------------------------------- category page */
.cat-head{margin-bottom:22px}
.cat-head-img{display:flex;gap:20px;align-items:flex-start}
.cat-head-txt{min-width:0;flex:1}
.cat-hero{flex:0 0 168px;width:168px;aspect-ratio:22/15;border-radius:var(--radius);
  overflow:hidden;border:1px solid var(--line);background:hsl(var(--h,210) 32% 94%)}
.cat-hero img{width:100%;height:100%;object-fit:cover;display:block}
.cat-tag{font-size:16px;color:var(--body);margin:0 0 8px;max-width:60em}
.cat-syn{font-size:12px;color:var(--mute);margin:0}
.cat-syn span{background:var(--line-2);border-radius:3px;padding:2px 7px;margin-right:5px;display:inline-block}

.cat-layout{display:grid;grid-template-columns:232px 1fr;gap:26px;align-items:start}
.facets{position:sticky;top:14px}
.facet{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;margin-bottom:13px}
.facet h4{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin-bottom:9px}
.facet ul{list-style:none;margin:0;padding:0;max-height:290px;overflow-y:auto}
.facet li a{display:flex;justify-content:space-between;gap:8px;padding:4px 0;font-size:13px;color:var(--body)}
.facet li a span{color:var(--mute);font-size:11px;flex:0 0 auto}
.facet li a.on{font-weight:700;color:var(--red)}
.facet li a.clear{color:var(--red);font-weight:600}

.cat-main{min-width:0}
.toolbar{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 14px;margin-bottom:13px;font-size:13px;
}
.toolbar .count{font-weight:700;color:var(--ink)}
.sorts{display:flex;gap:14px;flex-wrap:wrap}
.sorts a{color:var(--mute)}
.sorts a.on{color:var(--red);font-weight:700}

.parts{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.part{display:grid;grid-template-columns:96px 1fr 220px;gap:16px;background:var(--white);padding:14px 16px;align-items:start}
.part-img{aspect-ratio:1;background:hsl(var(--h,210) 30% 95%);border-radius:3px;display:grid;place-items:center;overflow:hidden}
.part-img img{width:100%;height:100%;object-fit:contain}
.part-img .mono{font-size:24px}
.part-info h3{font-size:15px;margin-bottom:4px}
.part-meta{margin:0 0 5px;font-size:12px;color:var(--mute);display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.part-meta strong{color:var(--ink)}
.mpn{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--line-2);padding:1px 6px;border-radius:3px;font-size:11px}
.part-specs{margin:0;font-size:12px;color:var(--mute);display:flex;flex-wrap:wrap;gap:4px 14px}
.part-specs b{color:var(--body);font-weight:600}
.part-buy{display:flex;flex-direction:column;gap:5px;align-items:stretch}
.from{font-size:12px;color:var(--mute);text-align:right}
.from strong{color:var(--ink);font-size:16px}
.buy{
  display:flex;justify-content:space-between;gap:8px;border:1px solid var(--line);
  border-radius:3px;padding:6px 10px;font-size:12px;color:var(--ink);font-weight:600;background:#fbfcfd;
}
.buy span{color:var(--red);font-weight:700}
.buy:hover{border-color:var(--navy);background:var(--white);text-decoration:none}
.more{font-size:12px;color:var(--mute);text-align:right}

.pager{display:flex;justify-content:center;align-items:center;gap:20px;font-size:14px;padding:14px 0}
.pager span{color:var(--mute)}

.empty{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:32px;text-align:center;margin-bottom:22px}
.empty.big{padding:70px 32px}
.empty h2{margin-bottom:8px}
.empty p{margin:0 auto;max-width:44em;color:var(--mute)}

.seo{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px 28px;margin-top:18px}
.seo h2{font-size:18px;margin-bottom:12px}
.seo p{margin:0 0 12px;max-width:64em}
.seo p:last-child{margin-bottom:0}
.seo.guide{background:#f8fafc}

/* -------------------------------------------------------------- part page */
.part-page{display:grid;grid-template-columns:280px 1fr 320px;gap:26px;align-items:start}
.pp-img{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);aspect-ratio:1;display:grid;place-items:center;overflow:hidden;padding:16px}
/* max-width matters as much as max-height: the <img> carries its intrinsic
   width/height attributes (they reserve space and stop layout shift), so a
   700px-wide landscape photo without a width cap overflows the 280px panel,
   and an overflowing grid item stops honouring place-items:center — which
   left the photo pinned to the top with dead white space under it. */
.pp-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pp-img .mono{font-size:64px}
.pp-main{min-width:0}
.pp-meta{display:flex;flex-wrap:wrap;gap:11px;align-items:center;font-size:13px;color:var(--mute);margin:0 0 14px}
.pp-meta strong{color:var(--ink);font-size:14px}
.pp-cat{background:var(--line-2);padding:2px 9px;border-radius:3px}
.pp-desc{font-size:15px;margin:0 0 20px;max-width:56em}
.specs{width:100%;border-collapse:collapse;font-size:13px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}
.specs th,.specs td{text-align:left;padding:8px 13px;border-bottom:1px solid var(--line-2)}
.specs th{color:var(--mute);font-weight:600;width:38%}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}

.pp-offers{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.pp-offers h2{font-size:16px;margin-bottom:6px}
.pp-offers-sub{font-size:12px;color:var(--mute);margin:0 0 14px}
.offers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.offers li{border:1px solid var(--line);border-radius:var(--radius);padding:11px 13px}
.o-v strong{display:block;font-size:14px;color:var(--ink)}
.o-kind,.o-sku{font-size:11px;color:var(--mute);text-transform:capitalize}
.o-sku{display:block;font-family:ui-monospace,Menlo,monospace;text-transform:none}
.o-p{margin:6px 0 9px}
.o-p strong{font-size:19px;color:var(--ink)}
.o-unit{font-size:11px;color:var(--mute);margin-left:5px}
.o-nop{font-size:13px;color:var(--mute)}
.o-go{
  display:block;text-align:center;background:var(--red);color:#fff;font-weight:700;
  font-size:13px;padding:8px;border-radius:3px;
}
.o-go:hover{background:var(--red-d);text-decoration:none}

.related{margin-top:34px}
.relgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.relcard{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  display:flex;flex-direction:column;overflow:hidden}
.relcard:hover{border-color:var(--navy);text-decoration:none}
.rel-img{display:block;aspect-ratio:4/3;background:hsl(var(--h,210) 30% 95%);
  border-bottom:1px solid var(--line-2);overflow:hidden}
.rel-img img{width:100%;height:100%;object-fit:contain;display:block}
.rel-body{display:block;padding:11px 13px 13px}
.rel-name{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:4px}
.rel-brand{font-size:12px;color:var(--mute)}
.rel-n{display:block;font-size:11px;color:var(--red);font-weight:700;margin-top:5px}

/* ---------------------------------------------------------------- tables */
.vtable{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);font-size:14px;overflow:hidden}
.vtable th,.vtable td{text-align:left;padding:11px 15px;border-bottom:1px solid var(--line-2)}
.vtable thead th{background:#f7f9fb;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--mute)}
.vtable .r{text-align:right}
.vdom{display:block;font-size:12px;color:var(--mute)}
.vname{display:flex;align-items:center;gap:14px}
.vlogo{flex:0 0 104px;width:104px;height:46px;display:grid;place-items:center}
.vlogo img{max-width:104px;max-height:46px;width:auto;height:auto;object-fit:contain;display:block}

/* ----------------------------------------------------------------- prose */
.prose{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:38px 44px;max-width:840px}
.prose h2{margin-top:28px;font-size:19px}
.prose .lede{font-size:17px;color:var(--ink)}
.prose ul{padding-left:20px}
.prose li{margin-bottom:7px}
.prose code{background:var(--line-2);padding:1px 5px;border-radius:3px;font-size:13px}

/* ---------------------------------------------------------------- footer */
.site-footer{background:var(--navy);color:#a9bccd;margin-top:40px;padding:38px 0 0}
.foot-in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:36px;padding-bottom:28px}
.foot-brand{color:#fff;margin-bottom:10px}
.foot-col p{font-size:13px;margin:0;max-width:38em;line-height:1.65}
.foot-col h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:11px}
.foot-col a{display:block;color:#a9bccd;font-size:13px;padding:3px 0}
.foot-col a:hover{color:#fff}
.foot-legal{border-top:1px solid #21405f;padding-top:16px;padding-bottom:26px}
.foot-legal p{font-size:12px;color:#7e93a7;margin:0;line-height:1.6}

/* ------------------------------------------------------------ responsive */
@media (max-width:1080px){
  .part-page{grid-template-columns:220px 1fr}
  .pp-offers{grid-column:1/-1}
}
@media (max-width:900px){
  .topbar-in{flex-wrap:wrap;gap:12px}
  .searchbar{order:3;flex-basis:100%;max-width:none}
  .cat-layout{grid-template-columns:1fr}
  .facets{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
  .facet{margin-bottom:0}
  .part{grid-template-columns:72px 1fr}
  .part-buy{grid-column:1/-1}
  .from{text-align:left}
  .more{text-align:left}
  .foot-in{grid-template-columns:1fr}
}
@media (max-width:620px){
  h1{font-size:24px}
  .hero{padding:28px 22px}
  .hero h1{font-size:25px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
  .part-page{grid-template-columns:1fr}
  .prose{padding:24px 22px}
  .toplinks{font-size:13px;gap:14px}
}

.cat-syn-more{background:transparent;color:var(--mute);font-style:italic}

.pp-context{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.pp-context h2{font-size:17px;margin-bottom:10px}
.pp-context p{margin:0 0 10px;max-width:62em}
.pp-context-more{font-size:13px;color:var(--mute)}

/* house-term explainer on search results */
.house-note{margin:10px 0 0;padding:10px 14px;font-size:.88rem;line-height:1.5;
  background:#f4f7fa;border-left:3px solid #b8332a;border-radius:0 6px 6px 0;color:#44515f;max-width:78ch}
.house-note b{color:#20242f}

/* ---------------------------------------------- catalogue / datasheet cell */
.part-doc{display:flex;flex-direction:column;gap:6px;align-items:stretch;min-width:0}
.doc-card{
  display:flex;gap:10px;align-items:center;border:1px solid var(--line);
  border-radius:var(--radius);padding:7px 9px;background:#fbfcfd;
}
.doc-card:hover{border-color:var(--navy);background:var(--white);text-decoration:none}
.doc-thumb{
  width:44px;height:58px;object-fit:cover;object-position:top center;flex:0 0 auto;
  border:1px solid var(--line);border-radius:2px;background:#fff;
}
.doc-thumb-none{
  display:grid;place-items:center;font-size:10px;font-weight:800;color:var(--red);
  letter-spacing:.04em;
}
.doc-meta{display:flex;flex-direction:column;gap:1px;min-width:0;font-size:11px;color:var(--mute)}
.doc-meta b{font-size:12px;color:var(--ink)}
.doc-src{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:15ch}
.doc-dl{
  display:block;text-align:center;font-size:11px;font-weight:700;padding:5px;
  border-radius:3px;background:var(--navy);color:#fff;
}
.doc-dl:hover{background:var(--navy-2);text-decoration:none}
.doc-none{font-size:11px;color:#9aa8b5;font-style:italic;text-align:center;padding:6px 0}

/* A search row gains a fourth column for the document — but ONLY when the
   result set actually has documents to show. This rule used to apply to
   `.parts` generally, which gave the category listing a fourth column it has
   no cell for: every category page carried a 190px dead strip down its right
   edge, and every catalogue-less search row repeated "No catalogue found"
   into it. Catalogue coverage is inherently sparse (brand-level documents,
   against a very long brand tail), so the empty case is the common one and
   the layout should not reserve space for it. */
.parts-doc .part{grid-template-columns:96px 1fr 190px 190px}
@media (max-width:1080px){
  .parts-doc .part{grid-template-columns:80px 1fr 170px} .part-doc{grid-column:2/-1}
}
@media (max-width:900px){
  .parts-doc .part{grid-template-columns:72px 1fr} .part-doc{grid-column:1/-1}
}