/* ===========================================================
   Coreflow — trade catalogue theme
   Buyers come here to check stock, price and lead time. The
   page is a catalogue, not a campaign: density and accuracy
   carry the credibility, decoration is kept out.
   =========================================================== */

/* ===========================================================
   COREFLOW — trade catalogue
   Premise: buyers come here to check stock, price and lead
   time. The page is a catalogue, not a campaign. Density and
   accuracy carry the credibility; decoration is kept out.
   =========================================================== */

:root{
  --paper:#FFFFFF;
  --bg:#F5F7F8;
  --panel:#FAFBFB;

  --ink:#13171B;
  --ink-2:#48525B;
  --ink-3:#6E7881;

  --rule:#DFE4E8;
  --rule-2:#EDF0F2;

  --navy:#0E2A42;
  --navy-2:#16405F;
  --link:#11558E;

  --stock:#136C38;
  --low:#94620A;
  --out:#A8262D;
  --tint:#EEF3F7;

  --f:'Public Sans', system-ui, -apple-system, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, monospace;

  --max:1360px;
  --gut:20px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
table{ border-collapse:collapse; width:100%; }

:focus-visible{ outline:2px solid var(--link); outline-offset:2px; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }

h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-0.015em; line-height:1.2; }
h2{ font-size:20px; }
h3{ font-size:16px; }

.mono{ font-family:var(--f-mono); font-variant-ligatures:none; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 18px;
  border-radius:3px;
  font-size:14px; font-weight:600;
  border:1px solid transparent;
  white-space:nowrap;
  transition:background-color .15s, border-color .15s, color .15s;
}
.btn--primary{ background:var(--navy); color:#fff; }
.btn--primary:hover{ background:var(--navy-2); }
.btn--outline{ border-color:var(--rule); background:var(--paper); color:var(--ink); }
.btn--outline:hover{ border-color:#B9C2CA; background:var(--panel); }
.btn--sm{ height:32px; padding:0 12px; font-size:13px; }
.btn--block{ width:100%; }

/* ===========================================================
   1. UTILITY STRIP
   =========================================================== */
.util{ background:var(--navy); color:#C4D2DE; font-size:12.5px; }
.util__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:34px; }
.util__l,.util__r{ display:flex; align-items:center; gap:18px; }
.util a:hover{ color:#fff; text-decoration:underline; }
.util strong{ color:#fff; font-weight:600; }
.util select{
  background:transparent; border:0; color:#C4D2DE; font-size:12.5px;
  cursor:pointer; padding:2px 0;
}
.util select option{ color:#13171B; }

/* ===========================================================
   2. MASTHEAD  (search is the primary action)
   =========================================================== */
.mast{ border-bottom:1px solid var(--rule); background:var(--paper); }
.mast__in{ display:flex; align-items:center; gap:28px; height:72px; }

.brand{ display:flex; align-items:center; gap:10px; flex:none; }
.brand__mark{ width:30px; height:30px; flex:none; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.05; }
.brand__name{ font-size:19px; font-weight:700; letter-spacing:.005em; }
.brand__sub{ font-size:10px; font-weight:500; letter-spacing:.09em; color:var(--ink-3); text-transform:uppercase; margin-top:2px; }

/* No overflow:hidden here. It was clipping the suggestions dropdown, which is
   absolutely positioned below the form — the panel rendered correctly in the
   DOM and was invisible on screen, which made the search look dead. The inner
   controls get their own corner radii instead, which is what overflow:hidden
   was really doing. */
form.search{ flex:1; max-width:660px; display:flex; height:42px; border:1px solid #C6CED5; border-radius:3px; background:var(--paper); }
form.search > *:first-child{ border-top-left-radius:2px; border-bottom-left-radius:2px; }
form.search > button[type=submit]{ border-top-right-radius:2px; border-bottom-right-radius:2px; }
form.search:focus-within{ border-color:var(--link); box-shadow:0 0 0 3px rgba(17,85,142,.12); }
form.search > select{
  border:0; border-right:1px solid var(--rule-2); background:var(--panel);
  padding:0 10px; font-size:13.5px; color:var(--ink-2); cursor:pointer; flex:none;
}
form.search > input{ flex:1; min-width:0; border:0; padding:0 12px; font-size:14.5px; background:transparent; }
form.search > input:focus{ outline:0; }
form.search > input::placeholder{ color:var(--ink-3); }
form.search > button{
  flex:none; width:52px; display:grid; place-items:center;
  background:var(--navy); color:#fff;
}
form.search > button:hover{ background:var(--navy-2); }

.mast__r{ display:flex; align-items:center; gap:22px; margin-left:auto; flex:none; }
.callout{ text-align:right; line-height:1.25; }
.callout b{ display:block; font-size:15px; font-weight:700; }
.callout span{ font-size:11.5px; color:var(--ink-3); }
.acct{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; }
.acct:hover{ color:var(--link); }

.burger{ display:none; width:40px; height:40px; place-items:center; border:1px solid var(--rule); border-radius:3px; flex:none; }
.burger span{ display:block; width:16px; height:1.5px; background:var(--ink); }
.burger span+span{ margin-top:4px; }

/* ===========================================================
   3. CATEGORY BAR + MEGA MENU
   =========================================================== */
.catbar{ border-bottom:1px solid var(--rule); background:var(--paper); position:relative; z-index:40; }
.catbar__in{ display:flex; align-items:stretch; gap:0; }
.catbar__l{ display:flex; align-items:stretch; }
.catbar__r{ display:flex; align-items:center; gap:20px; margin-left:auto; font-size:13px; color:var(--ink-2); }
.catbar__r a:hover{ color:var(--link); }

.cb{
  display:inline-flex; align-items:center; gap:6px;
  height:44px; padding:0 14px;
  font-size:14px; font-weight:500;
  border-bottom:2px solid transparent;
  color:var(--ink);
}
.cb:first-child{ padding-left:0; }
.cb:hover, .cbwrap.open .cb{ color:var(--link); border-bottom-color:var(--link); }
.cb svg{ opacity:.5; }

.cbwrap{ position:relative; display:flex; }

.mega{
  position:absolute; top:100%; left:0;
  width:min(920px, calc(100vw - 40px));
  background:var(--paper);
  border:1px solid var(--rule);
  border-top:0;
  box-shadow:0 14px 28px -14px rgba(19,23,27,.22);
  padding:22px 24px 20px;
  display:none;
  border-radius:0 0 3px 3px;
}
.cbwrap.open .mega{ display:block; }
.mega__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px 28px; }
.mega__col h4{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); margin-bottom:9px; }
.mega__col a{ display:flex; justify-content:space-between; gap:10px; padding:4px 0; font-size:13.5px; color:var(--ink-2); }
.mega__col a:hover{ color:var(--link); }
.mega__col a i{ font-style:normal; font-size:12px; color:var(--ink-3); font-family:var(--f-mono); }
.mega__foot{
  margin-top:20px; padding-top:14px; border-top:1px solid var(--rule-2);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-size:13px; color:var(--ink-3); flex-wrap:wrap;
}
.mega__foot a{ color:var(--link); font-weight:600; }

/* mobile nav */
.mnav{ display:none; border-bottom:1px solid var(--rule); background:var(--paper); }
.mnav.open{ display:block; }
.mnav a{ display:block; padding:12px 0; border-bottom:1px solid var(--rule-2); font-size:15px; font-weight:500; }
.mnav a:last-child{ border-bottom:0; }

/* ===========================================================
   4. POSITION BAND — who we are, stated plainly
   =========================================================== */
.band{ background:var(--bg); border-bottom:1px solid var(--rule); }
.band__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:48px; padding:26px 0; align-items:center; }
.band h1{ font-size:21px; font-weight:600; letter-spacing:-.01em; line-height:1.45; max-width:62ch; }
.band h1 b{ font-weight:700; }
.band p{ margin:8px 0 0; font-size:14px; color:var(--ink-2); max-width:70ch; }

.facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:3px; }
.facts div{ background:var(--paper); padding:11px 14px; }
.facts b{ display:block; font-size:16px; font-weight:700; }
.facts span{ font-size:11.5px; color:var(--ink-3); }

/* ===========================================================
   5. LINE CARD
   =========================================================== */
.lines{ border-bottom:1px solid var(--rule); }
.lines__in{ display:flex; align-items:stretch; overflow-x:auto; scrollbar-width:none; }
.lines__in::-webkit-scrollbar{ display:none; }
.line{
  flex:1; min-width:170px;
  padding:16px 18px;
  border-right:1px solid var(--rule-2);
}
.line:last-child{ border-right:0; }
.line:hover{ background:var(--panel); }
.line b{ display:block; font-size:16px; font-weight:700; letter-spacing:-.01em; }
.line em{
  font-style:normal; display:inline-block; margin-top:6px;
  font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--navy); background:var(--tint); padding:2px 6px; border-radius:2px;
}
.line em.s{ color:var(--ink-3); background:var(--rule-2); }
.line span{ display:block; margin-top:7px; font-size:12.5px; color:var(--ink-3); }

/* ===========================================================
   5b. SALES CHANNELS
   Core Flow sells on marketplaces as well as here, and a brand
   assessing the business looks at the storefronts first. Built
   from the same rule-and-panel parts as the brand band so it
   reads as catalogue furniture, not a marketing strip.
   =========================================================== */
.chan__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
  border-radius:3px;
  overflow:hidden;
}
.chanx{
  display:block;
  background:var(--paper);
  padding:16px 16px 14px;
  min-width:0;
}
a.chanx:hover{ background:var(--tint); }
.chanx b{
  display:block;
  font-size:17px;
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--navy);
}
.chanx span{
  display:block;
  margin-top:3px;
  font-size:12px;
  color:var(--ink-3);
}
.chanx em{
  display:block;
  margin-top:9px;
  font-style:normal;
  font-size:12px;
  font-weight:600;
  color:var(--link);
}
.chanx--own b{ color:var(--ink); }

@media (max-width:860px){
  .chan__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:420px){
  .chan__grid{ grid-template-columns:minmax(0,1fr); }
}
/* ===========================================================
   6. SECTION SHELL
   =========================================================== */
.sec{ padding:32px 0; border-bottom:1px solid var(--rule); }
.sec__hd{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:16px; flex-wrap:wrap; }
.sec__hd p{ margin:4px 0 0; font-size:13.5px; color:var(--ink-3); }
.seemore{ font-size:13.5px; font-weight:600; color:var(--link); }
.seemore:hover{ text-decoration:underline; }

/* ---------- category tiles ---------- */
.tiles{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.tile{
  border:1px solid var(--rule); border-radius:3px; background:var(--paper);
  padding:14px 12px 12px; text-align:center;
  transition:border-color .15s, box-shadow .15s;
}
.tile:hover{ border-color:#B9C2CA; box-shadow:0 2px 6px rgba(19,23,27,.06); }
.tile svg{ width:100%; height:64px; margin-bottom:10px; }
.tile .st{ fill:none; stroke:#8C959D; stroke-width:1.1; vector-effect:non-scaling-stroke; }
.tile .sf{ fill:#C9D0D6; }
.tile b{ display:block; font-size:13.5px; font-weight:600; }
.tile span{ display:block; font-size:11.5px; color:var(--ink-3); margin-top:2px; }

/* ===========================================================
   7. STOCK TABLE — the centrepiece
   =========================================================== */
.tabs{ display:flex; gap:0; border-bottom:1px solid var(--rule); margin-bottom:0; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  padding:9px 14px; font-size:13.5px; font-weight:600; color:var(--ink-3);
  border-bottom:2px solid transparent; white-space:nowrap;
}
.tab:first-child{ padding-left:0; }
.tab.on{ color:var(--ink); border-bottom-color:var(--navy); }
.tab:hover{ color:var(--ink); }

.tblwrap{ overflow-x:auto; border:1px solid var(--rule); border-top:0; border-radius:0 0 3px 3px; }
.tbl{ min-width:840px; font-size:13.5px; }
.tbl thead th{
  text-align:left; font-size:11px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-3);
  padding:9px 12px; background:var(--panel);
  border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
.tbl td{ padding:9px 12px; border-bottom:1px solid var(--rule-2); vertical-align:middle; }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl tbody tr:hover{ background:#F8FAFB; }
.tbl .pn{ font-family:var(--f-mono); font-size:12.5px; color:var(--link); white-space:nowrap; }
.tbl .nm{ font-weight:500; }
.tbl .br{ color:var(--ink-2); white-space:nowrap; }
.tbl .num{ text-align:right; white-space:nowrap; }
.tbl .pr{ text-align:right; font-weight:700; white-space:nowrap; }
.tbl .act{ text-align:right; white-space:nowrap; }

.sig{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:13px; }
.sig::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--stock); flex:none; }
.sig.low::before{ background:var(--low); }
.sig.out::before{ background:var(--out); }
.sig.low{ color:var(--low); }
.sig.out{ color:var(--out); }

.tblfoot{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:10px 12px; font-size:12.5px; color:var(--ink-3);
  border:1px solid var(--rule); border-top:0; background:var(--panel);
  border-radius:0 0 3px 3px; flex-wrap:wrap;
}
.tblwrap{ border-radius:0; }

/* ===========================================================
   8. PRODUCT GRID
   =========================================================== */
.pg{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.pc{
  border:1px solid var(--rule); border-radius:3px; background:var(--paper);
  display:flex; flex-direction:column;
  transition:border-color .15s, box-shadow .15s;
}
.pc:hover{ border-color:#B9C2CA; box-shadow:0 2px 8px rgba(19,23,27,.07); }
.pc__img{ position:relative; aspect-ratio:1/1; display:grid; place-items:center; padding:14px; border-bottom:1px solid var(--rule-2); }
.pc__img svg{ width:82%; height:auto; }
.pc__img .st{ fill:none; stroke:#8C959D; stroke-width:1.1; vector-effect:non-scaling-stroke; }
.pc__img .sf{ fill:#C9D0D6; }
.pc__tag{
  position:absolute; top:8px; left:8px;
  font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 6px; border-radius:2px; background:var(--tint); color:var(--navy);
}
.pc__b{ padding:11px 12px 12px; display:flex; flex-direction:column; flex:1; }
.pc__pn{ font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); }
.pc__nm{ font-size:13.5px; font-weight:600; line-height:1.35; margin-top:4px; }
.pc__sig{ margin-top:8px; }
.pc__ft{ margin-top:auto; padding-top:10px; display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.pc__pr b{ font-size:16px; font-weight:700; }
.pc__pr span{ display:block; font-size:10.5px; color:var(--ink-3); }

/* ===========================================================
   9. TERMS / HOW WE TRADE
   =========================================================== */
.terms{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border:1px solid var(--rule); border-radius:3px; }
.term{ padding:18px 20px; border-right:1px solid var(--rule-2); }
.term:last-child{ border-right:0; }
.term h3{ font-size:14.5px; margin-bottom:8px; }
.term p{ margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.55; }
.term dl{ margin:12px 0 0; font-size:13px; }
.term dt{ color:var(--ink-3); float:left; clear:left; }
.term dd{ margin:0 0 4px; text-align:right; font-weight:600; }

/* ===========================================================
   10. ACCOUNT APPLICATION
   =========================================================== */
.apply{ background:var(--bg); border-bottom:1px solid var(--rule); }
.apply__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,560px); gap:56px; padding:34px 0; align-items:start; }
.apply h2{ font-size:20px; }
.apply p{ margin:8px 0 0; font-size:14px; color:var(--ink-2); max-width:56ch; }
.apply ul{ margin:16px 0 0; padding:0; list-style:none; font-size:13.5px; color:var(--ink-2); }
.apply li{ padding:5px 0 5px 20px; position:relative; }
.apply li::before{
  content:''; position:absolute; left:0; top:11px;
  width:9px; height:5px; border-left:1.6px solid var(--stock); border-bottom:1.6px solid var(--stock);
  transform:rotate(-45deg);
}

.form{ background:var(--paper); border:1px solid var(--rule); border-radius:3px; padding:20px; }
.form h3{ font-size:14.5px; margin-bottom:14px; }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.fld label{ display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:4px; }
.fld input, .fld select{
  width:100%; height:38px; padding:0 10px;
  border:1px solid #C6CED5; border-radius:3px; background:var(--paper); font-size:14px;
}
.fld input:focus, .fld select:focus{ outline:0; border-color:var(--link); box-shadow:0 0 0 3px rgba(17,85,142,.12); }
.form .note{ margin:12px 0 0; font-size:12px; color:var(--ink-3); }

/* ===========================================================
   11. FOOTER
   =========================================================== */
.ft{ background:var(--paper); }
.ft__top{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr)); gap:36px; padding:36px 0 32px; }
.ft__ab p{ margin:14px 0 0; font-size:13px; color:var(--ink-2); line-height:1.6; max-width:34ch; }
.ft__ab address{ margin:14px 0 0; font-style:normal; font-size:13px; color:var(--ink-2); line-height:1.75; }
.ft__ab address a{ color:var(--link); }
.ft__c h4{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); margin-bottom:10px; }
.ft__c a{ display:block; padding:4px 0; font-size:13.5px; color:var(--ink-2); }
.ft__c a:hover{ color:var(--link); }
.ft__bt{
  border-top:1px solid var(--rule); padding:16px 0 26px;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:12.5px; color:var(--ink-3);
}
.ft__bt nav{ display:flex; gap:18px; flex-wrap:wrap; }
.ft__bt a:hover{ color:var(--link); }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1100px){
  .tiles{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .pg{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .terms{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .term:nth-child(2){ border-right:0; }
  .term:nth-child(-n+2){ border-bottom:1px solid var(--rule-2); }
  .band__in{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .facts{ max-width:460px; }
  .apply__in{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .ft__top{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
}

@media (max-width:900px){
  .catbar{ display:none; }
  .burger{ display:grid; }
  .callout{ display:none; }
  .mast__in{ height:auto; flex-wrap:wrap; padding:12px 0; gap:12px 16px; }
  form.search{ order:3; flex-basis:100%; max-width:none; }
  .mast__r{ gap:14px; }
}

@media (max-width:720px){
  .util__l span:nth-child(n+2){ display:none; }
  .util__r a:not(:last-child){ display:none; }
  .tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pg{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .terms{ grid-template-columns:minmax(0,1fr); }
  .term{ border-right:0; border-bottom:1px solid var(--rule-2); }
  .term:last-child{ border-bottom:0; }
  .ft__top{ grid-template-columns:minmax(0,1fr); }
  .acct span{ display:none; }
}

@media (max-width:480px){
  .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .facts{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .frow{ grid-template-columns:minmax(0,1fr); }
  form.search > select{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms !important; }
}

/* --- real product photography ------------------------------------- */
.tile__img{ height:96px; display:grid; place-items:center; margin-bottom:10px; }
.tile__img img{ max-height:96px; width:auto; object-fit:contain; mix-blend-mode:multiply; }
.pc__img img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.nm__img{ display:none; }
.noimg{
  display:block; width:70%; aspect-ratio:1/1;
  background:repeating-linear-gradient(45deg,#F2F4F6 0 6px,#EAEEF1 6px 12px);
  border-radius:3px;
}
@media (min-width:901px){
  .tbl .nm{ display:flex; align-items:center; gap:10px; }
  .nm__img{ display:block; flex:none; width:34px; height:34px; }
  .nm__img img{ width:34px; height:34px; object-fit:contain; mix-blend-mode:multiply; }
  .nm__img .noimg{ width:34px; }
}

/* ===========================================================
   12. CATALOGUE ARCHIVE  (brand / category / all products)
   =========================================================== */
.cat-head{ background:var(--bg); border-bottom:1px solid var(--rule); padding:24px 0; }
.cat-head h1{ font-size:26px; }
.cat-head p{ margin:8px 0 0; font-size:14px; color:var(--ink-2); max-width:70ch; }
.crumbs{ font-size:12.5px; color:var(--ink-3); margin-bottom:10px; }
.crumbs a:hover{ color:var(--link); }
.crumbs span{ margin:0 6px; opacity:.5; }

.shell{ display:grid; grid-template-columns:minmax(0,224px) minmax(0,1fr); gap:32px; padding:28px 0 48px; align-items:start; }

.side h4{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); margin:0 0 8px; }
.side ul{ list-style:none; margin:0 0 22px; padding:0; border-top:1px solid var(--rule-2); }
.side li{ border-bottom:1px solid var(--rule-2); }
.side li a{ display:flex; justify-content:space-between; gap:10px; padding:7px 0; font-size:13.5px; color:var(--ink-2); }
.side li a:hover{ color:var(--link); }
.side li a i{ font-style:normal; font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); }
.side li.on a{ color:var(--ink); font-weight:600; }

.toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-bottom:12px; margin-bottom:16px; border-bottom:1px solid var(--rule);
  font-size:13.5px; color:var(--ink-3); flex-wrap:wrap;
}
.toolbar .view{ display:flex; gap:4px; }
.toolbar .view button{
  padding:5px 10px; border:1px solid var(--rule); border-radius:3px;
  font-size:12.5px; font-weight:600; color:var(--ink-2); background:var(--paper);
}
.toolbar .view button.on{ border-color:var(--navy); color:var(--navy); }

.pg--archive{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.pc__nm a:hover{ color:var(--link); }
.pc__brand{ margin-top:8px; font-size:11.5px; color:var(--ink-3); }

.pager{ display:flex; gap:6px; margin-top:28px; flex-wrap:wrap; }
.pager a, .pager span{
  min-width:38px; height:38px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--rule); border-radius:3px; font-size:13.5px; font-weight:600;
}
.pager a:hover{ border-color:#B9C2CA; }
.pager .current{ background:var(--navy); border-color:var(--navy); color:#fff; }

.empty{ padding:48px 0; text-align:center; color:var(--ink-3); }
.empty h2{ margin-bottom:8px; color:var(--ink); }

/* ===========================================================
   13. SINGLE PRODUCT
   =========================================================== */
.prod{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,460px); gap:48px; padding:28px 0 44px; align-items:start; }
.prod__media{ border:1px solid var(--rule); border-radius:3px; background:var(--paper); padding:28px; display:grid; place-items:center; }
.prod__media img{ width:100%; height:auto; max-height:520px; object-fit:contain; mix-blend-mode:multiply; }

.prod__brand{ font-size:13px; color:var(--ink-3); }
.prod__brand a:hover{ color:var(--link); }
.prod h1{ font-size:27px; margin:6px 0 10px; }
.prod__pn{ font-family:var(--f-mono); font-size:13.5px; color:var(--ink-2); }
.prod__pn b{ color:var(--ink); }

/* One-line summary above the buy box. Kept to a sentence: the full copy
   has its own block further down the page. */
.prod__short{ margin:10px 0 0; font-size:14px; line-height:1.55; color:var(--ink-2); max-width:60ch; }

.prod__buy{ border:1px solid var(--rule); border-radius:3px; margin-top:20px; }
.prod__price{ padding:18px 20px; border-bottom:1px solid var(--rule-2); display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.prod__price b{ font-size:30px; font-weight:700; letter-spacing:-.02em; }
.prod__price span{ display:block; font-size:12px; color:var(--ink-3); margin-top:2px; }
.prod__rows{ font-size:13.5px; }
.prod__row{ display:flex; justify-content:space-between; gap:16px; padding:10px 20px; border-bottom:1px solid var(--rule-2); }
.prod__row dt{ color:var(--ink-3); margin:0; }
.prod__row dd{ margin:0; font-weight:600; text-align:right; }
.prod__cta{ padding:16px 20px; display:grid; gap:10px; }
.prod__note{ margin:14px 0 0; font-size:12.5px; color:var(--ink-3); }

.prod__body{ padding:32px 0 40px; border-top:1px solid var(--rule); }
.prod__body h2{ margin-bottom:12px; }
.prod__body p{ font-size:15px; color:var(--ink-2); max-width:74ch; }

/* ===========================================================
   14. GENERIC PAGE / SEARCH
   =========================================================== */
.page-head{ background:var(--bg); border-bottom:1px solid var(--rule); padding:26px 0; }
.page-head h1{ font-size:27px; }
.entry{ padding:30px 0 48px; }
.entry .wrap{ max-width:820px; }
.entry h2{ font-size:22px; margin:28px 0 10px; }
.entry h3{ margin:22px 0 8px; }
.entry p, .entry li{ font-size:15.5px; color:var(--ink-2); line-height:1.65; }
.entry a{ color:var(--link); text-decoration:underline; }
.entry img{ border-radius:3px; margin:18px 0; }

.results{ list-style:none; margin:0; padding:0; }
.results li{ padding:16px 0; border-bottom:1px solid var(--rule-2); }
.results h3{ font-size:16.5px; }
.results h3 a:hover{ color:var(--link); }
.results p{ margin:6px 0 0; font-size:13.5px; color:var(--ink-3); }
.results .pn{ font-family:var(--f-mono); font-size:11.5px; color:var(--link); }

/* Product results carry the photograph. A catalogue result without it is a
   row of text the buyer has to click to recognise. minmax(0,…) on the text
   column, or a long product name pushes the row past the viewport. */
.results__product{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px; align-items:start; }
.results__img{ display:block; width:96px; height:96px; display:grid; place-items:center; }
.results__img img{ max-width:96px; max-height:96px; width:auto; height:auto; object-fit:contain; mix-blend-mode:multiply; }
.results__img .noimg{ width:76px; }
.results__body{ min-width:0; }
.results__desc{ margin:5px 0 0; font-size:13px; color:var(--ink-2); line-height:1.55; max-width:70ch; }
.results__meta{ margin:7px 0 0; font-size:13.5px; color:var(--ink-2); display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.results__meta b{ color:var(--ink); font-weight:600; }

@media (max-width:620px){
  .results__product{ grid-template-columns:64px minmax(0,1fr); gap:12px; }
  .results__img, .results__img img{ width:64px; height:64px; max-width:64px; max-height:64px; }
}

/* ===========================================================
   15. RESPONSIVE — catalogue pages
   =========================================================== */
@media (max-width:1100px){
  .prod{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .pg--archive{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px){
  .shell{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .side{ border-bottom:1px solid var(--rule); padding-bottom:12px; }
  .side ul{ margin-bottom:14px; }
}
@media (max-width:720px){
  .pg--archive{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:480px){
  .pg--archive{ grid-template-columns:minmax(0,1fr); }
  .prod h1{ font-size:22px; }
}

/* ===========================================================
   16. WOOCOMMERCE
   WooCommerce ships its own markup for the cart, checkout and
   account pages. Rather than override every template, the
   classes it emits are restyled to the catalogue's own rules.
   =========================================================== */

/* --- add to cart, in lists --- */
.add_to_cart_button.loading{ opacity:.6; pointer-events:none; }
.added_to_cart{
  display:inline-flex; align-items:center; height:32px; padding:0 12px; margin-left:6px;
  border:1px solid var(--navy); border-radius:3px;
  font-size:13px; font-weight:600; color:var(--navy);
}
.added_to_cart:hover{ background:var(--tint); }

/* --- add to cart, product page --- */
.prod__cta form.cart{ display:flex; gap:8px; align-items:stretch; margin:0; }
.prod__cta .quantity{ flex:none; }
.prod__cta .quantity input[type="number"]{
  width:78px; height:40px; padding:0 8px; text-align:center;
  border:1px solid #C6CED5; border-radius:3px; font-size:14px; background:var(--paper);
}
.prod__cta .quantity input:focus{ outline:0; border-color:var(--link); box-shadow:0 0 0 3px rgba(17,85,142,.12); }
.prod__cta button.single_add_to_cart_button{
  flex:1; min-height:40px; padding:0 18px;
  background:var(--navy); color:#fff; border:1px solid var(--navy); border-radius:3px;
  font-size:14px; font-weight:600; cursor:pointer;
  transition:background-color .15s;
}
.prod__cta button.single_add_to_cart_button:hover{ background:var(--navy-2); }
.prod__oos{
  margin:0; padding:12px 14px; border-radius:3px;
  background:#FBF3F3; border:1px solid #E7CFD1; color:var(--out); font-size:13.5px;
}

/* --- notices --- */
.woocommerce-notices-wrapper:empty{ display:none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error{
  list-style:none;
  margin:16px 0 0; padding:12px 16px;
  border:1px solid var(--rule); border-left-width:3px; border-radius:3px;
  background:var(--panel); font-size:14px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.woocommerce-message{ border-left-color:var(--stock); }
.woocommerce-info{ border-left-color:var(--link); }
.woocommerce-error{ border-left-color:var(--out); color:var(--out); }
.woocommerce-error li{ list-style:none; }
.woocommerce-message .button, .woocommerce-info .button{
  height:32px; padding:0 12px; display:inline-flex; align-items:center;
  border:1px solid var(--rule); border-radius:3px; background:var(--paper);
  font-size:13px; font-weight:600; color:var(--ink);
}

/* --- generic WooCommerce buttons inside our pages --- */
.entry .button, .woocommerce .button, .wc-block-components-button{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; padding:0 18px;
  background:var(--navy); color:#fff; border:1px solid var(--navy); border-radius:3px;
  font-size:14px; font-weight:600; cursor:pointer;
}
.entry .button:hover, .woocommerce .button:hover{ background:var(--navy-2); color:#fff; }

/* --- cart & checkout tables --- */
.woocommerce table.shop_table{
  width:100%; border:1px solid var(--rule); border-radius:3px; border-collapse:collapse;
  font-size:14px; margin-bottom:24px;
}
.woocommerce table.shop_table th{
  text-align:left; padding:10px 12px; background:var(--panel);
  border-bottom:1px solid var(--rule);
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);
}
.woocommerce table.shop_table td{ padding:12px; border-bottom:1px solid var(--rule-2); vertical-align:middle; }
.woocommerce table.shop_table tr:last-child td{ border-bottom:0; }
.woocommerce table.shop_table img{ width:52px; height:52px; object-fit:contain; mix-blend-mode:multiply; }
.woocommerce .product-name a{ font-weight:600; }
.woocommerce .product-name a:hover{ color:var(--link); }
.woocommerce .quantity input[type="number"]{
  width:72px; height:36px; padding:0 8px; text-align:center;
  border:1px solid #C6CED5; border-radius:3px;
}
.woocommerce a.remove{
  display:inline-grid; place-items:center; width:22px; height:22px;
  border-radius:50%; color:var(--out); font-size:16px; line-height:1; text-decoration:none;
}
.woocommerce a.remove:hover{ background:#FBF3F3; }

.cart_totals, .woocommerce-checkout-review-order{
  border:1px solid var(--rule); border-radius:3px; padding:18px 20px; background:var(--panel);
}
.cart_totals h2, .woocommerce-checkout-review-order h3{ font-size:16px; margin-bottom:12px; }
.cart_totals table{ width:100%; font-size:14px; }
.cart_totals th{ text-align:left; color:var(--ink-3); font-weight:400; padding:6px 0; }
.cart_totals td{ text-align:right; font-weight:600; padding:6px 0; }
.order-total th, .order-total td{ border-top:1px solid var(--rule); padding-top:12px; font-size:16px; }

/* --- checkout form --- */
.woocommerce form .form-row{ margin-bottom:14px; }
.woocommerce form .form-row label{
  display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:4px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  width:100%; min-height:38px; padding:8px 10px;
  border:1px solid #C6CED5; border-radius:3px; background:var(--paper); font-size:14px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus{
  outline:0; border-color:var(--link); box-shadow:0 0 0 3px rgba(17,85,142,.12);
}
.woocommerce form .form-row .required{ color:var(--out); text-decoration:none; }
.woocommerce-billing-fields h3, .woocommerce-additional-fields h3{ font-size:17px; margin:22px 0 12px; }

#payment{ border:1px solid var(--rule); border-radius:3px; margin-top:16px; background:var(--paper); }
#payment ul.payment_methods{ list-style:none; margin:0; padding:14px 16px; border-bottom:1px solid var(--rule-2); }
#payment ul.payment_methods li{ padding:6px 0; font-size:14px; }
#payment div.form-row.place-order{ padding:14px 16px; }
#payment .woocommerce-privacy-policy-text p{ font-size:12.5px; color:var(--ink-3); }

/* --- account pages --- */
.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0 0 20px; padding:0; border-top:1px solid var(--rule-2); }
.woocommerce-MyAccount-navigation li{ border-bottom:1px solid var(--rule-2); }
.woocommerce-MyAccount-navigation li a{ display:block; padding:9px 0; font-size:14px; color:var(--ink-2); }
.woocommerce-MyAccount-navigation li.is-active a{ font-weight:600; color:var(--ink); }
.woocommerce-MyAccount-navigation li a:hover{ color:var(--link); }

@media (min-width:901px){
  .woocommerce-account .woocommerce{ display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:36px; align-items:start; }
}

/* --- cart count in the masthead --- */
.cartlink{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; position:relative; }
.cartlink:hover{ color:var(--link); }
.cartlink__n{
  min-width:18px; height:18px; padding:0 5px;
  display:inline-grid; place-items:center;
  background:var(--navy); color:#fff; border-radius:9px;
  font-size:11px; font-weight:700; line-height:1;
}
.cartlink__n:empty, .cartlink__n[data-count="0"]{ display:none; }

@media (max-width:720px){
  .woocommerce table.shop_table thead{ display:none; }
  .woocommerce table.shop_table tr{ display:block; border-bottom:1px solid var(--rule); padding:8px 0; }
  .woocommerce table.shop_table td{ display:flex; justify-content:space-between; gap:12px; border:0; padding:6px 12px; }
  .woocommerce table.shop_table td::before{ content:attr(data-title); color:var(--ink-3); font-size:12px; }
}
.entry--wide .wrap{ max-width:var(--max); }

/* WooCommerce blocks paint their own accent; bring them onto the brand. */
.wc-block-components-button:not(.is-link),
.wp-element-button, .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
  background:var(--navy); border-color:var(--navy); color:#fff; border-radius:3px;
}
.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover{ background:var(--navy-2); border-color:var(--navy-2); }
.wc-block-components-totals-item__value, .wc-block-formatted-money-amount{ font-weight:700; }
.wc-block-components-text-input input, .wc-block-components-select select{ border-radius:3px; }

/* With WooCommerce's defaults switched off, every button it renders is ours. */
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
button.single_add_to_cart_button{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; padding:0 18px;
  border:1px solid var(--rule); border-radius:3px;
  background:var(--paper); color:var(--ink);
  font-size:14px; font-weight:600; line-height:1; text-decoration:none; cursor:pointer;
  transition:background-color .15s, border-color .15s, color .15s;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover{ border-color:#B9C2CA; background:var(--panel); color:var(--ink); }

.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt, .woocommerce #respond input#submit.alt,
button.single_add_to_cart_button{
  background:var(--navy); border-color:var(--navy); color:#fff;
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
button.single_add_to_cart_button:hover{ background:var(--navy-2); border-color:var(--navy-2); color:#fff; }

.woocommerce a.button.disabled, .woocommerce button.button:disabled{
  opacity:.5; cursor:not-allowed;
}

/* ===========================================================
   17. CONTENT PAGES
   About, policies, lead times, datasheets and the three
   enquiry forms. Prose sits in an 820px column; the tables
   break out of it on wide screens so a five-column stock
   table is not squeezed into a reading measure.
   =========================================================== */

.entry .lede{ font-size:17px; color:var(--ink); line-height:1.55; margin:0 0 4px; }
.entry h2:first-child{ margin-top:0; }
.entry ul, .entry ol{ margin:10px 0 16px; padding-left:20px; }
.entry li{ margin-bottom:5px; }
.entry li::marker{ color:var(--ink-3); }
.entry hr{ border:0; border-top:1px solid var(--rule); margin:34px 0; }
.entry .muted{ color:var(--ink-3); }
.entry blockquote{
  margin:18px 0; padding:14px 16px;
  background:var(--panel); border:1px solid var(--rule); border-left:3px solid var(--navy);
  border-radius:0 3px 3px 0;
}
.entry blockquote p{ margin:0; font-size:14.5px; }

/* A fact the client has not confirmed. Meant to be noticed —
   in a document that becomes a trading term, a plausible
   invented figure is worse than an obvious gap. */
.tbc{
  display:inline-block;
  padding:1px 7px;
  border:1px dashed var(--low); border-radius:3px;
  background:#FDF8EC;
  color:var(--low);
  font-family:var(--f-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.02em; text-transform:uppercase;
  white-space:normal; text-decoration:none;
}
.entry a .tbc, .tbc a{ text-decoration:none; }

/* ---------- tables inside prose ---------- */
.tblwrap--flat{ border:1px solid var(--rule); border-top:1px solid var(--rule); border-radius:3px; margin:18px 0; background:var(--paper); }
.tbl--plain{ min-width:0; }
.tbl--plain thead th{ position:static; }
.tbl--plain td{ font-size:13.5px; }
.tbl--plain .nm{ font-weight:500; color:var(--ink); }
.tbl--plain .nm a{ color:var(--link); text-decoration:none; }
.tbl--plain .nm a:hover{ text-decoration:underline; }
.tbl--plain td a{ color:var(--link); text-decoration:none; }
.tbl--plain td a:hover{ text-decoration:underline; }
.tblnote{ margin:0; padding:10px 12px; border-top:1px solid var(--rule-2); background:var(--panel); font-size:12.5px; color:var(--ink-3); }

@media (min-width:1120px){
  .entry .tblwrap--flat,
  .entry .cblock,
  .entry .dl{ margin-left:-105px; margin-right:-105px; }
}
@media (max-width:640px){
  .tbl--plain{ min-width:560px; }
  .tblwrap--flat{ overflow-x:auto; }
}

/* ---------- contact / address block ---------- */
.cblock{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;
  border:1px solid var(--rule); border-radius:3px; margin:18px 0;
  background:var(--paper);
}
.cblock > div{ padding:16px 18px; border-right:1px solid var(--rule); }
.cblock > div:last-child{ border-right:0; }
.cblock h3{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin:0 0 8px; }
.cblock p{ margin:0; font-size:14px; line-height:1.6; }
.cblock a{ color:var(--link); text-decoration:none; }
.cblock a:hover{ text-decoration:underline; }
@media (max-width:820px){
  .cblock{ grid-template-columns:minmax(0,1fr); }
  .cblock > div{ border-right:0; border-bottom:1px solid var(--rule); }
  .cblock > div:last-child{ border-bottom:0; }
}

/* ---------- download panel ---------- */
.dl{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:16px 18px; margin:18px 0;
  border:1px solid var(--rule); border-radius:3px; background:var(--panel);
}
.dl b{ display:block; font-size:15px; }
.dl span{ display:block; font-size:13px; color:var(--ink-3); margin-top:2px; }
.dl .btn{ text-decoration:none; }

/* ---------- forms on content pages ---------- */
.entry .form{ margin:20px 0; }
.entry .form a{ color:var(--link); }
.frow--1{ grid-template-columns:minmax(0,1fr); }
.fld textarea{
  width:100%; padding:9px 11px;
  border:1px solid var(--rule); border-radius:3px; background:var(--paper);
  font-size:14px; line-height:1.5; resize:vertical;
}
.fld textarea:focus{ outline:0; border-color:var(--link); box-shadow:0 0 0 3px rgba(17,85,142,.12); }
.fld .hint{ display:block; margin-top:4px; font-size:11.5px; color:var(--ink-3); }
.fld .req{ color:var(--out); }

/* The honeypot. Off-screen rather than display:none — some bots
   skip anything explicitly hidden. */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.fmsg{
  padding:12px 14px; margin:0 0 18px;
  border:1px solid var(--rule); border-left-width:3px; border-radius:0 3px 3px 0;
  font-size:14px; line-height:1.55;
}
.fmsg--ok{ border-left-color:var(--stock); background:#F2F8F4; color:#0F5A2E; }
.fmsg--bad{ border-left-color:var(--out); background:#FCF4F4; color:#8E2027; }

/* ---------- two-up page layout (intro beside a form) ---------- */
.pcols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:start; margin:18px 0; }
@media (max-width:820px){ .pcols{ grid-template-columns:minmax(0,1fr); gap:20px; } }

/* ===========================================================
   Trade accounts — net pricing, volume breaks, quick order
   =========================================================== */

/* List struck through beside the account price, so a signed-in buyer can see
   what the account is worth rather than just a number that changed. */
.tradeprice{ display:inline-flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.tradeprice del{ color:var(--ink-3); text-decoration-thickness:1px; font-weight:400; }
.tradeprice ins{ text-decoration:none; font-weight:600; color:var(--ink); }
.tradeprice em{ font-style:normal; font-size:12px; color:var(--ink-3); }

.breaks{ margin:14px 0 0; }
.breaks .tbl{ font-size:13.5px; }
.breaks .tblnote{ margin:8px 0 0; font-size:12.5px; color:var(--ink-3); }

.tradebadge{
  display:inline-block; padding:2px 8px; border-radius:3px;
  background:#EAF3EA; color:#2C5E2E; font-size:12px; font-weight:600;
  white-space:nowrap;
}

/* Quick order: a monospaced pad, because what goes in it is part numbers. */
.quickorder textarea{
  font-family:var(--f-mono); font-size:13.5px; line-height:1.7;
  min-height:220px; white-space:pre; overflow-wrap:normal; overflow-x:auto;
}

.note{ padding:12px 14px; border-radius:4px; margin:0 0 14px; font-size:13.5px; line-height:1.6; }
.note--ok{ background:#EAF3EA; border:1px solid #CADFCB; color:#234A25; }
.note--bad{ background:#FBEFEF; border:1px solid #EACFCF; color:#6B2B2B; }
.note a{ color:inherit; text-decoration:underline; }

/* ===========================================================
   My Account — the trade portal's front door
   =========================================================== */

/* WooCommerce ships this area unstyled against a theme like this one, so it
   arrived as a bare login form on a white page. */
.woocommerce-account .wrap .woocommerce{ display:block; }

.woocommerce-account .woocommerce-MyAccount-navigation{
  float:none; width:auto; margin:0 0 22px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:2px;
  border-bottom:1px solid var(--line);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block; padding:9px 14px; font-size:13.5px; font-weight:500;
  color:var(--ink-2); border:1px solid transparent; border-bottom:0;
  border-radius:3px 3px 0 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{ color:var(--link); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background:#fff; border-color:var(--line); color:var(--ink);
  margin-bottom:-1px;
}
.woocommerce-account .woocommerce-MyAccount-content{ float:none; width:auto; }

/* Login sits in a narrow column; full width it reads as a broken page. */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-ResetPassword{
  max-width:420px; border:1px solid var(--line); border-radius:4px;
  padding:22px; background:#fff;
}
.woocommerce-account .woocommerce-form-login label,
.woocommerce-account .woocommerce-ResetPassword label{
  display:block; font-size:13px; font-weight:500; margin:0 0 5px; color:var(--ink-2);
}
.woocommerce-account .woocommerce-form-login input[type=text],
.woocommerce-account .woocommerce-form-login input[type=password],
.woocommerce-account .woocommerce-ResetPassword input[type=text]{
  width:100%; padding:9px 11px; border:1px solid var(--line);
  border-radius:3px; font:inherit; font-size:14px; background:#fff;
}
.woocommerce-account .woocommerce-form-login .form-row{ margin:0 0 14px; }

/* The trade panel on the dashboard. */
.acctpanel{
  border:1px solid var(--line); border-left:3px solid var(--ink-3);
  border-radius:4px; padding:18px 20px; margin:0 0 24px; background:#fff;
}
.acctpanel--live{ border-left-color:#2C5E2E; background:#FAFCFA; }
.acctpanel--pending{ border-left-color:#8A6D1F; background:#FDFBF4; }
.acctpanel h3{ margin:0 0 6px; font-size:16px; }
.acctpanel p{ margin:0 0 10px; font-size:13.5px; line-height:1.6; color:var(--ink-2); max-width:62ch; }
.acctpanel .tbl{ margin:12px 0; max-width:320px; font-size:13.5px; }
.acctpanel__links{ display:flex; flex-wrap:wrap; gap:16px; margin:12px 0 0; }
.acctpanel__links a{ font-size:13.5px; font-weight:500; color:var(--link); }

/* Tier beside the account link in the masthead. */
.mast__r .tradebadge{ align-self:center; margin-left:-4px; }

@media (max-width:900px){
  .mast__r .tradebadge{ display:none; }
  .acctpanel{ padding:14px 16px; }
}

/* ===========================================================
   Search suggestions
   =========================================================== */

form.search{ position:relative; }

.sugg{
  position:absolute; z-index:70; top:calc(100% + 4px); left:0; right:0;
  background:#fff; border:1px solid var(--line); border-radius:4px;
  box-shadow:0 8px 24px rgba(16,32,52,.12);
  max-height:min(70vh,440px); overflow-y:auto;
}

.sugg__row{
  display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr) auto;
  gap:12px; align-items:baseline;
  padding:9px 13px; border-bottom:1px solid var(--line-2,#EEF1F4);
  color:var(--ink); text-decoration:none;
}
.sugg__row:last-of-type{ border-bottom:0; }
.sugg__row:hover, .sugg__row.is-active{ background:#F4F7FA; }

.sugg__row b{
  font-family:var(--f-mono); font-size:12.5px; font-weight:600;
  color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sugg__row span{
  font-size:13px; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sugg__row em{ font-style:normal; font-size:12px; color:var(--ink-3); white-space:nowrap; }
.sugg__row.is-out em{ color:#8A6D1F; }

/* The matched fragment, so the reason a row is listed is obvious. */
.sugg mark{ background:#FFF3C4; color:inherit; padding:0 1px; border-radius:2px; }

.sugg__none{ padding:14px; font-size:13px; color:var(--ink-2); line-height:1.6; }

.sugg__all{
  display:block; width:100%; text-align:left;
  padding:10px 13px; border:0; border-top:1px solid var(--line);
  background:#FAFCFE; font:inherit; font-size:12.5px; font-weight:500;
  color:var(--link); cursor:pointer;
}
.sugg__all:hover{ background:#F0F5FA; }

@media (max-width:760px){
  /* Two columns on a phone: the price matters more than the full name. */
  .sugg__row{ grid-template-columns:minmax(0,1fr) auto; }
  .sugg__row span{ grid-column:1 / -1; }
}