:root{--ff-navy:#0b2140;--ff-blue:#1664e8;--ff-blue2:#0b57d0;--ff-sky:#edf5ff;--ff-text:#102033;--ff-muted:#66758a;--ff-line:#e5eaf0;--ff-soft:#f7f9fc;--ff-green:#159b68;--ff-orange:#f59b23;--ff-shadow:0 18px 55px rgba(24,49,84,.10)}
*{box-sizing:border-box}.ff-page{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ff-text);background:#fff}.ff-container{width:min(1240px,calc(100% - 36px));margin:0 auto}.ff-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--ff-line)}.ff-nav{height:74px;display:flex;align-items:center;gap:28px}.ff-logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ff-navy);font-size:20px;font-weight:900;letter-spacing:-.8px;white-space:nowrap}.ff-logo-mark{width:34px;height:34px;border:2px solid var(--ff-blue);border-radius:10px;display:grid;place-items:center;color:var(--ff-blue);font-weight:900;font-size:13px}.ff-logo span span{color:var(--ff-blue)}.ff-navlinks{display:flex;align-items:center;gap:24px;flex:1}.ff-navlinks a{font-size:12px;font-weight:700;color:#46566c;text-decoration:none}.ff-navlinks a:hover{color:var(--ff-blue)}.ff-nav-actions{display:flex;align-items:center;gap:10px}.ff-login{padding:9px 13px;border:1px solid var(--ff-line);border-radius:9px;color:var(--ff-text);font-size:12px;font-weight:750;text-decoration:none}.ff-post{padding:10px 15px;background:var(--ff-blue);border-radius:9px;color:#fff;font-size:12px;font-weight:800;text-decoration:none;box-shadow:0 8px 18px rgba(22,100,232,.18)}.ff-mobile-toggle{display:none;margin-left:auto;border:0;background:#f2f5f9;width:38px;height:38px;border-radius:10px}.ff-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#f8fbff 0%,#fff 100%);padding:68px 0 46px}.ff-hero-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:54px;align-items:center}.ff-eyebrow{display:inline-flex;align-items:center;gap:8px;background:#eaf2ff;color:var(--ff-blue);padding:7px 11px;border-radius:999px;font-size:10px;font-weight:850;letter-spacing:.5px}.ff-hero h1{font-size:57px;line-height:1.03;letter-spacing:-3.2px;margin:17px 0 18px;color:var(--ff-navy);font-weight:900}.ff-hero h1 em{font-style:normal;color:var(--ff-blue)}.ff-hero-copy{font-size:16px;line-height:1.7;color:var(--ff-muted);max-width:600px;margin:0 0 28px}.ff-search{background:#fff;border:1px solid #dfe6ee;border-radius:14px;padding:8px;box-shadow:var(--ff-shadow);max-width:690px}.ff-search-row{display:flex;align-items:center;gap:10px;height:52px;padding:0 13px}.ff-search-row svg{color:#8290a1;flex:none}.ff-search-row input{border:0;outline:0;width:100%;font-size:14px;color:var(--ff-text)}.ff-search-row button{border:0;background:var(--ff-blue);color:#fff;border-radius:9px;height:42px;padding:0 18px;font-size:12px;font-weight:800;white-space:nowrap}.ff-popular{display:flex;gap:7px;flex-wrap:wrap;align-items:center;padding:5px 8px 2px;color:#8a96a6;font-size:10px}.ff-chip{border:1px solid #e2e7ed;background:#fff;border-radius:999px;padding:6px 9px;color:#55667b;font-weight:700}.ff-hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:26px}.ff-stat{border:1px solid var(--ff-line);background:#fff;border-radius:12px;padding:13px 14px}.ff-stat b{display:block;font-size:18px;letter-spacing:-.5px;color:var(--ff-navy)}.ff-stat span{display:block;color:#7a8798;font-size:9px;margin-top:3px}.ff-match{background:#fff;border:1px solid #e0e6ee;border-radius:18px;box-shadow:0 24px 70px rgba(23,48,81,.13);padding:18px;max-width:510px;margin-left:auto}.ff-match-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--ff-line);font-size:10px;font-weight:850;color:#6b7889;letter-spacing:.7px}.ff-live{color:var(--ff-green);display:flex;align-items:center;gap:6px}.ff-live i{width:7px;height:7px;border-radius:50%;background:var(--ff-green)}.ff-req{display:flex;gap:13px;padding:17px 0}.ff-req-icon{width:44px;height:44px;border-radius:12px;background:#edf5ff;color:var(--ff-blue);display:grid;place-items:center;flex:none}.ff-req small{font-size:9px;color:#8490a0;font-weight:800;letter-spacing:.8px}.ff-req strong{display:block;font-size:16px;margin:4px 0}.ff-req span{font-size:10px;color:#7d8998}.ff-match-score{display:flex;align-items:center;gap:12px;background:#f7fafc;border:1px solid #edf1f5;border-radius:11px;padding:11px}.ff-ring{width:48px;height:48px;border-radius:50%;background:conic-gradient(var(--ff-green) 0 98%,#dfe8e3 98%);display:grid;place-items:center;flex:none}.ff-ring:after{content:"98%";width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:11px;font-weight:900;color:var(--ff-green)}.ff-scorebar{height:6px;background:#e2e8ee;border-radius:10px;flex:1}.ff-scorebar i{display:block;width:98%;height:100%;border-radius:10px;background:var(--ff-green)}.ff-scoretext{font-size:9px;color:var(--ff-green);font-weight:850}.ff-supplier-row{display:flex;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid #eef1f4}.ff-avatar{width:39px;height:39px;border-radius:11px;background:#f0f4f8;display:grid;place-items:center;font-size:11px;font-weight:900;color:#314258;flex:none}.ff-supplier-main{flex:1;min-width:0}.ff-supplier-main b{display:block;font-size:11px}.ff-supplier-main span{display:flex;align-items:center;gap:4px;color:#7d8998;font-size:9px;margin-top:4px}.ff-verify{color:var(--ff-green);font-weight:800}.ff-connect{border:1px solid #dce4ec;background:#fff;color:var(--ff-blue);border-radius:7px;padding:7px 9px;font-size:9px;font-weight:850}.ff-steps{padding:24px 0;border-top:1px solid var(--ff-line);border-bottom:1px solid var(--ff-line);background:#fff}.ff-step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.ff-step{position:relative;text-align:left;padding:0 8px}.ff-step:not(:last-child):after{content:"";position:absolute;top:18px;right:-12px;width:24px;border-top:1px dashed #cfd8e3}.ff-step-num{width:36px;height:36px;border-radius:50%;background:#edf5ff;color:var(--ff-blue);display:grid;place-items:center;font-size:12px;font-weight:900;margin-bottom:10px}.ff-step h3{font-size:12px;margin:0 0 4px}.ff-step p{font-size:9px;line-height:1.5;color:#7a8797;margin:0}.ff-section{padding:72px 0}.ff-section.alt{background:#f7f9fc}.ff-section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.ff-kicker{font-size:10px;font-weight:900;letter-spacing:1.2px;color:var(--ff-blue);text-transform:uppercase}.ff-section h2{font-size:34px;letter-spacing:-1.7px;margin:8px 0 5px;color:var(--ff-navy)}.ff-section h2 span{color:#7c8999}.ff-section-sub{font-size:13px;color:var(--ff-muted);margin:0}.ff-text-link{font-size:11px;font-weight:850;color:var(--ff-blue);text-decoration:none}.ff-demand-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.ff-demand-card{border:1px solid var(--ff-line);border-radius:14px;padding:17px;background:#fff;text-decoration:none;color:var(--ff-text);transition:.2s}.ff-demand-card:hover{transform:translateY(-2px);box-shadow:var(--ff-shadow)}.ff-cat-icon{width:42px;height:42px;border-radius:11px;background:#edf5ff;color:var(--ff-blue);display:grid;place-items:center;margin-bottom:12px;overflow:hidden}.ff-cat-icon img{width:100%;height:100%;object-fit:cover}.ff-demand-card h3{font-size:13px;margin:0 0 8px}.ff-demand-card p{font-size:9px;color:#7d8998;margin:0}.ff-demand-pill{display:inline-flex;margin-top:10px;background:#fff5e8;color:#b46b0a;border-radius:999px;padding:5px 8px;font-size:8px;font-weight:850}.ff-category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.ff-category{background:#fff;border:1px solid var(--ff-line);border-radius:14px;padding:17px;text-decoration:none;color:var(--ff-text);min-height:122px;transition:.2s}.ff-category:hover{border-color:#c9d9ef;box-shadow:var(--ff-shadow);transform:translateY(-2px)}.ff-category h3{font-size:13px;margin:13px 0 5px}.ff-category p{font-size:9px;color:#8a96a6;margin:0}.ff-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.ff-trust-card{border:1px solid var(--ff-line);border-radius:14px;background:#fff;padding:17px;display:flex;gap:11px}.ff-trust-icon{width:36px;height:36px;border-radius:10px;background:#edf5ff;color:var(--ff-blue);display:grid;place-items:center;flex:none}.ff-trust-card b{font-size:11px;display:block}.ff-trust-card p{font-size:9px;color:#7d8998;margin:4px 0 0;line-height:1.5}.ff-supplier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.ff-supplier-card{border:1px solid var(--ff-line);border-radius:15px;background:#fff;padding:17px}.ff-supplier-head{display:flex;gap:10px}.ff-supplier-card h3{font-size:13px;margin:5px 0 3px}.ff-supplier-card p{font-size:9px;color:#8290a0;margin:0}.ff-badge{display:inline-flex;align-items:center;gap:4px;background:#eaf8f2;color:#147a56;border-radius:999px;padding:4px 7px;font-size:8px;font-weight:850}.ff-supplier-meta{display:flex;gap:12px;border-top:1px solid #edf1f4;border-bottom:1px solid #edf1f4;padding:10px 0;margin:14px 0;font-size:9px;color:#69778a}.ff-supplier-foot{display:flex;justify-content:space-between;align-items:center}.ff-supplier-foot b{font-size:15px;color:var(--ff-green)}.ff-supplier-foot span{font-size:8px;color:#8995a5}.ff-supplier-foot a{background:var(--ff-blue);color:#fff;border-radius:7px;padding:8px 10px;font-size:9px;font-weight:850;text-decoration:none}.ff-tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.ff-tool{border:1px solid var(--ff-line);border-radius:14px;padding:17px;background:#fff;text-decoration:none;color:var(--ff-text)}.ff-tool-icon{width:38px;height:38px;border-radius:10px;background:#edf5ff;color:var(--ff-blue);display:grid;place-items:center}.ff-tool h3{font-size:12px;margin:14px 0 5px}.ff-tool p{font-size:9px;line-height:1.5;color:#7d8998;margin:0}.ff-rfq{background:linear-gradient(135deg,#f3f8ff,#fff);border-top:1px solid #e8eff7;border-bottom:1px solid #e8eff7}.ff-rfq-grid{display:grid;grid-template-columns:1fr 480px;gap:55px;align-items:center}.ff-rfq h2{font-size:42px;line-height:1.06;letter-spacing:-2px;color:var(--ff-navy);margin:10px 0 12px}.ff-rfq h2 em{font-style:normal;color:var(--ff-blue)}.ff-rfq p{font-size:13px;line-height:1.7;color:var(--ff-muted);max-width:560px}.ff-form{background:#fff;border:1px solid #dfe7ef;border-radius:18px;padding:20px;box-shadow:var(--ff-shadow)}.ff-form-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.ff-form-title b{font-size:17px}.ff-free{background:#eaf8f2;color:#147a56;padding:5px 8px;border-radius:999px;font-size:8px;font-weight:900}.ff-form-sub{font-size:9px;color:#8290a0;margin-bottom:14px}.ff-form label{display:block;font-size:8px;color:#66758a;font-weight:900;letter-spacing:.5px;text-transform:uppercase;margin:0 0 5px}.ff-form input,.ff-form select,.ff-form textarea{width:100%;border:1px solid #dfe6ee;border-radius:8px;padding:9px 10px;font-size:11px;outline:0;background:#fff;color:#203047}.ff-form textarea{min-height:72px;resize:vertical}.ff-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:9px}.ff-form-field{margin-bottom:9px}.ff-submit{width:100%;border:0;background:var(--ff-blue);color:#fff;border-radius:9px;padding:11px;font-size:11px;font-weight:900}.ff-safe{font-size:8px;color:var(--ff-green);font-weight:800;text-align:center;margin-top:9px}.ff-footer{background:#0b2140;color:#fff;padding:52px 0 18px}.ff-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:35px}.ff-footer h4{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#9db0c9;margin:0 0 12px}.ff-footer a{display:block;color:#d0d9e5;text-decoration:none;font-size:10px;margin:8px 0}.ff-footer p{font-size:10px;line-height:1.7;color:#a8b8ca;max-width:330px}.ff-copy{border-top:1px solid rgba(255,255,255,.1);margin-top:35px;padding-top:15px;color:#91a3b8;font-size:9px}.ff-mobile-menu{display:none}
@media(max-width:1000px){.ff-navlinks{gap:13px}.ff-navlinks a:nth-child(3){display:none}.ff-hero-grid,.ff-rfq-grid{grid-template-columns:1fr}.ff-match{margin:0;max-width:none}.ff-demand-grid,.ff-category-grid{grid-template-columns:repeat(2,1fr)}.ff-supplier-grid,.ff-tools-grid{grid-template-columns:repeat(2,1fr)}.ff-trust{grid-template-columns:repeat(2,1fr)}.ff-rfq-grid{gap:30px}.ff-footer-grid{grid-template-columns:2fr 1fr 1fr}}
@media(max-width:720px){.ff-container{width:min(100% - 24px,1240px)}.ff-nav{height:64px}.ff-navlinks,.ff-nav-actions .ff-login{display:none}.ff-mobile-toggle{display:grid;place-items:center}.ff-hero{padding:44px 0 30px}.ff-hero h1{font-size:41px;letter-spacing:-2px}.ff-hero-copy{font-size:14px}.ff-search-row button{padding:0 11px}.ff-hero-stats{grid-template-columns:repeat(2,1fr)}.ff-step-grid{grid-template-columns:1fr 1fr;gap:22px}.ff-step:not(:last-child):after{display:none}.ff-section{padding:52px 0}.ff-section-head{display:block}.ff-section h2{font-size:29px}.ff-text-link{display:inline-block;margin-top:12px}.ff-demand-grid,.ff-category-grid,.ff-supplier-grid,.ff-tools-grid,.ff-trust{grid-template-columns:1fr 1fr}.ff-rfq h2{font-size:35px}.ff-footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.ff-hero h1{font-size:36px}.ff-demand-grid,.ff-category-grid,.ff-supplier-grid,.ff-tools-grid,.ff-trust{grid-template-columns:1fr}.ff-form-grid{grid-template-columns:1fr}.ff-footer-grid{grid-template-columns:1fr}.ff-match{padding:14px}.ff-supplier-row{gap:7px}.ff-connect{padding:7px}.ff-step-grid{grid-template-columns:1fr}.ff-stat{padding:11px}.ff-stat b{font-size:16px}}
.ff-mobile-menu{padding:10px 18px 15px;border-top:1px solid var(--ff-line);background:#fff}.ff-mobile-menu a{display:block;padding:10px 0;font-size:12px;font-weight:750;color:var(--ff-text);text-decoration:none}.ff-mobile-menu.open{display:block}


/* ============================================================================
   V2 SUPPLEMENT - components the delivered package's CSS does not cover.
   Same design tokens, same ff-* namespace, plain CSS (no build step).
   Everything below backs functionality that already exists in the Django app
   and would otherwise have been dropped by the redesign.
   ============================================================================ */

/* ---------- Header: account menu (the package header has no Sign Out) ------ */
.ff-account{position:relative;display:flex;align-items:center}
.ff-avatar-btn{width:34px;height:34px;border-radius:50%;background:var(--ff-blue);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:12px;border:0;cursor:pointer;text-decoration:none}
.ff-menu{position:absolute;top:44px;right:0;width:242px;background:#fff;border:1px solid var(--ff-line);
  border-radius:12px;box-shadow:var(--ff-shadow);z-index:80;padding:7px}
.ff-menu a,.ff-menu button{display:block;width:100%;text-align:left;padding:9px 11px;font-size:12px;
  font-weight:700;color:#46566c;border:0;background:none;border-radius:8px;text-decoration:none;cursor:pointer}
.ff-menu a:hover,.ff-menu button:hover{background:var(--ff-soft);color:var(--ff-blue)}
.ff-menu a.danger{color:#c0392b;border-top:1px solid var(--ff-line);margin-top:5px;padding-top:10px}
.ff-menu a.danger:hover{background:#fdf1ef;color:#c0392b}
.ff-menu-head{padding:8px 11px 10px;border-bottom:1px solid var(--ff-line);margin-bottom:4px}
.ff-menu-head b{display:block;font-size:12px;color:var(--ff-navy)}
.ff-menu-head small{display:block;font-size:9px;color:var(--ff-muted);margin-top:3px}

/* ---------- Header: compact search + city picker (inner pages) -------------
   The mockup header has no search because the hero owns it. Inner pages still
   need one, so this appears everywhere except the homepage. */
.ff-hsearch{display:flex;align-items:center;height:40px;border:1px solid #dfe6ee;border-radius:10px;
  flex:1;max-width:520px;position:relative;background:#fff}
.ff-hloc{display:flex;align-items:center;gap:5px;height:100%;padding:0 11px;border:0;
  border-right:1px solid var(--ff-line);background:var(--ff-soft);font-size:11px;font-weight:700;
  color:#46566c;white-space:nowrap;cursor:pointer;border-radius:10px 0 0 10px}
.ff-hsearch input{border:0;outline:0;flex:1;min-width:0;padding:0 12px;font-size:12px;background:transparent}
.ff-hsearch>button[type=submit]{border:0;background:var(--ff-blue);color:#fff;height:100%;padding:0 15px;
  font-size:11px;font-weight:800;border-radius:0 10px 10px 0;cursor:pointer}
.ff-suggest{position:absolute;top:44px;left:0;right:0;background:#fff;border:1px solid var(--ff-line);
  border-radius:11px;box-shadow:var(--ff-shadow);overflow:hidden;z-index:85}
.ff-suggest button{display:block;width:100%;text-align:left;border:0;background:#fff;padding:10px 13px;
  font-size:12px;color:var(--ff-text);cursor:pointer}
.ff-suggest button:hover{background:var(--ff-soft)}
.ff-locmenu{position:absolute;top:46px;left:0;width:228px;max-height:330px;overflow-y:auto;background:#fff;
  border:1px solid var(--ff-line);border-radius:11px;box-shadow:var(--ff-shadow);z-index:85;padding:6px}
.ff-locmenu a,.ff-locmenu button{display:block;width:100%;text-align:left;padding:8px 11px;font-size:12px;
  border:0;background:none;border-radius:7px;color:#46566c;text-decoration:none;cursor:pointer}
.ff-locmenu a:hover,.ff-locmenu button:hover{background:var(--ff-soft)}
.hidden{display:none !important}

/* ---------- Messages ------------------------------------------------------ */
.ff-msg{padding:11px 14px;border-radius:10px;font-size:12px;font-weight:650;margin-bottom:8px;
  background:var(--ff-sky);color:#14498f;border:1px solid #d6e6ff}
.ff-msg.success{background:#e7f6ef;color:#0f7a52;border-color:#c6e9d9}
.ff-msg.error{background:#fdf1ef;color:#b8362a;border-color:#f6d5d0}

/* ---------- Verification / trust badges ----------------------------------- */
.ff-verify-badge{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:850;
  padding:4px 8px;border-radius:999px;background:#e7f6ef;color:#0f7a52;white-space:nowrap}
.ff-verify-badge.gst{background:var(--ff-sky);color:#14498f}
.ff-verify-badge.tier{background:#fef4e3;color:#a06908}
.ff-verify-badge.muted{background:#f1f4f8;color:#6b7a8d}

/* ---------- Match ring - BACKEND INTEGRATION POINT -------------------------
   Renders only when the view supplies an integer match_score (0-100).
   Nothing here invents a number; see docs/FRONTEND_AUDIT.md section 9. */
.ff-score{display:flex;flex-direction:column;align-items:center;gap:3px}
.ff-score-ring{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--ff-green) calc(var(--pct,0)*1%), #e8edf3 0)}
.ff-score-ring i{width:41px;height:41px;border-radius:50%;background:#fff;display:grid;place-items:center;
  font-style:normal;font-size:12px;font-weight:900;color:var(--ff-navy)}
.ff-score span{font-size:8px;font-weight:800;color:var(--ff-muted);letter-spacing:.4px}

/* ---------- Search results ------------------------------------------------ */
.ff-sr-layout{display:grid;grid-template-columns:262px 1fr;gap:18px;align-items:start}
.ff-filters{background:#fff;border:1px solid var(--ff-line);border-radius:14px;padding:17px;position:sticky;top:92px}
.ff-filters h3{margin:0 0 14px;font-size:13px;color:var(--ff-navy)}
.ff-filter-scroll{max-height:calc(100vh - 210px);overflow-y:auto;padding-right:2px}
.ff-cityrow{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--ff-line);
  border-radius:11px;padding:10px 14px;margin-bottom:14px;overflow-x:auto;white-space:nowrap}
.ff-cityrow b{font-size:10px;font-weight:850;color:var(--ff-muted);flex:none}
.ff-cityrow button{border:0;background:none;font-size:11px;font-weight:750;color:#55667b;cursor:pointer;
  flex:none;padding:0}
.ff-cityrow button:hover{color:var(--ff-blue)}
.ff-cityrow button.on{color:var(--ff-blue);text-decoration:underline}
.ff-sr-card{display:grid;grid-template-columns:96px 1fr 190px;gap:16px;align-items:center;
  background:#fff;border:1px solid var(--ff-line);border-radius:14px;padding:15px;transition:.2s}
.ff-sr-card:hover{border-color:#c9d9ef;box-shadow:var(--ff-shadow)}
.ff-sr-thumb{width:96px;height:96px;border-radius:11px;object-fit:cover;background:#f3f6f9;display:block}
.ff-sr-ph{width:96px;height:96px;border-radius:11px;background:var(--ff-sky);color:var(--ff-blue);
  display:grid;place-items:center;font-size:26px;font-weight:900}
.ff-sr-side{display:flex;flex-direction:column;gap:7px;align-items:stretch;text-align:right}
.ff-sr-price{font-size:18px;font-weight:900;color:var(--ff-navy)}
.ff-sr-price small{font-size:9px;color:#8490a0;font-weight:600}
.ff-btn-line{display:block;text-align:center;border:1px solid var(--ff-line);border-radius:9px;padding:8px;
  font-size:10px;font-weight:800;color:#46566c;text-decoration:none}
.ff-btn-line:hover{border-color:var(--ff-blue);color:var(--ff-blue)}
.ff-btn-go{display:block;text-align:center;background:var(--ff-blue);color:#fff;border-radius:9px;padding:9px;
  font-size:10px;font-weight:800;text-decoration:none}
.ff-btn-go:hover{background:var(--ff-blue2)}

/* ---------- Pagination (absent from the package; without it only page 1
              of every result set is reachable) ---------------------------- */
.ff-pager{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:26px}
.ff-pager a{border:1px solid var(--ff-line);border-radius:9px;padding:9px 14px;font-size:11px;font-weight:800;
  color:#46566c;text-decoration:none;background:#fff}
.ff-pager a:hover{border-color:var(--ff-blue);color:var(--ff-blue)}
.ff-pager span{font-size:11px;color:var(--ff-muted)}

/* ---------- Live requirement ticker --------------------------------------- */
.ff-ticker{border-top:1px solid var(--ff-line);border-bottom:1px solid var(--ff-line);background:#fbfcfe}
.ff-ticker-in{display:flex;overflow-x:auto;scrollbar-width:none}
.ff-ticker-in::-webkit-scrollbar{display:none}
.ff-tick{display:flex;align-items:center;gap:7px;padding:11px 18px;white-space:nowrap;font-size:10px;
  color:var(--ff-muted);border-right:1px solid var(--ff-line)}
.ff-tick b{color:var(--ff-navy);font-size:11px}
.ff-tick i{width:6px;height:6px;border-radius:50%;background:var(--ff-green);flex:none}

/* ---------- Advertisement slots (paid; keep the label + rel) -------------- */
.ff-ad{padding:24px 0 0}
.ff-ad small{display:block;font-size:9px;color:#9aa6b4;margin-bottom:5px}
.ff-ad img{max-width:100%;display:block;border-radius:13px;border:1px solid var(--ff-line)}

/* ---------- Supplier profile tabs ----------------------------------------- */
.ff-tabs{display:flex;gap:22px;border-bottom:1px solid var(--ff-line);overflow-x:auto;margin-bottom:22px}
.ff-tabs a{padding:13px 0;font-size:12px;font-weight:800;color:#66758a;text-decoration:none;
  border-bottom:2px solid transparent;white-space:nowrap}
.ff-tabs a:hover{color:var(--ff-blue)}
.ff-tabs a.on{color:var(--ff-blue);border-bottom-color:var(--ff-blue)}

/* ---------- Empty states (shown instead of inventing content) ------------- */
.ff-empty{border:1px dashed #d3dce6;border-radius:14px;padding:34px 22px;text-align:center;background:#fff}
.ff-empty h3{margin:0 0 7px;font-size:14px;color:var(--ff-navy)}
.ff-empty p{margin:0 0 12px;font-size:12px;color:var(--ff-muted)}

/* Mobile in-page search (header search is hidden under 1000px) */
.ff-mob-search{display:none;align-items:center;height:42px;border:1px solid #dfe6ee;border-radius:10px;
  margin:0 0 14px;background:#fff;overflow:hidden}
.ff-mob-search input{border:0;outline:0;flex:1;min-width:0;padding:0 13px;font-size:12px}
.ff-mob-search button{border:0;background:var(--ff-blue);color:#fff;height:100%;padding:0 16px;
  font-size:11px;font-weight:800}

/* ---------- Responsive ---------------------------------------------------- */
@media(max-width:1000px){
  .ff-hsearch{display:none}
  .ff-sr-layout{grid-template-columns:1fr}
  .ff-filters{position:static}
  .ff-filter-scroll{max-height:none}
  .ff-mob-search{display:flex}
}
@media(max-width:720px){
  .ff-sr-card{grid-template-columns:76px 1fr;gap:12px}
  .ff-sr-thumb,.ff-sr-ph{width:76px;height:76px}
  .ff-sr-side{grid-column:1/-1;text-align:left;flex-direction:row;flex-wrap:wrap;align-items:center}
  .ff-sr-side>*{flex:1;min-width:118px}
}
@media(max-width:480px){
  .ff-sr-card{padding:12px}
  .ff-pager a{padding:8px 11px}
  .ff-tabs{gap:15px}
}

/* Tap targets: the package's .ff-mobile-toggle gets squeezed by the flex row
   to ~30px wide, below the 44px minimum. */
.ff-mobile-toggle{flex:none;min-width:42px;min-height:42px;font-size:17px;color:#46566c;cursor:pointer}
.ff-nav-actions .ff-login,.ff-nav-actions .ff-post{min-height:40px;display:inline-flex;align-items:center}

/* Supplier profile header */
.ff-profile-head{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;
  background:#fff;border:1px solid var(--ff-line);border-radius:16px;padding:20px;margin-bottom:18px}
.ff-profile-logo{width:74px;height:74px;border-radius:15px;background:var(--ff-sky);color:var(--ff-blue);
  display:grid;place-items:center;font-size:26px;font-weight:900;flex:none;overflow:hidden}
.ff-profile-logo img{width:100%;height:100%;object-fit:contain}
.ff-profile-head h1{font-size:24px;margin:0 0 6px;color:var(--ff-navy);letter-spacing:-.8px}
.ff-profile-facts{display:flex;gap:26px;flex-wrap:wrap;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--ff-line);width:100%}
.ff-fact b{display:block;font-size:15px;color:var(--ff-navy)}
.ff-fact span{display:block;font-size:9px;color:var(--ff-muted);margin-top:2px}
.ff-profile-grid{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
.ff-panel{background:#fff;border:1px solid var(--ff-line);border-radius:14px;padding:18px;margin-bottom:16px}
.ff-panel h2{font-size:16px;margin:0 0 12px;color:var(--ff-navy)}
.ff-rail{position:sticky;top:92px}
.ff-kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:12px;
  border-bottom:1px solid var(--ff-line)}
.ff-kv:last-child{border-bottom:0}
.ff-kv span{color:var(--ff-muted)}
.ff-kv b{color:var(--ff-navy);text-align:right}

/* Requirement wizard progress */
.ff-steps-bar{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.ff-stepdot{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;color:var(--ff-muted)}
.ff-stepdot i{width:22px;height:22px;border-radius:50%;background:#e8edf3;color:#6b7a8d;display:grid;
  place-items:center;font-style:normal;font-size:10px;font-weight:900}
.ff-stepdot.on{color:var(--ff-navy)}
.ff-stepdot.on i{background:var(--ff-blue);color:#fff}
.ff-steps-bar hr{flex:1;min-width:18px;border:0;border-top:1px solid var(--ff-line);margin:0}

@media(max-width:900px){
  .ff-profile-grid{grid-template-columns:1fr}
  .ff-rail{position:static}
}