/* IMB2B Portal — theme styles */

:root{
  --navy:#0e2a47;--navy-2:#153a61;--ink:#12181f;--body:#414b57;--muted:#77828f;
  --line:#dfe4ea;--line-soft:#eceff3;--bg:#f4f6f8;--white:#fff;
  --signal:#e2571f;--signal-dark:#c2440f;--blue:#1668c4;--gold:#f0b323;--ok:#1e7a4d;
  --shadow:0 1px 2px rgba(14,42,71,.06),0 6px 18px rgba(14,42,71,.06);
  --shadow-lift:0 10px 30px rgba(14,42,71,.13);
  --wrap:1240px;
  /* Floor for the hero row. The row grows past it if the category list
     needs more, and all three columns follow, so they always end level. */
  --hero-h:448px;
}
*{box-sizing:border-box}
/* One visible focus treatment everywhere, so keyboard users are never lost.
   :focus-visible keeps it off mouse clicks. */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.slider :focus-visible,.rfqbox :focus-visible,nav.primary :focus-visible{outline-color:#fff}
html,body{margin:0;padding:0}
body{font-family:"Helvetica Neue",Helvetica,-apple-system,"Segoe UI",Roboto,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  color:var(--body);background:var(--bg);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{color:var(--ink);margin:0;font-weight:700;letter-spacing:-.01em;line-height:1.2}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
p{margin:0 0 12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:860px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;left:12px;top:12px;z-index:999;background:#fff;padding:10px 16px;width:auto;height:auto;clip:auto}
.hp{position:absolute!important;left:-9999px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:2px;
  font:inherit;font-weight:700;cursor:pointer;padding:11px 20px;transition:.15s;text-align:center}
.btn-primary{background:var(--signal);color:#fff}
.btn-primary:hover{background:var(--signal-dark)}
.btn-ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--navy)}
.btn-sm{padding:7px 14px;font-size:13px}
.btn-lg{padding:14px 30px;font-size:16px}
.btn.block{width:100%;margin-bottom:8px}

/* utility bar */
.utility{background:var(--navy);color:#a9bdd2;font-size:12.5px}
.utility .wrap{display:flex;align-items:center;gap:20px;min-height:36px;flex-wrap:wrap}
.utility a:hover{color:#fff}
.utility .right{margin-left:auto;display:flex;gap:16px;align-items:center}
.utility .strong{color:#fff;font-weight:600}
.utility ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.lang{display:flex;gap:1px;background:rgba(255,255,255,.1);padding:2px;border-radius:2px}
.lang span,.lang a{padding:1px 8px;font-size:11.5px;border-radius:1px;cursor:pointer}
.lang .on{background:#fff;color:var(--navy);font-weight:700}

/* header */
header.main{background:var(--white);border-bottom:1px solid var(--line)}
header.main .wrap{display:flex;align-items:center;gap:32px;padding-top:18px;padding-bottom:18px}
.logo{font-size:30px;font-weight:800;letter-spacing:-.03em;display:inline-block}
.logo .im{color:var(--ink)}.logo .b1{color:var(--blue)}.logo .two{color:var(--gold)}.logo .b2{color:var(--signal)}
.logo small{display:block;font-size:10px;letter-spacing:.18em;color:var(--muted);font-weight:600;text-transform:uppercase;margin-top:-2px}
.hdr-cta{display:flex;gap:10px;align-items:center;flex-shrink:0}

.searchbar{flex:1;display:flex;border:2px solid var(--navy);border-radius:2px;background:#fff;max-width:640px}
.searchbar select{border:0;background:#f7f9fb;padding:0 14px;font:inherit;font-size:14px;color:var(--ink);border-right:1px solid var(--line);cursor:pointer;outline:none}
.searchbar input{flex:1;border:0;padding:12px 14px;font:inherit;outline:none;min-width:0}
.searchbar button{border:0;background:var(--navy);color:#fff;padding:0 26px;font:inherit;font-weight:700;cursor:pointer}
.searchbar button:hover{background:var(--navy-2)}

nav.primary{background:var(--navy)}
nav.primary ul{display:flex;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav.primary a{display:block;color:#dce6f0;padding:14px 20px;font-size:14.5px;font-weight:600;border-right:1px solid rgba(255,255,255,.07)}
nav.primary a:hover,nav.primary .current-menu-item>a{background:var(--signal);color:#fff}
nav.primary li:first-child a{padding-left:0}
nav.primary .sub-menu{display:none}

/* home hero */
/* All three columns stretch to one shared height so the row has a single,
   clean bottom edge. Banner artwork is absolutely positioned and
   object-fit:cover, so a taller row crops the photo rather than squashing it. */
.hero{display:grid;grid-template-columns:262px 1fr 288px;gap:20px;padding:20px 0;
  align-items:stretch;grid-auto-rows:minmax(var(--hero-h),auto)}
.hero>*{min-height:0}
/* The rail is measured out of the row (its contents are absolutely
   positioned), so only the category list and the banner decide how tall the
   row is — and all three columns then end on the same line. */
.hero .side{position:relative;overflow:hidden}
.hero .side-in{position:absolute;inset:0;display:flex;flex-direction:column;gap:16px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:#cfd7e0 transparent}
.hero .side-in::-webkit-scrollbar{width:6px}
.hero .side-in::-webkit-scrollbar-thumb{background:#cfd7e0;border-radius:3px}
.hero .side-in>*{flex:0 0 auto}
.hero .side-in>*:last-child{flex:1 1 auto}

/* No overflow clipping here: the sub-category flyout is absolutely
   positioned and has to escape the panel. */
.catpanel{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
  display:flex;flex-direction:column}
.catpanel h3{font-size:13px;letter-spacing:.13em;text-transform:uppercase;padding:14px 16px;border-bottom:2px solid var(--signal);color:var(--navy)}
.catpanel ul{list-style:none;margin:0;padding:0}
.catpanel li a{display:flex;align-items:center;gap:10px;padding:11px 14px 11px 16px;
  border-bottom:1px solid var(--line-soft);font-size:14.5px;color:var(--ink);
  transition:background .12s,color .12s,box-shadow .12s}
/* Count sits in a quiet pill so the eye reads name first, number second. */
.catpanel li a span{margin-left:auto;color:var(--muted);font-size:11.5px;font-weight:600;
  background:#f1f4f7;border-radius:9px;padding:1px 8px;line-height:16px;transition:.12s}
/* Chevron as a mask, not a text glyph — the CJK "›" rendered at a different
   size in every font. */
.catpanel>ul>li>a::after{content:"";width:14px;height:14px;flex:0 0 14px;background:#b8c2cd;transition:.12s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.3 5.3 8 6.6l5.4 5.4L8 17.4l1.3 1.3 6.7-6.7z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.3 5.3 8 6.6l5.4 5.4L8 17.4l1.3 1.3 6.7-6.7z'/%3E%3C/svg%3E") center/contain no-repeat}
/* Accent bar instead of a padding shift — the old hover nudged the text
   sideways, which reads as a glitch when you run down the list. */
.catpanel li a:hover{background:#fff7f3;color:var(--signal);box-shadow:inset 3px 0 0 var(--signal)}
.catpanel>ul>li>a:hover::after{background:var(--signal);transform:translateX(2px)}
.catpanel li a:hover span{background:#fdeae0;color:var(--signal-dark)}
.catpanel li:last-child a{border-bottom:0}
/* Pinned to the bottom, so the panel never trails off with dead white space
   when it stretches to match a taller neighbour. */
.catpanel .all{margin-top:auto;border-top:1px solid var(--line);padding:12px 16px;font-size:13.5px;
  font-weight:700;color:var(--navy);display:flex;align-items:center;gap:6px;background:#fbfcfd}
.catpanel .all:hover{color:var(--signal)}

.slider{position:relative;background:var(--navy);color:#fff;overflow:hidden;
  min-height:280px;height:100%;display:flex;align-items:center}
.slider .art{position:absolute;inset:0;background:
  radial-gradient(900px 420px at 78% 18%,rgba(226,87,31,.55),transparent 62%),
  radial-gradient(700px 500px at 12% 92%,rgba(22,104,196,.55),transparent 60%),
  repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 9px)}
.slider .inner{position:relative;padding:44px 40px;max-width:600px}
.slider .kicker{display:inline-block;background:rgba(255,255,255,.14);border-left:3px solid var(--gold);
  padding:5px 12px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:18px}
.slider h1{color:#fff;font-size:36px;line-height:1.1}
.slider p{color:#c6d7e8;margin:14px 0 26px;font-size:16px}

.side{display:flex;flex-direction:column;gap:16px}
.card{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.card .hd{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.card .hd h3,.widget-title{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.card .bd{padding:14px 16px}
.rfqbox{background:linear-gradient(180deg,#153a61,#0e2a47);color:#fff;padding:20px 18px}
.rfqbox h3{color:#fff;font-size:18px}
.rfqbox p{color:#b3c6da;font-size:13.5px;margin:8px 0 16px}
.rfqbox .btn{width:100%}
.trustlist{list-style:none;margin:0;padding:0;font-size:13.5px}
.trustlist li{display:flex;gap:9px;padding:7px 0;align-items:flex-start}
.trustlist li::before{content:"";width:16px;height:16px;flex:0 0 16px;margin-top:2px;background:var(--ok);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat}

/* sections */
section{padding:34px 0}
.sec-hd{display:flex;align-items:flex-end;gap:16px;margin-bottom:20px;border-bottom:1px solid var(--line);padding-bottom:12px;flex-wrap:wrap}
.sec-hd h2{font-size:23px;display:flex;align-items:center;gap:11px}
/* Short accent rule gives each section a consistent anchor point. */
.sec-hd h2::before{content:"";width:4px;height:20px;background:var(--signal);flex:0 0 4px;border-radius:1px}
.sec-hd .sub{color:var(--muted);font-size:14px}
.sec-hd .more{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--navy)}
.sec-hd .more:hover{color:var(--signal)}
.grid{display:grid;gap:16px}
.g5{grid-template-columns:repeat(5,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}

/* product card */
.pcard{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:.15s}
.pcard:hover{border-color:var(--navy);box-shadow:0 8px 24px rgba(14,42,71,.12);transform:translateY(-2px)}
.thumb{aspect-ratio:4/3;background:#eef1f5;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb-placeholder{width:56%;height:56%;opacity:.28;background:var(--navy);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm9-2a9 9 0 1 1-18 0 9 9 0 0 1 18 0zm-2 0a7 7 0 1 0-14 0 7 7 0 0 0 14 0z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm9-2a9 9 0 1 1-18 0 9 9 0 0 1 18 0zm-2 0a7 7 0 1 0-14 0 7 7 0 0 0 14 0z'/%3E%3C/svg%3E") center/contain no-repeat}
.pcard .body{padding:12px 13px;flex:1;display:flex;flex-direction:column;gap:6px}
.pcard h4{font-size:14.5px;line-height:1.35;font-weight:600}
.pcard h4 a:hover{color:var(--signal)}
.meta{font-size:12.5px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.meta a:hover{color:var(--signal)}
.meta .flag{width:15px;height:11px;background:linear-gradient(180deg,#e2571f 50%,#1668c4 50%);flex:0 0 15px}
.price{font-size:15px;font-weight:800;color:var(--signal);margin-top:auto}
.price small{font-weight:500;color:var(--muted);font-size:12px}
.pcard .foot{border-top:1px solid var(--line-soft);padding:9px 13px;display:flex;gap:6px;align-items:stretch}
.pcard .foot .btn{flex:1}
.chk{background:none;border:0;font:inherit;font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap;padding:4px 6px}
.chk:hover,.chk.on{color:var(--signal)}
/* The three footer controls used to be a solid button, a bordered icon and a
   bare text link — three shapes at three heights. One height and one border
   language makes them read as a single control group. */
.pcard .foot>*{min-height:32px}
.pcard .foot .chk{border:1.5px solid var(--line);background:#fff;color:var(--body);font-weight:600;
  font-size:12.5px;padding:0 11px;display:inline-flex;align-items:center;border-radius:2px}
.pcard .foot .chk:hover,.pcard .foot .chk.on{border-color:var(--signal);color:var(--signal);background:#fff6f2}

/* supplier card */
.scard{background:#fff;border:1px solid var(--line);padding:18px;display:flex;gap:14px}
.scard:hover{border-color:var(--navy)}
.slogo{width:64px;height:64px;flex:0 0 64px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;overflow:hidden}
.slogo img{width:100%;height:100%;object-fit:contain;background:#fff}
.scard h4{font-size:15.5px}
.scard p{font-size:13.5px;margin:8px 0 0}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tag{font-size:11.5px;background:#eef2f6;color:var(--navy);padding:3px 8px;font-weight:600}
.tag.gold{background:#fdf3dc;color:#7a5a00}
.tag.ok{background:#e6f3ec;color:var(--ok)}

/* trade show / post cards */
.showcard .kicker-date,.postcard .kicker-date,.kicker-date{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
.showcard h4,.postcard h4{font-size:16px;margin:6px 0}
.arrow-link{display:inline-block;margin-top:12px;font-size:13px;font-weight:700;color:var(--navy)}
.arrow-link:hover{color:var(--signal)}

/* listing */
.crumbs{font-size:13px;color:var(--muted);padding:14px 0}
.crumbs a:hover{color:var(--signal)}
.crumbs span{margin:0 5px;opacity:.5}
.layout{display:grid;grid-template-columns:250px 1fr;gap:22px;padding-bottom:40px}
.supplier-layout{grid-template-columns:1fr 300px}
.filter{background:#fff;border:1px solid var(--line)}
.filter .fh{padding:12px 15px;border-bottom:1px solid var(--line);font-weight:700;color:var(--navy);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.fgroup{border-bottom:1px solid var(--line-soft);padding:14px 15px}
.fgroup h5{margin:0 0 10px;font-size:13.5px;color:var(--ink);font-weight:700}
.termlist{list-style:none;margin:0;padding:0}
.termlist a{display:flex;align-items:center;font-size:13.5px;padding:4px 0}
.termlist a:hover{color:var(--signal)}
.termlist .n{margin-left:auto;color:var(--muted);font-size:12px}
.toolbar{background:#fff;border:1px solid var(--line);padding:10px 14px;display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.toolbar .cnt{font-size:13.5px;color:var(--muted)}
.toolbar .cnt b{color:var(--ink)}
.sorts{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.sorts a{font-size:13px;padding:6px 12px;border:1px solid var(--line);color:var(--body)}
.sorts a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.rowcard{background:#fff;border:1px solid var(--line);padding:16px;display:grid;grid-template-columns:150px 1fr 210px;gap:18px;margin-bottom:12px}
.rowcard:hover{border-color:var(--navy)}
.rowcard .thumb{aspect-ratio:1;width:150px}
.rowcard h4{font-size:17px}
.rowcard h4 a:hover{color:var(--signal)}
.spec{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13.5px;margin:10px 0 0}
.spec dt{color:var(--muted)}
.spec dd{margin:0;color:var(--ink)}
.rowcard .act{border-left:1px solid var(--line-soft);padding-left:18px;display:flex;flex-direction:column;gap:8px}
.pager{display:flex;gap:4px;justify-content:center;padding:24px 0;flex-wrap:wrap}
.pager .page-numbers{min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;font-size:14px;padding:0 12px}
.pager .page-numbers.current{background:var(--navy);color:#fff;border-color:var(--navy)}
.pager a.page-numbers:hover{border-color:var(--navy)}

/* notices */
.notice{padding:13px 16px;margin:14px 0;border-left:3px solid;font-size:14px;background:#fff}
.notice.ok{border-color:var(--ok);color:#155f3c;background:#f0f8f3}
.notice.err{border-color:var(--signal);color:#8f3410;background:#fef4f0}

/* product detail */
.pdp{display:grid;grid-template-columns:440px 1fr 280px;gap:26px;background:#fff;border:1px solid var(--line);padding:24px;margin-bottom:22px}
.gallery .main{aspect-ratio:1;background:#eef1f5;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gallery .main img{width:100%;height:100%;object-fit:cover}
.gallery .thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.gallery .thumbs button{width:64px;height:64px;background:#eef1f5;border:2px solid transparent;cursor:pointer;padding:0;overflow:hidden}
.gallery .thumbs button.on{border-color:var(--signal)}
.pdp h1{font-size:25px;line-height:1.25;margin-bottom:6px}
.pdp .sku{font-size:13px;color:var(--muted);margin-bottom:16px}
.pricebox{background:#fbfcfd;border:1px solid var(--line);border-left:3px solid var(--signal);padding:14px 16px;margin-bottom:16px}
.pricebox .p{font-size:26px;font-weight:800;color:var(--signal)}
.pricebox .p small{font-size:14px;font-weight:600;color:var(--muted)}
.pricebox .n{font-size:13px;color:var(--muted)}
.attrs{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:14px;border-top:1px solid var(--line-soft);padding-top:14px;margin:0}
.attrs dt{color:var(--muted)}
.attrs dd{margin:0;color:var(--ink);font-weight:600}
.pdp-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.suppbox{border:1px solid var(--line);align-self:start}
.suppbox .top{background:var(--navy);color:#fff;padding:14px 15px}
.suppbox .top h4,.suppbox .top a{color:#fff;font-size:15px}
.suppbox .top .lv{font-size:11.5px;color:var(--gold);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:3px}
.suppbox .bd{padding:14px 15px;font-size:13.5px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0 0 14px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;color:var(--ink)}
.tabs{background:#fff;border:1px solid var(--line);margin-bottom:22px}
.tabs .th{display:flex;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs .th a{padding:14px 24px;font-weight:700;font-size:14.5px;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap}
.tabs .th a.on{color:var(--navy);border-bottom-color:var(--signal)}
.tabs .tb{padding:24px}
.entry-content h2{font-size:20px;margin:22px 0 8px}
.entry-content h3{font-size:17px;margin:20px 0 6px}
.entry-content table{width:100%;border-collapse:collapse;font-size:14px;margin:12px 0}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:10px 14px;text-align:left}
.entry-content th{background:#f7f9fb;color:var(--ink);font-weight:600}
.entry-content ul,.entry-content ol{padding-left:20px}
.entry-content a{color:var(--blue);text-decoration:underline}

/* inquiry form */
.inqform{background:#fff;border:1px solid var(--line);padding:24px;margin-bottom:30px}
.inqform h2{font-size:20px;margin-bottom:6px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:5px}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);padding:11px 12px;font:inherit;font-size:14px;border-radius:2px;outline:none;background:#fff;color:var(--ink)}
.field input:focus,.field textarea:focus{border-color:var(--navy)}
.note{font-size:12.5px;color:var(--muted)}

/* supplier store */
.shopbanner{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.shopbanner .art{position:absolute;inset:0;background:radial-gradient(700px 400px at 85% 10%,rgba(226,87,31,.5),transparent 60%),repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 2px,transparent 2px 10px)}
.shopbanner .wrap{position:relative;display:flex;gap:22px;align-items:center;padding-top:34px;padding-bottom:34px;flex-wrap:wrap}
.shopbanner .lg{width:96px;height:96px;flex:0 0 96px;background:#fff;color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:26px;overflow:hidden}
.shopbanner h1{color:#fff;font-size:27px}
.shopbanner .zh{color:#b7cbe0;font-size:15px;margin-top:3px}
.shopbanner .banner-cta{margin-left:auto;display:flex;gap:10px}
.statbar{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);margin:20px 0}
.statbar div{padding:18px;border-right:1px solid var(--line-soft)}
.statbar div:last-child{border-right:0}
.statbar b{display:block;font-size:23px;color:var(--navy);font-weight:800}
.statbar span{font-size:12.5px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.show-kv{max-width:520px;margin-bottom:18px}

/* sidebar widgets */
.sidebar-widgets{margin-top:16px;display:flex;flex-direction:column;gap:16px}
.sidebar-widgets .widget{padding:0}
.sidebar-widgets .widget .bd{padding:14px 15px}
.sidebar-widgets .widget h2,.sidebar-widgets .widget h3,.sidebar-widgets .widget .wp-block-heading{
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin:0 0 10px}
.sidebar-widgets ul{list-style:none;margin:0;padding:0;font-size:13.5px}
.sidebar-widgets li{padding:4px 0}
.sidebar-widgets a:hover{color:var(--signal)}
.sidebar-widgets input[type=search],.sidebar-widgets input[type=text]{width:100%;border:1px solid var(--line);padding:9px 11px;font:inherit;font-size:14px}
.sidebar-widgets .wp-block-search__button,.sidebar-widgets input[type=submit],.sidebar-widgets button{
  background:var(--navy);color:#fff;border:0;padding:9px 16px;font:inherit;font-weight:700;cursor:pointer;margin-top:8px}

/* footer */
.site-footer{background:#0b1e33;color:#8fa5bb;margin-top:40px;font-size:13.5px}
.site-footer h1,.site-footer h2,.site-footer h3,.site-footer h4,.site-footer .wp-block-heading{color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px}
.site-footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding:44px 0 32px}
.site-footer h5{color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{padding:4px 0}
.site-footer a:hover{color:#fff}
.site-footer p{max-width:340px}
.footer-logo{display:inline-block;margin-bottom:12px}
.footer-logo .im{color:#fff}
.site-footer .bar{border-top:1px solid rgba(255,255,255,.09);padding:16px 0;display:flex;gap:18px;font-size:12.5px;flex-wrap:wrap}

.drawer{position:fixed;right:20px;bottom:20px;background:var(--signal);color:#fff;padding:13px 22px;font-weight:700;
  box-shadow:0 8px 28px rgba(226,87,31,.4);z-index:150;display:flex;gap:10px;align-items:center}
/* An empty basket has nothing to show, and the pill was covering content in
   the bottom-right corner of every page. */
.drawer.is-empty{display:none}
.drawer b{background:#fff;color:var(--signal);min-width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:12px;border-radius:11px}

@media(max-width:1100px){
  /* Stacked, so the fixed row height and the internal scrolling both go away. */
  .hero{grid-template-columns:1fr;grid-auto-rows:auto}
  /* Stacked: the rail is back in normal flow, side by side. */
  .hero .side{position:static;overflow:visible}
  .hero .side-in{position:static;flex-direction:row;overflow:visible}
  .hero .side-in>*,.hero .side-in>*:last-child{flex:1}
  .pdp{grid-template-columns:1fr}
  .g5{grid-template-columns:repeat(3,1fr)}
  .layout,.supplier-layout{grid-template-columns:1fr}
}
@media(max-width:760px){
  header.main .wrap{flex-wrap:wrap;gap:14px}
  .searchbar{order:3;flex-basis:100%;max-width:none}
  .g5,.g4,.g3,.g2{grid-template-columns:repeat(2,1fr)}
  .rowcard{grid-template-columns:1fr}
  .rowcard .thumb{width:100%;aspect-ratio:4/3}
  .rowcard .act{border-left:0;padding-left:0;border-top:1px solid var(--line-soft);padding-top:12px}
  .side{flex-direction:column}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  .statbar{grid-template-columns:1fr 1fr}
  .slider h1{font-size:27px}
  .frow{grid-template-columns:1fr}
  .drawer{right:12px;bottom:12px;padding:11px 16px;font-size:14px}
}
@media(max-width:480px){
  .g5,.g4,.g3,.g2{grid-template-columns:1fr}
}

/* ==========================================================================
   Managed banners & slider
   ========================================================================== */
.imb2b-banners{position:relative}
.imb2b-banners.is-stack{display:grid;gap:14px;margin-bottom:18px}
.banner-slide{position:relative;overflow:hidden;background:var(--navy)}
.imb2b-banners.is-slider .banner-slide{display:none}
.imb2b-banners.is-slider .banner-slide.on{display:block;animation:imb2b-fade .5s ease}
@keyframes imb2b-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.imb2b-banners.is-slider .banner-slide.on{animation:none}}
.banner-link{display:block;color:inherit}
.banner-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Hero slot fills whatever height the hero row settles on. */
.slider .imb2b-banners,.slider .banner-slide,.pos-home_hero .banner-link{height:100%}
.pos-home_hero{width:100%}
.pos-home_hero .banner-slide{min-height:280px}
.pos-home_hero.is-slider .banner-slide.on,.pos-home_hero .banner-link{display:flex;align-items:center}
.pos-home_hero .banner-img img{position:absolute;inset:0;height:100%}
/* A scrim under the copy so white text stays readable on a bright photo,
   without dimming the whole picture. */
.pos-home_hero .banner-slide::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(8,24,42,.88) 0%,rgba(8,24,42,.66) 38%,rgba(8,24,42,.28) 70%,rgba(8,24,42,.1) 100%)}
.banner-copy{position:relative;z-index:2;padding:38px 42px;max-width:640px;color:#fff;
  text-shadow:0 1px 14px rgba(6,18,32,.55)}
.pos-home_side .banner-copy,.pos-listing_side .banner-copy{padding:18px}
.banner-copy .kicker{display:inline-block;background:var(--signal);color:#fff;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;margin-bottom:12px;text-shadow:none}
.banner-copy h2{color:#fff;font-size:34px;line-height:1.15;margin:0 0 10px}
.banner-copy p{color:#dbe6f1;max-width:520px;margin:0 0 16px}
.pos-home_side .banner-copy h2,.pos-listing_side .banner-copy h2{font-size:19px}
.pos-listing_top{margin:0 0 20px}
/* Overlay the copy on the strip artwork instead of stacking it underneath,
   which made a 260px banner occupy 400px. */
.pos-listing_top .banner-slide{position:relative;aspect-ratio:1600/260;min-height:150px}
.pos-listing_top .banner-img{position:absolute;inset:0}
.pos-listing_top .banner-copy{display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;height:100%;padding:22px 34px;max-width:62%}
.pos-listing_top .banner-copy h2{font-size:24px;margin-bottom:12px}
.pos-listing_top .banner-copy p{margin-bottom:12px}
@media(max-width:760px){
  .pos-listing_top .banner-slide{aspect-ratio:auto;min-height:0}
  .pos-listing_top .banner-img{position:static}
  .pos-listing_top .banner-copy{max-width:100%;padding:18px}
  .pos-listing_top .banner-copy h2{font-size:18px}
}
/* A hero banner must fill the column, not float in the middle of it:
   .slider is a stretched grid item, so give the banner chain height:100%. */
.slider.has-banners{display:block;padding:0;background:var(--navy)}
.slider.has-banners .imb2b-banners,
.slider.has-banners .banner-slide.on,
.slider.has-banners .banner-link{height:100%}
.pos-home_hero .banner-slide{position:relative;min-height:340px;aspect-ratio:16/9}
.pos-home_hero .banner-img{position:absolute;inset:0}
.pos-home_hero .banner-copy{display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;height:100%;padding:44px 40px;max-width:62%}
/* Keep the copy clear of artwork sitting on the right of the image. */
.pos-home_hero .banner-copy h2{font-size:32px}
.pos-home_hero .banner-copy p{font-size:15px;margin-bottom:20px}
@media(max-width:1100px){.pos-home_hero .banner-copy{max-width:80%}}
@media(max-width:760px){.pos-home_hero .banner-copy{max-width:100%;padding:24px}
  .pos-home_hero .banner-copy h2{font-size:23px}}
.slider.has-image{background-size:cover;background-position:center}
.shopbanner.has-image{background-size:cover;background-position:center}
/* Dots sit in their own translucent tray so they stay legible over any
   photo, and each one carries a 22px hit area around a 8px pill. */
.slider-dots{position:absolute;left:42px;bottom:22px;display:flex;gap:2px;z-index:3;
  background:rgba(8,22,38,.42);border-radius:999px;padding:4px 6px;backdrop-filter:blur(3px)}
.slider-dots button{width:26px;height:22px;border:0;padding:0;cursor:pointer;background:none;
  display:flex;align-items:center;justify-content:center}
.slider-dots button::before{content:"";display:block;width:100%;height:4px;border-radius:2px;
  background:rgba(255,255,255,.5);transition:.18s}
.slider-dots button:hover::before{background:rgba(255,255,255,.8)}
.slider-dots button.on::before{background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.topbar-note{color:#cfe0f0}
.footer-logo-img img{max-width:180px;margin-bottom:12px}
.footer-contact{list-style:none;margin:0 0 12px;padding:0}
.footer-social{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.footer-social a{text-decoration:underline}
.e404-img img{margin:0 auto 18px}

/* ==========================================================================
   Supplier dashboard
   ========================================================================== */
.dashboard{padding-top:22px;padding-bottom:40px}
.dash-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px;flex-wrap:wrap}
.dash-hd h1{font-size:26px}
.dash-hd .sub{color:var(--muted);margin:6px 0 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dash-layout{display:grid;grid-template-columns:230px 1fr;gap:24px;align-items:start}
.dash-nav{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);position:sticky;top:16px}
.dash-nav ul{list-style:none;margin:0;padding:0}
.dash-nav a{display:block;padding:13px 18px;border-bottom:1px solid var(--line-soft);font-weight:600;color:var(--navy)}
.dash-nav a:hover{background:var(--bg)}
.dash-nav a.on{background:var(--navy);color:#fff}
.dash-quota{padding:16px 18px;font-size:12.5px;color:var(--muted)}
.dash-quota .lv{font-weight:700;color:var(--ink);margin-bottom:8px}
.dash-quota .bar{height:6px;background:var(--line-soft);margin-bottom:6px;overflow:hidden}
.dash-quota .bar span{display:block;height:100%;background:var(--signal)}
.dash-main{min-width:0}
.dash-form .card{margin-bottom:18px}
.dash-form .field{margin-bottom:16px}
.dash-form label{display:block;font-weight:600;color:var(--ink);font-size:13.5px;margin-bottom:6px}
.dash-form label.inline{display:inline-flex;gap:6px;align-items:center;font-weight:400;margin:6px 0}
.dash-form input[type=text],.dash-form input[type=email],.dash-form input[type=url],.dash-form input[type=file],
.dash-form textarea,.dash-form select{width:100%;border:1.5px solid var(--line);border-radius:2px;padding:10px 12px;
  font:inherit;background:#fff;outline:none}
.dash-form input:focus,.dash-form textarea:focus,.dash-form select:focus{border-color:var(--navy)}
.dash-form .hint{color:var(--muted);font-size:12.5px;margin:6px 0 0}
.dash-form .specgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.dash-actions{display:flex;gap:12px;align-items:center;margin:0 0 30px}
.img-now img{border:1px solid var(--line);margin-bottom:8px}
.gal-now{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.gal-item{display:block;font-size:12px;text-align:center;font-weight:400}
.gal-item img{border:1px solid var(--line);margin-bottom:4px}
.gal-item span{display:flex;gap:4px;align-items:center;justify-content:center;color:var(--muted)}
.dash-table{width:100%;border-collapse:collapse;font-size:14px;background:#fff}
.dash-table th{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding:12px 14px;border-bottom:1px solid var(--line)}
.dash-table td{padding:12px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.dash-table tr:last-child td{border-bottom:0}
.cell-product{display:flex;gap:10px;align-items:center}
.cell-product a{font-weight:600;color:var(--navy)}
.mini-thumb img,.mini-thumb .thumb-placeholder{width:44px;height:44px;object-fit:cover;display:block;background:var(--line-soft)}
.cell-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cell-actions form{margin:0}
.btn-link{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-decoration:underline;color:var(--muted)}
.btn-link.danger{color:#b32d2e}
.dash-gate{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;padding:20px 0 40px}
.dash-gate .login label{display:block;font-weight:600;margin-bottom:6px}
.dash-gate .login input[type=text],.dash-gate .login input[type=password]{width:100%;border:1.5px solid var(--line);
  padding:10px 12px;font:inherit;margin-bottom:12px}
.dash-gate .login .login-remember{margin-bottom:12px}
.dash-gate .login .button-primary{background:var(--signal);color:#fff;border:0;padding:12px 24px;font:inherit;
  font-weight:700;cursor:pointer}
.inbox{display:grid;gap:14px}
.inq .hd{display:flex;justify-content:space-between;gap:14px;align-items:baseline;flex-wrap:wrap}
.inq-body{white-space:normal;background:var(--bg);padding:14px;margin:12px 0}
.notice{padding:13px 16px;margin:0 0 18px;border-left:4px solid var(--ok);background:#eaf6f0;color:#14603b}
.notice.err{border-left-color:#b32d2e;background:#fdeeee;color:#8a2224}
.small{font-size:12.5px;color:var(--muted)}

@media(max-width:1000px){
  .dash-layout{grid-template-columns:1fr}
  .dash-nav{position:static}
  .dash-nav ul{display:flex;flex-wrap:wrap}
  .dash-nav a{border-bottom:0;border-right:1px solid var(--line-soft)}
  .dash-gate{grid-template-columns:1fr}
}
@media(max-width:760px){
  .banner-copy{padding:24px}
  .banner-copy h2{font-size:24px}
  .slider-dots{left:24px}
  .dash-form .specgrid{grid-template-columns:1fr}
  .dash-table thead{display:none}
  .dash-table,.dash-table tbody,.dash-table tr,.dash-table td{display:block;width:100%}
  .dash-table tr{border-bottom:1px solid var(--line);padding:8px 0}
  .dash-table td{border:0;padding:6px 14px}
  .dash-table td[data-label]::before{content:attr(data-label) " ";font-weight:700;color:var(--muted);
    font-size:11.5px;text-transform:uppercase;display:block}
}

/* Elementor / full-width pages */
.imb2b-fullwidth{max-width:none;margin:0;padding:0}
.imb2b-fullwidth>.elementor{width:100%}
body.imb2b-elementor .site-main{padding:0}

/* Buyer account centre & basket */
.fav{display:inline-flex;align-items:center;gap:5px;border:1.5px solid var(--line);background:#fff;color:var(--muted);
  border-radius:2px;padding:7px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.fav:hover{border-color:var(--signal);color:var(--signal)}
.fav .ico{display:inline-flex;width:14px;height:14px}
.fav .ico svg{width:14px;height:14px;fill:currentColor}
.fav.on{border-color:var(--signal);color:var(--signal);background:#fff6f2}
.pcard .foot .fav{padding:6px 10px}
.pcard .foot .fav .txt{display:none}
.dash-nav .n{float:right;background:var(--line-soft);color:var(--muted);border-radius:10px;
  padding:0 8px;font-size:11.5px;font-weight:700;line-height:20px}
.dash-nav a.on .n{background:rgba(255,255,255,.2);color:#fff}
.basket-intro{color:var(--muted);max-width:640px;margin-bottom:18px}
.basket-group .hd{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.basket-row{display:grid;grid-template-columns:56px 1fr 140px auto;gap:14px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line-soft)}
.basket-row:last-child{border-bottom:0}
.basket-info a{font-weight:600;color:var(--navy);display:block}
.basket-info .small{display:block}
.basket-qty input{width:100%;border:1.5px solid var(--line);padding:8px 10px;font:inherit}
.inq-products{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px}
.inq-products li{padding-left:14px;position:relative}
.inq-products li::before{content:"•";position:absolute;left:0;color:var(--muted)}
.inq details summary{cursor:pointer;color:var(--muted);font-size:13px}
@media(max-width:760px){
  .basket-row{grid-template-columns:48px 1fr;grid-template-areas:"t i" "q q" "r r";row-gap:8px}
  .basket-row .mini-thumb{grid-area:t}
  .basket-info{grid-area:i}
  .basket-qty{grid-area:q}
  .js-basket-remove{grid-area:r;justify-self:start}
}

/* Category panel flyout — children of each top-level category */
.catpanel li{position:relative}
.catpanel li.has-kids > a::after{content:"\203A";margin-left:8px;color:var(--muted);font-weight:700}
.catpanel li.has-kids:hover > a,
.catpanel li.has-kids:focus-within > a{background:#fff7f3;color:var(--signal)}
.subcats{position:absolute;left:100%;top:-1px;z-index:60;min-width:430px;padding:16px 18px;
  background:#fff;border:1px solid var(--line);box-shadow:0 12px 34px rgba(14,42,71,.16);
  opacity:0;visibility:hidden;transform:translateX(-6px);transition:.14s}
.catpanel li.has-kids:hover .subcats,
.catpanel li.has-kids:focus-within .subcats{opacity:1;visibility:visible;transform:none}
.subcats-hd{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line-soft)}
.subcats ul{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;list-style:none;margin:0;padding:0}
.subcats li a{display:flex;justify-content:space-between;gap:12px;padding:7px 8px;font-size:14px;
  color:var(--ink);border-bottom:0}
.subcats li a:hover{background:var(--bg);color:var(--signal);padding-left:8px}
.subcats li a span{color:var(--muted);font-size:12px}
.subcats-all{display:inline-block;margin-top:12px;font-size:13px;font-weight:700;color:var(--signal)}
@media(max-width:1100px){
  /* No hover on touch: nest the children inline instead of hiding them. */
  .subcats{position:static;opacity:1;visibility:visible;transform:none;min-width:0;
    border:0;box-shadow:none;padding:0 16px 12px;background:var(--bg)}
  .subcats-hd{display:none}
  .subcats ul{grid-template-columns:1fr 1fr}
  /* Children are already open below the parent, so a "go deeper" chevron
     would be pointing at nothing. */
  .catpanel>ul>li.has-kids>a::after{display:none}
  /* On a phone the banner is the thing to lead with. The category list is
     600px of browsing that nobody wants above the fold. */
  .hero .slider,.hero>.imb2b-banners{order:1}
  .hero .catpanel{order:3}
  .hero .side{order:2}
}
@media(max-width:480px){ .subcats ul{grid-template-columns:1fr} }

/* Custom logo sizing.
   The header is a flex row; an <img> with only max-width:100% has a
   min-content size of 0, so .brand collapsed to zero width whenever the
   row ran out of space. Pin the height and stop .brand shrinking. */
.brand{flex:0 0 auto}
.brand .custom-logo,
.brand > a > img,
.brand img{display:block;width:auto;height:54px;max-width:240px;object-fit:contain}
@media(max-width:1100px){ .brand img{height:46px;max-width:200px} }
@media(max-width:760px){ .brand img{height:40px;max-width:170px} }

/* ==========================================================================
   Site-wide category mega menu + subcategory tiles
   ========================================================================== */
.cats-menu{position:relative;flex:0 0 auto}
nav.primary .wrap{display:flex;align-items:stretch;gap:0}
.cats-toggle{display:flex;align-items:center;gap:10px;background:var(--signal);color:#fff;border:0;
  font:inherit;font-weight:700;font-size:15px;padding:0 22px;height:46px;cursor:pointer;white-space:nowrap}
.cats-toggle:hover{background:var(--signal-dark)}
.cats-toggle .bars{width:16px;height:2px;background:#fff;position:relative;display:block}
.cats-toggle .bars::before,.cats-toggle .bars::after{content:"";position:absolute;left:0;width:16px;height:2px;background:#fff}
.cats-toggle .bars::before{top:-5px}.cats-toggle .bars::after{top:5px}
.mega{position:absolute;left:0;top:100%;z-index:120;width:min(1100px,94vw);background:#fff;
  border:1px solid var(--line);border-top:3px solid var(--signal);box-shadow:0 18px 44px rgba(14,42,71,.18)}
.mega[hidden]{display:none}
.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 26px;padding:22px 26px}
.mega-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-weight:700;
  color:var(--navy);font-size:14.5px;padding:6px 0 8px;margin-bottom:6px;border-bottom:1px solid var(--line-soft)}
.mega-head:hover{color:var(--signal)}
.mega-head span{color:var(--muted);font-size:12px;font-weight:600}
.mega-col ul{list-style:none;margin:0 0 18px;padding:0}
.mega-col li a{display:block;padding:4px 0;font-size:13.5px;color:var(--body)}
.mega-col li a:hover{color:var(--signal);padding-left:4px}
.mega-foot{border-top:1px solid var(--line-soft);padding:12px 26px;background:var(--bg)}
.mega-foot a{font-weight:700;color:var(--signal);font-size:13.5px}
nav.primary .primary-menu{margin-left:8px}

.cat-tiles{margin:0 0 20px}
.cat-tiles-hd{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.cat-tiles ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.cat-tiles li a{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:#fff;border:1px solid var(--line);padding:11px 14px;font-size:14px;font-weight:600;
  color:var(--navy);transition:.14s}
.cat-tiles li a:hover{border-color:var(--signal);color:var(--signal);box-shadow:var(--shadow)}
.cat-tiles .c{color:var(--muted);font-size:12px;font-weight:600}

@media(max-width:1100px){ .mega-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:760px){
  nav.primary .wrap{flex-wrap:wrap}
  .cats-toggle{width:100%;justify-content:center}
  .mega{position:static;width:auto;box-shadow:none;border-left:0;border-right:0}
  .mega-grid{grid-template-columns:1fr;padding:14px 18px}
  .cat-tiles ul{grid-template-columns:1fr 1fr}
}

/* The primary nav sets `nav.primary ul{display:flex}` and a pale link colour
   for the menu bar itself; the mega panel lives inside that nav and must opt
   out of both, or its links stack horizontally in near-invisible blue. */
nav.primary .mega ul{display:block;flex-wrap:nowrap}
nav.primary .mega li{border:0}
nav.primary .mega a{display:block;color:var(--body);padding:4px 0;border-right:0;
  font-size:13.5px;font-weight:400;background:none}
nav.primary .mega a:hover{background:none;color:var(--signal);padding-left:4px}
nav.primary .mega .mega-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;color:var(--navy);font-weight:700;font-size:14.5px;padding:6px 0 8px;
  border-bottom:1px solid var(--line-soft);margin-bottom:6px}
nav.primary .mega .mega-head:hover{color:var(--signal);padding-left:0}
nav.primary .mega .mega-head span{color:var(--muted);font-size:12px;font-weight:600}
nav.primary .mega .mega-foot a{display:inline-block;color:var(--signal);font-weight:700;
  font-size:13.5px;padding:0}
nav.primary .mega .mega-foot a:hover{padding-left:0}

/* ==========================================================================
   Sourcing request (RFQ) form
   ========================================================================== */
.rfq{max-width:820px}
.rfq-step{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:26px 28px;margin:0 0 18px}
.rfq-step-hd{display:flex;gap:14px;align-items:flex-start;margin:0 0 22px;
  padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.rfq-step-hd .num{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.rfq-step-hd h3{font-size:19px;margin:2px 0 4px}
.rfq-step-hd p{color:var(--muted);font-size:13.5px;margin:0}
.rfq .field{margin:0 0 18px}
.rfq label{display:block;font-weight:600;color:var(--ink);font-size:14px;margin:0 0 6px}
.rfq label b{color:var(--signal)}
.rfq input[type=text],.rfq input[type=email],.rfq input[type=date],.rfq input[type=file],
.rfq textarea,.rfq select{width:100%;border:1.5px solid var(--line);border-radius:2px;
  padding:11px 13px;font:inherit;background:#fff;outline:none;transition:.12s}
.rfq input:focus,.rfq textarea:focus,.rfq select:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(22,104,196,.12)}
.rfq textarea{line-height:1.6}
.rfq .hint{color:var(--muted);font-size:12.5px;margin:6px 0 0}
.rfq .frow{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.rfq .combo{display:flex;gap:0}
.rfq .combo select{width:auto;flex:0 0 auto;border-radius:0;background:var(--bg)}
.rfq .combo input{border-radius:0}
.rfq .combo > :first-child{border-top-left-radius:2px;border-bottom-left-radius:2px}
.rfq .combo > :last-child{border-top-right-radius:2px;border-bottom-right-radius:2px;margin-left:-1.5px}
.rfq-submit{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:4px 0 30px}
.rfq-trust{list-style:none;margin:0;padding:0;display:flex;gap:18px;flex-wrap:wrap;
  color:var(--muted);font-size:13px}
.rfq-trust li{position:relative;padding-left:18px}
.rfq-trust li::before{content:"\2713";position:absolute;left:0;color:var(--ok);font-weight:700}
.rfq-done{background:#fff;border:1px solid var(--line);border-top:3px solid var(--ok);
  box-shadow:var(--shadow);padding:38px 34px;text-align:center;max-width:640px}
.rfq-done .tick{width:56px;height:56px;border-radius:50%;background:#eaf6f0;color:var(--ok);
  display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 18px}
.rfq-done h2{font-size:23px;margin:0 0 10px}
.rfq-done p{color:var(--body);max-width:460px;margin:0 auto 18px}
.rfq-next{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media(max-width:760px){
  .rfq-step{padding:20px 18px}
  .rfq .frow{grid-template-columns:1fr}
  .rfq .combo{flex-wrap:wrap}
  .rfq .combo select,.rfq .combo input{width:100%;margin-left:0}
}