/* ZambiaSuppliers v5 — Made-in-China portal style */
/* Royal Blue #2563EB + Amber #D97706 + Dense portal layout */

:root {
  --c1:#2563EB;--c1h:#1D4ED8;--c1l:#EFF6FF;--c1x:#DBEAFE;
  --c2:#D97706;--c2h:#B45309;--c2l:#FFFBEB;
  --n9:#0F172A;--n8:#1E293B;--n7:#334155;--n6:#475569;--n5:#64748B;
  --n4:#94A3B8;--n3:#CBD5E1;--n2:#E2E8F0;--n1:#F1F5F9;--n0:#F8FAFC;
  --ok:#16A34A;--okl:#F0FDF4;--err:#DC2626;
  --ff:'Source Sans 3',system-ui,sans-serif;
  --fd:'Playfair Display',Georgia,serif;
  --r:4px;--rl:8px;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--ff);color:var(--n8);font-size:14px;line-height:1.5;background:var(--n0);-webkit-font-smoothing:antialiased}
a{color:var(--c1);text-decoration:none}a:hover{color:var(--c1h)}
img{max-width:100%;height:auto}
.input:focus,.textarea:focus,.select select:focus{border-color:var(--c1)!important;box-shadow:0 0 0 2px rgba(37,99,235,.1)!important}

/* === HEADER BAR (Made-in-China style: logo + search + auth in one bar) === */
.hd{background:#fff;border-bottom:1px solid var(--n2);padding:0;position:sticky;top:0;z-index:100;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.hd-inner{max-width:1200px;margin:0 auto;padding:0 16px;display:flex;align-items:center;height:56px;gap:16px}
.hd-logo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}
.hd-logo-mark{background:var(--c1);color:#fff;font-weight:800;font-size:13px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px}
.hd-logo-text{font-family:var(--fd);font-size:17px;font-weight:700;color:var(--n9)}.hd-logo-text b{color:var(--c1);font-weight:700}
.hd-search{flex:1;max-width:520px;display:flex;border:2px solid var(--c1);border-radius:var(--r);overflow:hidden;background:#fff}
.hd-search select{border:0;background:var(--n1);padding:6px 8px;font-size:12px;min-width:120px;font-family:var(--ff);outline:0;border-right:1px solid var(--n2);color:var(--n6)}
.hd-search input{border:0;flex:1;padding:6px 10px;font-size:13px;outline:0;font-family:var(--ff);min-width:0}
.hd-search input::placeholder{color:var(--n4)}
.hd-search button{background:var(--c1);color:#fff;border:0;padding:6px 16px;font-weight:600;font-size:12px;cursor:pointer;font-family:var(--ff);white-space:nowrap}
.hd-search button:hover{background:var(--c1h)}
.hd-nav{display:flex;align-items:center;gap:12px;flex-shrink:0;font-size:12px}
.hd-nav a{color:var(--n6);white-space:nowrap}.hd-nav a:hover{color:var(--c1)}
.hd-cta{background:var(--c2);color:#fff!important;padding:5px 12px;border-radius:var(--r);font-weight:700;font-size:11px}
.hd-cta:hover{background:var(--c2h);color:#fff!important}
.hd-burger{display:none;background:0;border:0;font-size:20px;cursor:pointer;color:var(--n6);padding:4px}

/* === CATEGORY TOPSTRIP (Made-in-China style nav below header) === */
.catstrip{background:var(--n9);overflow:hidden}
.catstrip-inner{max-width:1200px;margin:0 auto;padding:0 16px;display:flex;align-items:stretch;height:40px;gap:0}
.catstrip a{color:rgba(255,255,255,.75);font-size:12px;font-weight:500;padding:0 14px;display:flex;align-items:center;white-space:nowrap;transition:background .1s}
.catstrip a:hover{background:rgba(255,255,255,.08);color:#fff}
.catstrip .cs-all{background:var(--c1);color:#fff;font-weight:700;padding:0 16px;font-size:12px;letter-spacing:.02em}
.catstrip .cs-all:hover{background:var(--c1h)}

/* === HOMEPAGE LAYOUT (sidebar + main) === */
.hp{max-width:1200px;margin:0 auto;padding:16px;display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:start}

/* Sidebar categories */
.hp-side{background:#fff;border:1px solid var(--n2);border-radius:var(--rl);overflow:hidden}
.hp-side-title{background:var(--c1);color:#fff;padding:10px 14px;font-size:13px;font-weight:700}
.hp-side a{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:12.5px;color:var(--n7);border-bottom:1px solid var(--n1);transition:all .1s}
.hp-side a:hover{background:var(--c1l);color:var(--c1)}
.hp-side a svg{width:16px;height:16px;color:var(--c1);flex-shrink:0}
.hp-side a span{flex:1}
.hp-side a small{color:var(--n4);font-size:11px}

/* Main content area */
.hp-main{display:flex;flex-direction:column;gap:16px}

/* Hero banner */
.hp-banner{background:linear-gradient(135deg,var(--n9) 0%,#1B3A5C 100%);border-radius:var(--rl);padding:32px 28px;color:#fff;position:relative;overflow:hidden}
.hp-banner::after{content:'';position:absolute;top:0;right:0;bottom:0;width:40%;background:radial-gradient(ellipse at 70% 50%,rgba(37,99,235,.15) 0%,transparent 70%);pointer-events:none}
.hp-banner-badge{display:inline-block;background:rgba(217,119,6,.2);border:1px solid rgba(217,119,6,.3);color:var(--c2);font-size:10px;font-weight:700;padding:2px 8px;border-radius:2px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.hp-banner h1{font-family:var(--fd);font-size:clamp(20px,2.5vw,30px);font-weight:700;line-height:1.2;margin:0 0 8px;position:relative;z-index:1}
.hp-banner h1 em{font-style:normal;color:var(--c2)}
.hp-banner p{font-size:13px;color:rgba(255,255,255,.55);margin:0 0 16px;max-width:400px;line-height:1.6;position:relative;z-index:1}
.hp-banner-stats{display:flex;gap:24px;position:relative;z-index:1}
.hp-banner-stat strong{display:block;font-family:var(--fd);font-size:20px;font-weight:700;color:var(--c2)}
.hp-banner-stat span{font-size:10px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.06em}

/* Trust row */
.hp-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hp-trust-card{background:#fff;border:1px solid var(--n2);border-radius:var(--r);padding:10px 12px;display:flex;align-items:center;gap:8px;font-size:12px}
.hp-trust-card i{color:var(--c1);font-size:16px;flex-shrink:0}
.hp-trust-card strong{color:var(--n8);display:block;font-size:12px;line-height:1.2}
.hp-trust-card span{color:var(--n5);font-size:11px}

/* Section headers */
.hp-sh{display:flex;align-items:center;justify-content:space-between;padding:4px 0}
.hp-sh h2{font-size:15px;font-weight:700;color:var(--n9);margin:0}.hp-sh h2 em{font-style:normal;color:var(--c1)}
.hp-sh a{font-size:12px;color:var(--c1);font-weight:600}

/* Supplier cards grid */
.hp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.s-card{background:#fff;border:1px solid var(--n2);border-radius:var(--r);overflow:hidden;transition:all .15s;display:flex;flex-direction:column}
.s-card:hover{border-color:var(--c1);box-shadow:0 4px 12px rgba(0,0,0,.06);transform:translateY(-1px)}
.s-card-img{height:120px;background:var(--n1);display:flex;align-items:center;justify-content:center;overflow:hidden}
.s-card-img img{width:100%;height:100%;object-fit:cover}
.s-card-img svg{width:24px;height:24px;color:var(--n4)}
.s-card-body{padding:8px 10px;flex:1;display:flex;flex-direction:column}
.s-card-name{font-size:12.5px;font-weight:600;color:var(--n8);line-height:1.3;margin-bottom:2px}
.s-card-tag{font-size:11px;color:var(--n5);margin-bottom:4px}
.s-card-meta{font-size:10px;color:var(--n4);margin-top:auto;padding-top:4px;border-top:1px solid var(--n1);display:flex;justify-content:space-between}
.s-card .badge-v{background:var(--okl);color:var(--ok);font-size:9px;font-weight:700;padding:1px 5px;border-radius:2px;display:inline-block}

/* How it works */
.hp-how{background:#fff;border:1px solid var(--n2);border-radius:var(--rl);padding:20px;display:flex;align-items:flex-start;gap:20px}
.hp-how-num{width:28px;height:28px;background:var(--c1);color:#fff;border-radius:50%;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 6px}
.hp-how-line{width:40px;height:1px;background:var(--n2);margin-top:14px;flex-shrink:0}

/* CTA bar */
.hp-cta{background:var(--n9);border-radius:var(--rl);padding:24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.hp-cta h3{color:#fff;font-family:var(--fd);font-size:18px;font-weight:700;margin:0}
.hp-cta p{color:rgba(255,255,255,.5);font-size:12px;margin:2px 0 0}
.hp-cta-btns{display:flex;gap:8px;flex-shrink:0}
.btn-w{background:#fff;color:var(--c1);font-weight:700;padding:8px 18px;border-radius:var(--r);font-size:13px;border:0;cursor:pointer}
.btn-w:hover{background:var(--c1l);color:var(--c1h)}
.btn-o{background:transparent;color:#fff;font-weight:600;padding:8px 18px;border-radius:var(--r);font-size:13px;border:1px solid rgba(255,255,255,.3);cursor:pointer}
.btn-o:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}

/* Province tags */
.prov-tags{display:flex;flex-wrap:wrap;gap:6px}
.prov-tag{background:#fff;border:1px solid var(--n2);border-radius:14px;padding:4px 12px 4px 8px;font-size:12px;color:var(--n7);display:inline-flex;align-items:center;gap:4px;transition:all .1s}
.prov-tag:hover{border-color:var(--c1);color:var(--c1)}
.prov-tag svg{width:13px;height:13px;color:var(--c1)}
.prov-tag small{color:var(--n4);font-size:10px;font-weight:600}

/* === INNER PAGES === */
.pg{max-width:1200px;margin:0 auto;padding:20px 16px}
.pg-title{font-size:20px;font-weight:700;color:var(--n9);margin:0 0 4px}
.pg-sub{font-size:12px;color:var(--n5);margin:0 0 16px}

/* Boxes */
.bx{background:#fff;border:1px solid var(--n2);border-radius:var(--rl);padding:16px;margin-bottom:12px}
.bx-title{font-size:14px;font-weight:700;color:var(--n8);margin:0 0 10px}

/* Tables */
.tb{width:100%;border-collapse:collapse;font-size:13px}
.tb th{text-align:left;padding:8px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--n5);border-bottom:2px solid var(--n2);font-weight:600}
.tb td{padding:8px 10px;border-bottom:1px solid var(--n1);vertical-align:middle}
.tb a{color:var(--n8);font-weight:600}.tb a:hover{color:var(--c1)}

/* Tags / pills */
.pill{display:inline-block;padding:1px 6px;border-radius:10px;font-size:10px;font-weight:600}
.pill-ok{background:var(--okl);color:var(--ok)}.pill-warn{background:var(--c2l);color:var(--c2)}
.pill-info{background:var(--c1l);color:var(--c1)}.pill-err{background:#FEF2F2;color:var(--err)}
.pill-grey{background:var(--n1);color:var(--n5)}

/* Primary button */
.btn-p{background:var(--c1);color:#fff;font-weight:600;padding:8px 18px;border-radius:var(--r);font-size:13px;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font-family:var(--ff)}
.btn-p:hover{background:var(--c1h);color:#fff}
.btn-s{background:var(--n1);color:var(--n7);font-weight:500;padding:8px 18px;border-radius:var(--r);font-size:13px;border:1px solid var(--n2);cursor:pointer;font-family:var(--ff)}
.btn-s:hover{background:var(--n2)}

/* Forms */
.fm .field{margin-bottom:12px}
.fm .label{font-size:12px;font-weight:600;color:var(--n7);margin-bottom:4px}
.fm .help{font-size:11px;color:var(--n5)}.fm .help.is-danger{color:var(--err)}

/* Empty state */
.empty{text-align:center;padding:40px 16px}
.empty-icon{font-size:32px;margin-bottom:8px}
.empty h3{font-size:15px;font-weight:700;color:var(--n8);margin:0 0 4px}
.empty p{font-size:12px;color:var(--n5);margin:0 0 12px}

/* === SIDEBAR (dashboard) === */
.dash{max-width:1200px;margin:0 auto;padding:20px 16px;display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:start}
.dash-side{background:#fff;border:1px solid var(--n2);border-radius:var(--rl);overflow:hidden;position:sticky;top:72px}
.dash-side-title{padding:10px 14px;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--n5);font-weight:600}
.dash-side a{display:flex;align-items:center;gap:6px;padding:7px 14px;font-size:12.5px;color:var(--n6);transition:all .1s}
.dash-side a:hover{background:var(--c1l);color:var(--c1)}.dash-side a.act{background:var(--c1l);color:var(--c1);font-weight:600}
.dash-side a i{font-size:14px;width:18px;text-align:center}

/* === FOOTER === */
.ft{background:var(--n9);color:rgba(255,255,255,.5);padding:32px 0 0;margin-top:24px}
.ft-inner{max-width:1200px;margin:0 auto;padding:0 16px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:24px}
.ft h4{color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px}
.ft a{display:block;color:rgba(255,255,255,.4);font-size:12px;padding:2px 0}.ft a:hover{color:var(--c2)}
.ft-brand{font-family:var(--fd);font-size:16px;font-weight:700;color:#fff;margin-bottom:8px}.ft-brand b{color:var(--c1)}
.ft-desc{font-size:12px;color:rgba(255,255,255,.35);line-height:1.6;margin-bottom:12px}
.ft-stats{display:flex;gap:20px;font-size:11px}.ft-stats strong{color:#fff;display:block;font-size:14px}
.ft-stats span{color:rgba(255,255,255,.3)}
.ft-bottom{border-top:1px solid rgba(255,255,255,.06);padding:12px 0;margin-top:24px}
.ft-bottom-inner{max-width:1200px;margin:0 auto;padding:0 16px;display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.2)}

/* === NEWSLETTER === */
.nl{background:var(--n1);border-top:1px solid var(--n2);padding:24px 0}
.nl-inner{max-width:1200px;margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.nl h3{font-size:15px;font-weight:700;color:var(--n9);margin:0}.nl p{font-size:12px;color:var(--n5);margin:2px 0 0}
.nl-form{display:flex;gap:6px}
.nl-form input{padding:6px 10px;border:1px solid var(--n3);border-radius:var(--r);font-size:12px;width:240px;font-family:var(--ff)}
.nl-form button{background:var(--c1);color:#fff;border:0;padding:6px 14px;border-radius:var(--r);font-size:12px;font-weight:600;cursor:pointer}

/* Breadcrumb */
.bc{background:var(--n0);border-bottom:1px solid var(--n2);padding:6px 0;font-size:12px}
.bc-inner{max-width:1200px;margin:0 auto;padding:0 16px}.bc a{color:var(--n5)}.bc a:hover{color:var(--c1)}.bc span{color:var(--n4);margin:0 4px}

/* === RESPONSIVE === */
@media(max-width:900px){
  .hp{grid-template-columns:1fr}.hp-side{display:none}
  .hp-trust{grid-template-columns:repeat(2,1fr)}
  .dash{grid-template-columns:1fr}.dash-side{display:none}
  .ft-inner{grid-template-columns:1fr 1fr}
  .hp-cta{flex-direction:column;text-align:center}
}
@media(max-width:600px){
  .hd-search select{display:none}
  .hd-nav .hd-nav-text{display:none}
  .hd-burger{display:block}
  .hp-trust{grid-template-columns:1fr}
  .hp-grid{grid-template-columns:repeat(2,1fr)}
  .hp-how{flex-direction:column}.hp-how-line{width:1px;height:16px;margin:0 auto}
  .hp-banner h1{font-size:20px}
  .ft-inner{grid-template-columns:1fr}
  .nl-inner{flex-direction:column;text-align:center}
  .nl-form{width:100%}.nl-form input{flex:1;width:auto}
}

/* ═══ PRODUCT CARDS — Made-in-China style ═══ */
.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.p-card{background:#fff;border:1px solid var(--n2);border-radius:var(--r);overflow:hidden;transition:all .15s;display:flex;flex-direction:column}
.p-card:hover{border-color:var(--c1);box-shadow:0 4px 14px rgba(0,0,0,.07);transform:translateY(-1px)}
.p-card-img{height:150px;background:var(--n1);overflow:hidden;position:relative}
.p-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.p-card:hover .p-card-img img{transform:scale(1.03)}
.p-card-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.p-card-placeholder svg{width:32px;height:32px;color:var(--n4)}
.p-card-body{padding:8px 10px;flex:1;display:flex;flex-direction:column}
.p-card-name{font-size:13px;font-weight:600;color:var(--n8);line-height:1.3;margin-bottom:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p-card-desc{font-size:11px;color:var(--n5);margin-bottom:4px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.p-card-price{font-size:14px;font-weight:700;color:var(--c2);margin-bottom:4px}
.p-card-supplier{font-size:11px;color:var(--n5);margin-top:auto;padding-top:4px;border-top:1px solid var(--n1);display:flex;align-items:center;gap:3px}
.p-card-badge{background:var(--c1);color:#fff;font-size:8px;font-weight:700;width:14px;height:14px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.p-card-moq{font-size:10px;color:var(--n4);margin-top:2px}

/* Responsive product grid */
@media(max-width:600px){.p-grid{grid-template-columns:repeat(2,1fr);gap:6px}.p-card-img{height:120px}.p-card-name{font-size:12px}.p-card-price{font-size:13px}}

/* Buyer request highlight in catstrip */
.cs-buyer{background:rgba(217,119,6,.15)!important;color:var(--c2)!important;font-weight:700!important}
.cs-buyer:hover{background:rgba(217,119,6,.25)!important}

/* Buyer requests box on homepage */
.hp-buyer-box{background:#fff;border:2px solid rgba(217,119,6,.2);border-radius:var(--rl);padding:16px}

/* RFQ cards grid */
.rfq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.rfq-card{background:var(--n0);border:1px solid var(--n2);border-radius:var(--r);padding:10px 12px;display:block;color:var(--n8);transition:all .15s}
.rfq-card:hover{border-color:var(--c2);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.rfq-card-cat{font-size:10px;font-weight:600;color:var(--c1);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.rfq-card-title{font-size:13px;font-weight:600;color:var(--n8);line-height:1.3;margin-bottom:4px}
.rfq-card-meta{display:flex;gap:10px;font-size:11px;color:var(--n5)}

/* Tab bar */
.tab-bar{display:flex;border-bottom:2px solid var(--n2);margin-top:12px}
.tab-btn{background:0;border:0;border-bottom:2px solid transparent;margin-bottom:-2px;padding:8px 16px;font-size:13px;font-weight:500;color:var(--n5);cursor:pointer;font-family:var(--ff)}
.tab-btn:hover{color:var(--c1)}
.tab-btn.active{color:var(--c1);border-bottom-color:var(--c1);font-weight:600}

/* Contact reveal buttons */
.cta-reveal{background:#fff;border:1.5px solid var(--n2);color:var(--n7);font-weight:600;font-size:13px;padding:10px 16px;border-radius:var(--r);cursor:pointer;width:100%;display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:6px;transition:all .15s;font-family:var(--ff)}
.cta-reveal:hover{border-color:var(--c1);color:var(--c1);background:var(--c1l)}
#wa-wrap .cta-reveal:hover{border-color:#25D366;color:#25D366;background:#F0FFF4}

/* Mobile fixes for new components */
@media(max-width:768px){
  .rfq-grid{grid-template-columns:1fr}
  .tab-bar{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tab-btn{white-space:nowrap;font-size:12px;padding:6px 12px}
}

/* ═══ Hero banner gradient — dark left, clear right ═══ */
.hp-banner{position:relative;z-index:0}
.hp-banner::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:var(--rl);
  background:linear-gradient(to right,rgba(15,36,64,.92) 0%,rgba(15,36,64,.8) 40%,rgba(15,36,64,.35) 70%,rgba(15,36,64,.1) 100%)}
.hp-banner h1,.hp-banner p,.hp-banner-badge,.hp-banner-stats{position:relative;z-index:1}
.hp-banner h1{text-shadow:0 1px 3px rgba(0,0,0,.3)}
.hp-banner p{color:rgba(255,255,255,.8)!important;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.hp-banner-stat strong{text-shadow:0 1px 2px rgba(0,0,0,.2)}
.hp-banner-stat span{color:rgba(255,255,255,.6)!important}

/* ═══ Form styling inside .fm ═══ */
.fm input[type="text"],.fm input[type="email"],.fm input[type="url"],
.fm input[type="number"],.fm input[type="password"],.fm input[type="tel"],
.fm input[type="date"],.fm input[type="datetime-local"],
.fm select,.fm textarea{
  display:block;width:100%;padding:8px 10px;font-size:13px;font-family:var(--ff);
  border:1px solid var(--n3);border-radius:var(--r);color:var(--n8);background:#fff;
  transition:border-color .15s}
.fm input:focus,.fm select:focus,.fm textarea:focus{
  border-color:var(--c1);box-shadow:0 0 0 2px rgba(37,99,235,.1);outline:0}
.fm textarea{min-height:80px;resize:vertical}
.fm select{cursor:pointer;appearance:auto}
.fm input[type="file"]{padding:6px 0;border:0}
.fm input[type="checkbox"]{width:auto;display:inline}
.fm .field{margin-bottom:10px}
.fm .label{font-size:12px;font-weight:600;color:var(--n7);margin-bottom:3px}

/* ═══ Product image display fix ═══ */
.s-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.s-card-img svg{width:24px;height:24px;color:var(--n4);margin:auto}

/* ═══ Mobile responsive fixes ═══ */
@media(max-width:768px){
  /* Container padding */
  .pg,.hp{padding-left:12px!important;padding-right:12px!important}
  
  /* Header */
  .hd-inner{flex-wrap:wrap;height:auto;padding:8px 12px;gap:8px}
  .hd-search{order:3;width:100%;max-width:100%;flex:unset}
  .hd-nav{gap:8px;font-size:11px}
  .hd-cta{font-size:9px;padding:3px 8px}
  .hd-nav{transition:all .2s}
  
  /* Category strip scroll */
  .catstrip-inner{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .catstrip-inner::-webkit-scrollbar{display:none}
  .catstrip a{flex-shrink:0;font-size:11px;padding:0 10px}
  
  /* Homepage sidebar hidden */
  .hp{grid-template-columns:1fr;gap:12px}
  .hp-side{display:none}
  
  /* Hero banner */
  .hp-banner{padding:20px 16px;border-radius:6px}
  .hp-banner h1{font-size:20px}
  .hp-banner p{font-size:12px}
  .hp-banner-stats{gap:16px;flex-wrap:wrap}
  .hp-banner-stat strong{font-size:16px}
  .hp-banner-stat span{font-size:9px}
  
  /* Buyer request box */
  .hp-buyer-box{padding:12px}
  .hp-buyer-box>div:first-child{flex-direction:column;gap:6px}
  .rfq-grid{grid-template-columns:1fr}
  
  /* Trust cards */
  .hp-trust{grid-template-columns:1fr 1fr;gap:6px}
  .hp-trust-card{padding:8px;gap:6px}
  .hp-trust-card strong{font-size:11px}
  .hp-trust-card span{font-size:10px}
  .hp-trust-card i{font-size:14px}
  
  /* Supplier grid */
  .hp-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .s-card-img{height:100px}
  .s-card-name{font-size:12px}
  
  /* How it works */
  .hp-how{flex-direction:column;gap:0;padding:16px}
  .hp-how-line{display:none}
  .hp-how-step{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;text-align:left;padding:10px 0;border-bottom:1px solid var(--n2)}
  .hp-how-step:last-child{border-bottom:0}
  .hp-how-step .hp-how-num{margin:0}
  .hp-how-step h3{display:inline;font-size:13px;margin:0}
  .hp-how-step p{display:inline;margin:0 0 0 4px}
  
  /* Province tags */
  .prov-tags{gap:4px}
  .prov-tag{font-size:11px;padding:3px 8px 3px 6px}
  
  /* CTA */
  .hp-cta{flex-direction:column;text-align:center;padding:16px;border-radius:6px}
  .hp-cta h3{font-size:16px}
  .hp-cta-btns{justify-content:center}
  
  /* Dashboard sidebar hidden */
  .dash{grid-template-columns:1fr;gap:12px}
  .dash-side{display:none}
  
  /* Detail page grid stacks */
  .pg [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  
  /* Tables scroll */
  .bx{overflow-x:auto}
  .tb{min-width:500px}
  
  /* Tab bar scroll */
  .tab-bar{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tab-btn{white-space:nowrap;font-size:12px;padding:6px 12px}
  
  /* Footer */
  .ft-inner{grid-template-columns:1fr 1fr;gap:16px}
  
  /* Newsletter */
  .nl-inner{flex-direction:column;text-align:center;gap:12px}
  .nl-form{width:100%}
  .nl-form input{flex:1;width:auto}
  
  /* Pricing grid */
  .pg [style*="repeat(3"]{grid-template-columns:1fr!important}
  
  /* Burger nav */
  .hd-burger{display:block}
}

@media(max-width:480px){
  .hp-trust{grid-template-columns:1fr}
  .hp-grid{grid-template-columns:1fr}
  .ft-inner{grid-template-columns:1fr}
  .hp-banner-stats{gap:12px}
}

/* Mobile nav toggle */
@media(max-width:600px){
  .hd-nav{display:none;width:100%;order:4;flex-direction:column;gap:8px;padding:8px 0;border-top:1px solid var(--n2)}
  .hd-nav.show{display:flex}
  .hd-nav a,.hd-nav button,.hd-nav .hd-cta{display:block;text-align:left;padding:6px 0}
}
/* ═══ Fix horizontal overflow on mobile ═══ */
html,body{overflow-x:hidden;max-width:100vw}
*{max-width:100%}
.hd-search{min-width:0}
.hd-search input{min-width:0}
table{display:block;overflow-x:auto;max-width:100%}

/* ═══ Mobile header: Logo + List Business + Burger ═══ */
@media(max-width:600px){
  .hd-inner{display:grid;grid-template-columns:1fr auto auto;grid-template-rows:auto auto;gap:6px 8px;align-items:center;height:auto;padding:8px 12px}
  .hd-logo{grid-column:1;grid-row:1}
  .hd-cta{grid-column:2;grid-row:1;display:inline-flex!important;padding:6px 10px;font-size:10px;white-space:nowrap}
  .hd-burger{grid-column:3;grid-row:1;display:block}
  .hd-search{grid-column:1/-1;grid-row:2;width:100%;max-width:100%;order:unset}
  .hd-nav{grid-column:1/-1;grid-row:3;display:none;flex-direction:column;gap:8px;padding:8px 0;border-top:1px solid var(--n2)}
  .hd-nav.show{display:flex}
  .hd-nav .hd-cta{display:none!important}
  .hd-nav a,.hd-nav button{padding:6px 0;font-size:13px}
}
/* ═══ How-it-works mobile fix ═══ */
@media(max-width:768px){
  .hp-how{flex-direction:column;gap:0;padding:12px 16px}
  .hp-how-line{display:none}
  .hp-how-step{display:flex;align-items:flex-start;gap:10px;text-align:left;padding:10px 0;border-bottom:1px solid var(--n2);max-width:100%}
  .hp-how-step:last-child{border-bottom:0}
  .hp-how-step .hp-how-num{margin:0;flex-shrink:0}
  .hp-how-step h3{font-size:13px;margin:0 0 2px;white-space:nowrap}
  .hp-how-step p{font-size:12px;margin:0;white-space:normal;word-break:normal}
}

/* ═══ List Business button visible on mobile ═══ */
@media(max-width:600px){
  .hd-inner{display:flex;flex-wrap:wrap;align-items:center;height:auto;padding:8px 12px;gap:8px}
  .hd-logo{flex:1;min-width:0}
  .hd-cta-mobile{display:inline-flex!important;padding:5px 10px;font-size:10px;white-space:nowrap;order:2;background:var(--c2);color:#fff!important;border-radius:var(--r);font-weight:700}
  .hd-burger{order:3;display:block!important}
  .hd-search{order:4;width:100%;flex:unset}
  .hd-nav{order:5;display:none;width:100%;flex-direction:column;gap:8px;padding:8px 0;border-top:1px solid var(--n2)}
  .hd-nav.show{display:flex}
  .hd-nav .hd-cta{display:none}
}
/* How-it-works desktop centered */
.hp-how-step{text-align:center}
.hp-how-step h3{text-align:center}
.hp-how-step p{text-align:center}
/* Buyer Requests nav highlight */
.cs-buyer{background:rgba(217,119,6,.15)!important;color:#D97706!important;font-weight:600!important;border-radius:3px;padding:0 12px!important}
.cs-buyer i{font-size:12px}
.cs-buyer:hover{background:rgba(217,119,6,.3)!important;color:#fff!important}
/* ═══ MASTER MOBILE FIX — all pages ═══ */
@media(max-width:768px){
  /* Kill ALL horizontal overflow */
  html,body{overflow-x:hidden!important;max-width:100vw!important}
  *{max-width:100vw}
  
  /* Force ALL grid layouts to single column */
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  
  /* Exception: keep 2-col for small grids like stats */
  [style*="repeat(3,1fr)"]{grid-template-columns:repeat(3,1fr)!important}
  
  /* Unstick sticky sidebars */
  [style*="position:sticky"],[style*="position: sticky"]{position:static!important}
  
  /* Tables scroll inside their container */
  .bx,.dash>div{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tb{min-width:500px;white-space:nowrap;font-size:12px}
  
  /* Product image gallery — stack vertically */
  [style*="grid-template-columns:80px"],[style*="grid-template-columns: 80px"]{
    grid-template-columns:1fr!important;
  }
  [style*="grid-template-columns:80px"] > div:first-child,
  [style*="grid-template-columns: 80px"] > div:first-child{
    display:flex;flex-direction:row;gap:4px;overflow-x:auto;
  }
  
  /* Main image */
  #main-img{max-height:220px!important;width:100%!important}
  
  /* Homepage grid */
  .hp{grid-template-columns:1fr!important}
  .hp-side{display:none}
  .hp-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px}
  
  /* Dashboard grid */
  .dash{grid-template-columns:1fr!important}
  .dash-side{display:none}
  
  /* Search bar doesn't overflow */
  .hd-search{min-width:0;max-width:100%}
  .hd-search input{min-width:0}
  
  /* Supplier detail tabs */
  .tab-bar{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tab-btn{white-space:nowrap;flex-shrink:0}
  
  /* Price box */
  [style*="gap:24px"][style*="align-items:baseline"]{flex-direction:column!important;gap:8px!important}
  
  /* All page containers */
  .pg{padding:12px!important}
  
  /* Product cards on list pages */
  .s-card-img{height:100px}
  
  /* Category pills row */
  .is-hidden-desktop{display:flex!important}
}

@media(max-width:480px){
  .hp-grid{grid-template-columns:1fr!important}
  .hp-trust{grid-template-columns:1fr!important}
  [style*="repeat(3,1fr)"]{grid-template-columns:1fr!important}
}