/* ===========================================================================
   QuickFitting selector — components layered on top of site.css.
   Brand tokens (--red, --charcoal, fonts) all come from site.css.
   =========================================================================== */

/* co-branding in the header.
   flex-shrink:0 + max-width:none are load-bearing: site.css sets a global
   img{max-width:100%}, which lets the flex row squeeze the wordmark until it
   reads "QUICK". */
.cobrand{display:flex;align-items:center;flex-shrink:0;padding-left:14px;margin-left:14px;
  border-left:2px solid var(--line)}
.cobrand .qflogo{height:22px;width:auto;max-width:none;flex-shrink:0;display:block}
@media(max-width:880px){ .cobrand{padding-left:12px;margin-left:12px} }
/* Shrink rather than hide: 375px is the commonest phone width and the supplier
   mark comfortably fits there next to the MooreMac logo. Only drop it on the
   genuinely tiny viewports where it would push the menu button off. */
@media(max-width:620px){ .cobrand .qflogo{height:18px} }
@media(max-width:420px){ .cobrand{padding-left:9px;margin-left:9px} .cobrand .qflogo{height:15px} }
@media(max-width:330px){ .cobrand{display:none} }

/* QuickFitting supplies the wordmark as a knockout: "QUICK" in the red gradient
   and "FITTING" plus the ® in WHITE, for dark backgrounds. On our white header
   that rendered as just "QUICK". quickfitting-logo.svg is the light-background
   version (those 8 paths recoloured to #231F20); quickfitting-logo-white.svg is
   the untouched original, for use on the dark footer or hero. */

/* ---------------------------------------------------------------- doors */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:820px){ .doors{grid-template-columns:1fr} }
.door{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-top:4px solid var(--red);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 26px 24px;transition:.15s;height:100%}
.door:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.door .dnum{font-family:var(--hsans);font-weight:800;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.door h2{font-weight:800;font-size:1.45rem;line-height:1.15;margin:6px 0 8px}
.door p{color:var(--dark-gray);font-size:.95rem;flex-grow:1}
.door .dfoot{margin-top:18px}

/* ------------------------------------------------- "learn the advantage" */
.advgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:820px){ .advgrid{grid-template-columns:1fr} }
.adv{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 26px 24px;position:relative;overflow:hidden}
.adv::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--red)}
.adv.green::before{background:#1a7f37}
.adv .aeyebrow{font-family:var(--hsans);font-weight:800;font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--red)}
.adv.green .aeyebrow{color:#14682c}
.adv h3{font-weight:800;font-size:1.5rem;line-height:1.12;letter-spacing:-.01em;margin:7px 0 9px}
@media(max-width:560px){ .adv h3{font-size:1.3rem} }
.adv .alede{color:var(--dark-gray);font-size:.95rem;margin-bottom:16px}
.adv ul{list-style:none;margin-bottom:20px}
.adv li{position:relative;padding-left:24px;font-size:.9rem;line-height:1.5;margin-bottom:9px;color:var(--charcoal)}
.adv li::before{content:"";position:absolute;left:4px;top:.52em;width:8px;height:8px;border-radius:50%;
  background:var(--red)}
.adv.green li::before{background:#1a7f37}
.adv li b{font-weight:600}
.adv .afoot{margin-top:auto}
.adv .swatch{display:inline-flex;align-items:center;gap:7px;background:#eef8f0;border:1px solid #c2e2cb;
  color:#14682c;font-family:var(--hsans);font-weight:700;font-size:.72rem;letter-spacing:.04em;
  padding:5px 11px;border-radius:20px;margin-bottom:12px}
.adv .swatch i{width:10px;height:10px;border-radius:50%;background:#1a7f37;display:block}

/* ------------------------------------------------------------ breadcrumb */
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px;font-size:.85rem}
.crumbs button{font-family:var(--hsans);font-weight:600;font-size:.82rem;background:#fff;border:1px solid var(--line);
  color:var(--charcoal);padding:6px 13px;border-radius:20px;cursor:pointer;transition:.15s}
.crumbs button:hover{border-color:var(--red);color:var(--red)}
.crumbs .sep{color:#bbb}
.crumbs .now{font-family:var(--hsans);font-weight:700;color:var(--red);padding:6px 0}

/* ----------------------------------------------------------------- tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:14px}
.tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:18px 14px 15px;cursor:pointer;transition:.15s}
.tile:hover{border-color:var(--red);box-shadow:var(--shadow);transform:translateY(-2px)}
.tile .ico{width:100%;height:78px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tile .ico img{max-height:78px;max-width:100%;object-fit:contain;mix-blend-mode:multiply}

/* --- art-shape compensation, keyed to the supplied icon set ---------------
   Two different source shapes need two different treatments. Both rules are
   proportional, so they hold at any tile width.

   Category art is a 1408x768 contact sheet: hero drawing on top, then a
   "CATEGORY n: NAME" text band, then a strip of tiny sub-icons. The text band
   duplicates the tile caption and the strip is illegible at this size, so the
   box crops to the top ~54% and keeps only the hero.

   Type art is 512x512 with a small centred subject, which lands far too small
   at 78px. Scaling up inside the clipped box makes it legible; the subjects are
   centred with generous margins, so nothing meaningful gets cropped.

   If the artwork is replaced with tight-cropped square icons, delete both
   rules -- the plain .ico above is the correct default.                     */
.tile.cat .ico{height:auto;aspect-ratio:1408/415;align-items:flex-start}
.tile.cat .ico img{width:100%;max-height:none;max-width:none;display:block}
.tile.type .ico{height:88px}
.tile.type .ico img{max-height:none;max-width:none;width:150%;transform:scale(1.12)}
.tile .tlabel{font-family:var(--hsans);font-weight:700;font-size:.92rem;line-height:1.2}
.tile .tcount{font-size:.76rem;color:#8a8a8a}
.tile .tsub{font-size:.78rem;color:var(--dark-gray)}

/* line tiles are wider, text-led */
.tiles.lines{grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.tiles.lines .tile{align-items:flex-start;text-align:left;padding:22px 20px}
.tiles.lines .tile h3{font-weight:800;font-size:1.12rem;line-height:1.2}
.tiles.lines .tile p{font-size:.85rem;color:var(--dark-gray)}

/* neutral placeholder when a real icon is missing */
.icoph{width:66px;height:52px;border:2px dashed #cfcfcf;border-radius:7px;display:flex;align-items:center;
  justify-content:center;color:#bbb;font-family:var(--hsans);font-weight:800;font-size:.62rem;letter-spacing:.06em}

/* ----------------------------------------------------------- size picker */
.sizebar{background:var(--light-gray);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-bottom:24px}
.sizegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px}
.fld label{display:block;font-family:var(--hsans);font-weight:700;font-size:.72rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--dark-gray);margin-bottom:5px}
.fld select{width:100%;font-family:var(--bsans);font-size:1rem;padding:11px 12px;border:1px solid var(--line);
  border-radius:8px;background:#fff;cursor:pointer}
.fld select:focus{outline:2px solid var(--red);border-color:var(--red)}
.fld select:disabled{background:#efefef;color:#aaa;cursor:not-allowed}
.sizebar .shint{font-size:.83rem;color:var(--dark-gray);margin-top:12px}
.sizebar .srow{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}

/* ---------------------------------------------------------- result cards */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(316px,1fr));gap:18px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:.15s}
.pcard:hover{box-shadow:var(--shadow-lg)}
.pcard.stocked{border-top:4px solid #1a7f37}
.pcard.sourcing{border-top:4px solid #b35c00}
.pcard .pphoto{height:172px;background:#fafafa;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;padding:12px}
.pcard .pphoto img{max-height:148px;max-width:100%;object-fit:contain;mix-blend-mode:multiply}
/* drawn fallback art (512x512, small centred subject) needs scaling; photos don't */
.pcard .pphoto.isicon img{transform:scale(1.45)}
.pcard .pbody{padding:16px 18px 18px;display:flex;flex-direction:column;flex-grow:1}
.pcard .pmodel{font-family:var(--hsans);font-weight:800;font-size:1.18rem;letter-spacing:-.01em}
.pcard .pdesc{font-size:.88rem;color:var(--dark-gray);margin:5px 0 10px;flex-grow:1}
.pcard .pmeta{font-size:.79rem;color:#8a8a8a;margin-bottom:12px;line-height:1.5}
.pcard .pmeta b{color:var(--charcoal);font-weight:600}
.pcard .pmeta .warr{font-family:var(--hsans);font-weight:700;font-size:.72rem;color:#14682c}
.pacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.pacts .btn{padding:9px 15px;font-size:.85rem}
.btn.small{padding:9px 15px;font-size:.85rem}
.btn.ghost{background:#fff;border-color:var(--line);color:var(--charcoal)}
.btn.ghost:hover{border-color:var(--red);color:var(--red);background:#fff}

/* ---------------------------------------------------------------- badges */
.badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--hsans);font-weight:700;font-size:.66rem;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:20px;margin-bottom:9px;align-self:flex-start}
.badge.stock{background:#e6f4ea;color:#14682c}
.badge.src{background:#fff4e3;color:#8a4b00}
.badge.exact{background:#e6f4ea;color:#14682c}
.badge.func{background:#fff4e3;color:#8a4b00}
.badge.none{background:#fdeaea;color:#a11b1b}
.badge.mat{background:var(--light-gray);color:var(--dark-gray)}

/* --------------------------------------------------------------- notices */
.notice{border-radius:var(--radius);padding:16px 18px;font-size:.9rem;margin-bottom:20px;border:1px solid}
.notice h4{font-family:var(--hsans);font-weight:800;font-size:.95rem;margin-bottom:5px}
.notice.warn{background:#fff9ec;border-color:#f0d9a8;color:#6b4a00}
.notice.info{background:#eef4fb;border-color:#c9dcf0;color:#1c4368}
.notice.bad{background:#fdeaea;border-color:#f2c2c2;color:#8a1b1b}
.notice.good{background:#eef8f0;border-color:#c2e2cb;color:#14682c}
.notice p{margin-top:4px}
.notice a{text-decoration:underline}

/* sourcing panel on a result card */
.srcbox{background:#fff9ec;border:1px solid #f0d9a8;border-radius:9px;padding:12px 14px;margin-bottom:12px}
.srcbox .slab{font-family:var(--hsans);font-weight:800;font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:#8a4b00;margin-bottom:4px}
.srcbox .smodel{font-family:var(--hsans);font-weight:800;font-size:1.05rem;color:var(--charcoal)}
.srcbox p{font-size:.8rem;color:#6b4a00;margin-top:5px}
/* scoped to .srcbox so the "Copy model" button in .pacts keeps normal .btn styling */
.srcbox .copybtn{background:none;border:1px solid #d8b877;color:#8a4b00;font-family:var(--hsans);font-weight:700;
  font-size:.72rem;padding:5px 10px;border-radius:6px;cursor:pointer;margin-top:8px}
.srcbox .copybtn:hover{background:#f7ecd4}

/* --------------------------------------------------------- cross-ref page */
.lookup{max-width:720px}
.lookup .lrow{display:flex;gap:10px}
@media(max-width:560px){ .lookup .lrow{flex-direction:column} }
.lookup input{flex:1;font-family:var(--bsans);font-size:1.06rem;padding:15px 17px;border:1px solid var(--line);border-radius:10px}
.lookup input:focus{outline:3px solid var(--red);border-color:var(--red)}
.suggest{border:1px solid var(--line);border-radius:10px;margin-top:10px;background:#fff;
  box-shadow:var(--shadow);overflow:hidden;max-height:330px;overflow-y:auto}
.suggest button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);
  padding:11px 15px;cursor:pointer;font-family:var(--bsans);font-size:.9rem}
.suggest button:last-child{border-bottom:0}
.suggest button:hover{background:var(--light-gray)}
.suggest .sm{font-family:var(--hsans);font-weight:700}
.suggest .sd{color:var(--dark-gray);font-size:.82rem}

/* the matched competitor part */
.matchcard{background:var(--light-gray);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-bottom:8px}
.matchcard .mlab{font-family:var(--hsans);font-weight:700;font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dark-gray)}
.matchcard h3{font-weight:800;font-size1.3rem;font-size:1.3rem;margin:4px 0 3px}
.matchcard .mdesc{font-size:.9rem;color:var(--dark-gray)}
.matchcard .mspecs{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:.82rem;color:var(--dark-gray)}
.matchcard .mspecs b{display:block;font-family:var(--hsans);font-size:.68rem;letter-spacing:.05em;
  text-transform:uppercase;color:#999;font-weight:700}

/* the arrow between competitor and QF */
.xarrow{display:flex;align-items:center;justify-content:center;gap:11px;padding:14px 0;color:#bbb}
.xarrow span{font-family:var(--hsans);font-weight:800;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#999}
.xarrow .ln{height:1px;background:var(--line);flex:1;max-width:110px}

/* alternates list */
.alts{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-top:16px}
.alts h4{font-family:var(--hsans);font-weight:800;font-size:.92rem;margin-bottom:8px}
.alts ul{list-style:none;font-size:.88rem;color:var(--dark-gray)}
.alts li{padding:7px 0;border-bottom:1px solid var(--line);line-height:1.5}
.alts li:last-child{border-bottom:0}
.alts li b{font-family:var(--hsans);color:var(--charcoal)}

/* ------------------------------------------------------------- bulk page */
.bulkin{background:var(--light-gray);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.blab{display:block;font-family:var(--hsans);font-weight:800;font-size:.78rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--dark-gray)}
.bulkin textarea{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.95rem;line-height:1.6;padding:14px 16px;border:1px solid var(--line);border-radius:10px;
  background:#fff;resize:vertical}
.bulkin textarea:focus{outline:2px solid var(--red);border-color:var(--red)}
.brow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.exlink{color:var(--red);text-decoration:underline;font-weight:600}
.filebtn{display:inline-flex;align-items:center;font-family:var(--hsans);font-weight:700;font-size:.85rem;
  padding:9px 15px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;color:var(--charcoal)}
.filebtn:hover{border-color:var(--red);color:var(--red)}
.filebtn input{display:none}
.kbd{font-family:ui-monospace,Menlo,Consolas,monospace;border:1px solid var(--line);background:#fff;
  border-radius:5px;padding:2px 6px;font-size:.75rem}

/* summary tiles */
.sumrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:12px;margin-bottom:18px}
.sumcard{background:#fff;border:1px solid var(--line);border-top:3px solid var(--line);
  border-radius:10px;padding:14px 16px;text-align:center}
.sumcard b{display:block;font-family:var(--hsans);font-weight:800;font-size:1.6rem;line-height:1.1}
.sumcard span{font-size:.75rem;color:var(--dark-gray)}
.sumcard.ok{border-top-color:#1a7f37}
.sumcard.warn{border-top-color:#b35c00}
.sumcard.bad{border-top-color:#a11b1b}

/* results table — must scroll inside its own box, never the page */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table.btbl{border-collapse:collapse;width:100%;min-width:900px;font-size:.88rem}
table.btbl th{font-family:var(--hsans);font-weight:700;font-size:.7rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--dark-gray);text-align:left;padding:11px 14px;
  background:var(--light-gray);border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0}
table.btbl td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45}
table.btbl tr:last-child td{border-bottom:0}
table.btbl tr:hover td{background:#fcfcfc}
table.btbl .mono{font-family:var(--hsans);font-weight:700}
.glink{color:var(--red);font-weight:700;font-family:var(--hsans);text-decoration:underline}

/* --------------------------------------------------------------- utility */
.muted{color:var(--dark-gray)}
.small{font-size:.85rem}
.hide{display:none !important}
.rescount{font-family:var(--hsans);font-weight:700;font-size:.85rem;color:var(--dark-gray);margin-bottom:14px}
.rescount b{color:var(--red)}
.stack{display:flex;flex-direction:column;gap:10px}
.othercfg{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.othercfg h4{font-family:var(--hsans);font-weight:800;font-size:1rem;margin-bottom:4px}
.othercfg p{font-size:.85rem;color:var(--dark-gray);margin-bottom:14px}
.artflag{font-size:.7rem;color:#b08a3c;font-family:var(--hsans);font-weight:700}
.datafoot{font-size:.78rem;color:#999;margin-top:26px;padding-top:16px;border-top:1px solid var(--line)}