/* ============================================================================
   B2B DESIGNS  -  assets/css/b2b.css
   ----------------------------------------------------------------------------
   Ten distribution-site architectures. A design changes the SHAPE of the page,
   not just its colours: a utility bar above the masthead, search as the
   dominant element, a department strip whose form varies, a mega-menu tree on
   two of them, and a trust strip under the header.

   Loaded after style.css/theme.css and before the site's custom CSS, and only
   when a design is chosen - without body.b2b every rule below is inert, so a
   site that never picks one is byte-for-byte unchanged.

   The product list itself is not here: it is .plist / .prow in style.css, so
   grid-vs-list stays an independent choice.
   ============================================================================ */

body.b2b .masthead,body.b2b .mainnav{display:none}   /* replaced by the strip below */

/* ---------------------------------------------------------------------------
   THE REMAP. Every card, button, heading, band, form and footer in this
   package already reads --card, --ink, --hair, --primary and friends. Pointing
   those at the design's own values recolours the entire site at a stroke -
   which is what "coordinated from the contact bar to the footer" needs. The
   alternative, a rule per component, is what left half the page in the old
   theme's colours.
   --------------------------------------------------------------------------- */
body.b2b{
  --bg:var(--b-bg); --card:var(--b-surf); --bg-soft:var(--b-surf);
  --ink:var(--b-ink); --page-ink:var(--b-ink); --muted:var(--b-mut);
  --hair:var(--b-line); --line:var(--b-line);
  --primary:var(--b-hdr); --primary-dark:var(--b-top); --accent:var(--b-acc);
  --hdr:var(--b-hdr); --hdr-soft:var(--b-hdr); --header-ink:var(--b-hdrink);
  --footer-ink:var(--b-topink);
  --topbar-bg:var(--b-top); --topbar-ink:var(--b-topink);
  /* header.php emits these eighteen from the site's own colour settings, in a
     <style> block of its own. A remap that misses one leaves that component in
     the old theme's colour no matter what else is set - which is why the
     footer stayed brown against a navy header: it reads --footer-bg first. */
  --header-bg:var(--b-hdr); --footer-bg:var(--b-top);
  --page-muted:var(--b-mut); --third:var(--b-acc2);
  --price-new:var(--b-ink); --price-old:var(--b-mut);
  --foot-txt:var(--b-topink-soft); --foot-txt-dim:var(--b-topink-soft);
  --foot1:var(--b-top); --foot2:var(--b-top);
  --deep1:var(--b-top); --deep2:var(--b-hdr);
  --g-fill:var(--b-surf); --g-fill-strong:var(--b-surf); --g-fill-faint:var(--b-surf);
  --g-edge:var(--b-line); --g-edge-soft:var(--b-line);
  --g-blur:none; --g-blur-lg:none; --spec:none;
  --sh-1:0 1px 2px rgba(16,32,52,.06); --sh-2:0 3px 10px rgba(16,32,52,.08);
  --sh-3:0 10px 26px rgba(16,32,52,.12);
  --soft-tint:color-mix(in srgb, var(--b-hdr) 5%, transparent);
  --p10:color-mix(in srgb, var(--b-hdr) 10%, transparent);
  --p12:color-mix(in srgb, var(--b-hdr) 12%, transparent);
  --p16:color-mix(in srgb, var(--b-hdr) 16%, transparent);
  --p18:color-mix(in srgb, var(--b-hdr) 18%, transparent);
  --p22:color-mix(in srgb, var(--b-hdr) 22%, transparent);
  --p24:color-mix(in srgb, var(--b-hdr) 24%, transparent);
  --p26:color-mix(in srgb, var(--b-hdr) 26%, transparent);
  --p28:color-mix(in srgb, var(--b-hdr) 28%, transparent);
  --p34:color-mix(in srgb, var(--b-hdr) 34%, transparent);
  --p36:color-mix(in srgb, var(--b-hdr) 36%, transparent);
  --p45:color-mix(in srgb, var(--b-hdr) 45%, transparent);
  --p55:color-mix(in srgb, var(--b-hdr) 55%, transparent);
  --p-lite:color-mix(in srgb, var(--b-hdr) 14%, transparent);
  --a-lite:color-mix(in srgb, var(--b-acc) 70%, #fff);
  --a22:color-mix(in srgb, var(--b-acc) 22%, transparent);
  --a40:color-mix(in srgb, var(--b-acc) 40%, transparent);
}

/* the site's own contact bar becomes the design's utility bar */
body.b2b .utilitybar{background:var(--b-top);color:var(--b-topink)}
body.b2b .utilitybar .ub,body.b2b .utilitybar a{color:var(--b-topink)}
body.b2b .utilitybar .ub__i{color:var(--b-topink);opacity:.8}
body.b2b .utilitybar__panel{background:transparent;border:0;box-shadow:none}
body.b2b{background:var(--b-bg);color:var(--b-ink);font-family:var(--b-ff)}
body.b2b h1,body.b2b h2,body.b2b h3{font-family:var(--b-ff)}

/* ---- utility bar ---- */
.b2bu{background:var(--b-top);color:var(--b-topink);font-size:12px}
.b2bu__in{width:min(var(--page-w),100% - var(--page-gutter));margin-inline:auto;padding-inline:var(--band-pad);display:flex;align-items:center;gap:18px;padding:6px 0}
.b2bu__sp{flex:1}
.b2bu a{color:var(--b-topink);opacity:.88;text-decoration:none}
.b2bu a:hover{opacity:1;text-decoration:underline}
.b2bu__ph b{font-weight:700}
.b2bu__t{opacity:.8}
@media(max-width:820px){.b2bu__in{flex-wrap:wrap;gap:10px;font-size:11px}.b2bu__sp{display:none}}

/* ---- masthead: search is the point ---- */
.b2bh{background:var(--b-hdr);color:var(--b-hdrink)}
.b2bh__in{width:min(var(--page-w),100% - var(--page-gutter));margin-inline:auto;padding-inline:var(--band-pad);display:flex;align-items:center;gap:22px;padding:13px 0}
.b2bh__logo{color:var(--b-hdrink);text-decoration:none;font-weight:800;font-size:20px;letter-spacing:-.02em;white-space:nowrap;flex:none}
.b2bh__logo img{max-height:44px;width:auto;display:block}
.b2bs{flex:1;min-width:0;display:flex;background:#fff;border-radius:4px;overflow:hidden}
.b2bs select{border:0;background:#eef1f4;color:#333;font-size:12.5px;padding:0 10px;max-width:170px;flex:none}
.b2bs input{flex:1;min-width:0;border:0;padding:12px 14px;font-size:14px;color:#111}
.b2bs input:focus{outline:2px solid var(--b-acc);outline-offset:-2px}
.b2bs button{border:0;background:var(--b-acc);color:var(--b-accink);font-weight:700;font-size:13.5px;padding:0 22px;cursor:pointer}
.b2bs button:hover{filter:brightness(1.06)}
.b2bh__act{display:flex;gap:20px;flex:none}
.b2bh__act a{color:var(--b-hdrink);text-decoration:none;font-size:11px;opacity:.85;white-space:nowrap}
.b2bh__act b{display:block;font-size:13px;opacity:1;font-weight:700}
.b2bh__act a:hover{opacity:1}
@media(max-width:900px){
  .b2bh__in{flex-wrap:wrap;gap:12px}
  .b2bs{order:3;width:100%;flex-basis:100%}
  .b2bs select{display:none}
  .b2bh__act{margin-left:auto}
}

/* ---- department strip ---- */
.b2bn{background:var(--b-nav);color:var(--b-navink)}
.b2bn__in{width:min(var(--page-w),100% - var(--page-gutter));margin-inline:auto;padding-inline:max(0px,calc(var(--band-pad) - 13px));display:flex;align-items:center;gap:2px}
.b2bn a{color:var(--b-navink);text-decoration:none;font-size:13px;padding:10px 13px;white-space:nowrap}
.b2bn a:hover{background:color-mix(in srgb, var(--b-navink) 14%, transparent)}
.b2bn__sp{flex:1}
.b2bn__all{display:flex;align-items:center;gap:9px;background:none;border:0;color:var(--b-navink);
  font:700 13px inherit;padding:10px 14px;cursor:pointer}
.b2bn__all:hover{background:color-mix(in srgb, var(--b-navink) 14%, transparent)}
.b2bn__bars{display:grid;gap:3px;width:15px}
.b2bn__bars i{display:block;height:2px;background:currentColor;border-radius:2px}
.b2bn__more{font-weight:600}
.b2bn--pills{background:var(--b-surf);color:var(--b-ink);border-bottom:1px solid var(--b-line)}
.b2bn--pills .b2bn__in{gap:8px;padding:9px 0}
.b2bn--pills a{border:1px solid var(--b-line);border-radius:99px;padding:6px 14px;font-size:12.5px;color:var(--b-ink)}
.b2bn--pills a:hover{background:var(--b-hdr);color:var(--b-hdrink);border-color:var(--b-hdr)}
@media(max-width:900px){.b2bn__in{overflow-x:auto;scrollbar-width:none}.b2bn__in::-webkit-scrollbar{display:none}}

/* the ticker moves into the department strip, where there is room for it */
.b2bn__tick{flex:0 1 420px;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.b2bn__tickt{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;font-size:12.5px;
  animation:ticker 26s linear infinite}
.b2bn__tick:hover .b2bn__tickt{animation-play-state:paused}
.b2bn__dot{opacity:.45}
@media(max-width:1200px){.b2bn__tick{display:none}}
@media(prefers-reduced-motion:reduce){.b2bn__tickt{animation:none}}

/* ---- mega-menu tree ---- */
.b2bt{background:var(--b-surf);border-bottom:1px solid var(--b-line);box-shadow:0 14px 30px rgba(10,20,40,.10)}
.b2bt[hidden]{display:none}
.b2bt__in{width:min(var(--page-w),100% - var(--page-gutter));margin-inline:auto;padding-inline:var(--band-pad);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:6px 26px;padding:18px 0 22px}
.b2bt__col{min-width:0}
.b2bt a{display:block;color:var(--b-mut);text-decoration:none;font-size:12.5px;padding:3px 0}
.b2bt a:hover{color:var(--b-acc2);text-decoration:underline}
.b2bt__h{color:var(--b-ink)!important;font-weight:700;font-size:13.5px;margin-bottom:4px}
.b2bt__h em{font-style:normal;color:var(--b-mut);font-weight:400;font-size:11.5px;margin-left:5px}

/* ---- trust strip ---- */
.b2btr{background:var(--b-surf);border-bottom:1px solid var(--b-line)}
.b2btr__in{width:min(var(--page-w),100% - var(--page-gutter));margin-inline:auto;padding-inline:var(--band-pad);
  display:grid;grid-template-columns:repeat(4,1fr);background:transparent}
/* dividers as cell borders, not a grid gap showing the container behind it -
   that was painting a grey sliver in the padding at each end of the strip */
.b2btr__in > div{background:transparent;padding:11px 16px;border-left:1px solid var(--b-line)}
.b2btr__in > div:first-child{border-left:0}
.b2btr b{display:block;font-size:13px;color:var(--b-ink)}
.b2btr span{font-size:11.5px;color:var(--b-mut)}
@media(max-width:820px){.b2btr__in{grid-template-columns:repeat(2,1fr)}}

/* ---- the page beneath picks up the design's surfaces ---- */
body.b2b .section--soft{background:var(--b-surf)}
body.b2b .plist{border-color:var(--b-line);background:var(--b-surf)}
body.b2b .prow{border-color:var(--b-line)}
body.b2b .prow__name a{color:var(--b-link)}
body.b2b .btn{background:var(--b-acc);color:var(--b-accink);border-color:transparent}
body.b2b .btn:hover{filter:brightness(1.06);background:var(--b-acc)}
body.b2b .eyebrow{color:var(--b-acc2)}

/* ---------- Marketplace : Utility bar, dominant search, department rail, deals row, dense list view. ---------- */
body.b2b-marketplace{
  --b-top:#131921; --b-hdr:#232f3e; --b-acc:#ff9900; --b-acc2:#febd69;
  --b-accink:#111111; --b-link:#007185;
  --b-bg:#eaeded; --b-surf:#fff; --b-ink:#0f1111; --b-mut:#565959;
  --b-line:#d5d9d9; --b-ok:#007600; --b-ff:"Inter",system-ui,sans-serif;
  /* derived, so a colour combination below can retint every design at once */
  --b-topink:#ffffff; --b-topink-soft:rgba(255,255,255,.78);
  --b-hdrink:#ffffff; --b-hdrink-soft:rgba(255,255,255,.78);
  --b-nav:var(--b-top);
  --b-navink:#fff;
  --b-card:#232f3e; --b-cardink:#ffffff; --b-cardink-soft:rgba(255,255,255,.80);
}
/* ---------- Megastore : Bold blue header, pill categories, promo tiles, reorder panel. ---------- */
body.b2b-megastore{
  --b-top:#0053b3; --b-hdr:#0071dc; --b-acc:#ffc220; --b-acc2:#ffe57f;
  --b-accink:#111111; --b-link:#0071dc;
  --b-bg:#f2f8fd; --b-surf:#fff; --b-ink:#14161a; --b-mut:#5a6472;
  --b-line:#dbe4ee; --b-ok:#00834a; --b-ff:"Figtree",system-ui,sans-serif;
  /* derived, so a colour combination below can retint every design at once */
  --b-topink:#ffffff; --b-topink-soft:rgba(255,255,255,.78);
  --b-hdrink:#ffffff; --b-hdrink-soft:rgba(255,255,255,.78);
  --b-nav:var(--b-surf);
  --b-navink:var(--b-ink);
  --b-card:#0071dc; --b-cardink:#ffffff; --b-cardink-soft:rgba(255,255,255,.80);
}
/* ---------- Electronics Retail : High-contrast yellow on navy, badge-heavy, spec-rich list rows. ---------- */
body.b2b-electronics{
  --b-top:#003b64; --b-hdr:#0046be; --b-acc:#fff200; --b-acc2:#ffe000;
  --b-accink:#111111; --b-link:#0046be;
  --b-bg:#f4f6f8; --b-surf:#fff; --b-ink:#1d252c; --b-mut:#5b6670;
  --b-line:#dde3e8; --b-ok:#008a00; --b-ff:"Roboto",system-ui,sans-serif;
  /* derived, so a colour combination below can retint every design at once */
  --b-topink:#ffffff; --b-topink-soft:rgba(255,255,255,.78);
  --b-hdrink:#ffffff; --b-hdrink-soft:rgba(255,255,255,.78);
  --b-nav:var(--b-top);
  --b-navink:#fff;
  --b-card:#0046be; --b-cardink:#ffffff; --b-cardink-soft:rgba(255,255,255,.80);
}
/* ---------- Industrial Distributor : Left category tree, tabular listing, part numbers and qty inputs. ---------- */
body.b2b-industrial{
  --b-top:#4d4d4d; --b-hdr:#c8102e; --b-acc:#c8102e; --b-acc2:#e8384f;
  --b-accink:#ffffff; --b-link:#0b5cab;
  --b-bg:#f1f2f4; --b-surf:#fff; --b-ink:#1c1c1c; --b-mut:#5f6368;
  --b-line:#d7d9dd; --b-ok:#1e7b34; --b-ff:"IBM Plex Sans",system-ui,sans-serif;
  /* derived, so a colour combination below can retint every design at once */
  --b-topink:#ffffff; --b-topink-soft:rgba(255,255,255,.78);
  --b-hdrink:#ffffff; --b-hdrink-soft:rgba(255,255,255,.78);
  --b-nav:var(--b-top);
  --b-navink:#fff;
  --b-card:#c8102e; --b-cardink:#ffffff; --b-cardink-soft:rgba(255,255,255,.80);
}
/* ---------- IT Reseller : Solution-led hero, contract pricing callout, spec comparison rows. ---------- */
body.b2b-itreseller{
  --b-top:#1a1a1a; --b-hdr:#c8102e; --b-acc:#c8102e; --b-acc2:#ff4d5e;
  --b-accink:#ffffff; --b-link:#1a5fb4;
  --b-bg:#f5f6f7; --b-surf:#fff; --b-ink:#1a1a1a; --b-mut:#616770;
  --b-line:#dcdfe3; --b-ok:#0f7b3f; --b-ff:"Source Sans 3",system-ui,sans-serif;
  /* derived, so a colour combination below can retint every design at once */
  --b-topink:#ffffff; --b-topink-soft:rgba(255,255,255,.78);
  --b-hdrink:#ffffff; --b-hdrink-soft:rgba(255,255,255,.78);
  --b-nav:var(--b-top);
  --b-navink:#fff;
  --b-card:#c8102e; --b-cardink:#ffffff; --b-cardink-soft:rgba(255,255,255,.80);
}
/* ---------- Wholesale Portal : Account bar, price-break tables, quick order pad, net terms. ---------- */
body.b2b-wholesale{
  --b-top:#12324f; --b-hdr:#12324f; --b-acc:#f0a500; --b-acc2:#ffcf6b;
  --b-accink:#111111; --b-link:#12639e;
  --b-bg:#eef1f4; --b-surf:#fff; --b-ink:#16202a; --b-mut:#5c6873;
  --b-line:#d4dae0; --b-ok:#12704a; --b-ff:"Barlow",system-ui,sans-serif;
  /* derived, so a colour combination below can retint every design at once */
  --b-topink:#ffffff; --b-topink-soft:rgba(255,255,255,.78);
  --b-hdrink:#ffffff; --b-hdrink-soft:rgba(255,255,255,.78);
  --b-nav:var(--b-top);
  --b-navink:#fff;
  --b-card:#12324f; --b-cardink:#ffffff; --b-cardink-soft:rgba(255,255,255,.80);
}
/* ---------- Tech Marketplace : Dark chrome, orange accents, very dense listing with compare. ---------- */
body.b2b-techmart{
  --b-top:#0f0f0f; --b-hdr:#1a1a1a; --b-acc:#ff6a00; --b-acc2:#ff8c3a;
  --b-accink:#111111; --b-link:#0b7bd0;
  --b-bg:#f0f0f0; --b-surf:#fff; --b-ink:#1a1a1a; --b-mut:#5e5e5e;
  --b-line:#d8d8d8; --b-ok:#1a7f37; --b-ff:"Barlow",system-ui,sans-serif;
  /* derived, so a colour combination below can retint every design at once */
  --b-topink:#ffffff; --b-topink-soft:rgba(255,255,255,.78);
  --b-hdrink:#ffffff; --b-hdrink-soft:rgba(255,255,255,.78);
  --b-nav:var(--b-top);
  --b-navink:#fff;
  --b-card:#1a1a1a; --b-cardink:#ffffff; --b-cardink-soft:rgba(255,255,255,.80);
}
/* ---------- Office Supply : Red on white, big category tiles, reorder and subscription panel. ---------- */
body.b2b-officesupply{
  --b-top:#8c0000; --b-hdr:#cc0000; --b-acc:#cc0000; --b-acc2:#ff3b3b;
  --b-accink:#ffffff; --b-link:#0a5ca8;
  --b-bg:#f6f7f9; --b-surf:#fff; --b-ink:#1f2328; --b-mut:#606a75;
  --b-line:#dee2e7; --b-ok:#1a7f37; --b-ff:"Open Sans",system-ui,sans-serif;
  /* derived, so a colour combination below can retint every design at once */
  --b-topink:#ffffff; --b-topink-soft:rgba(255,255,255,.78);
  --b-hdrink:#ffffff; --b-hdrink-soft:rgba(255,255,255,.78);
  --b-nav:var(--b-surf);
  --b-navink:var(--b-ink);
  --b-card:#cc0000; --b-cardink:#ffffff; --b-cardink-soft:rgba(255,255,255,.80);
}
/* ---------- Trade Counter : Branch and stock-by-location emphasis, collect today, tight rows. ---------- */
body.b2b-tradecounter{
  --b-top:#00304a; --b-hdr:#00447c; --b-acc:#f7a800; --b-acc2:#ffc23d;
  --b-accink:#111111; --b-link:#00447c;
  --b-bg:#eff3f6; --b-surf:#fff; --b-ink:#152430; --b-mut:#586b78;
  --b-line:#d5dee4; --b-ok:#0f7a3d; --b-ff:"Archivo",system-ui,sans-serif;
  /* derived, so a colour combination below can retint every design at once */
  --b-topink:#ffffff; --b-topink-soft:rgba(255,255,255,.78);
  --b-hdrink:#ffffff; --b-hdrink-soft:rgba(255,255,255,.78);
  --b-nav:var(--b-top);
  --b-navink:#fff;
  --b-card:#00447c; --b-cardink:#ffffff; --b-cardink-soft:rgba(255,255,255,.80);
}
/* ---------- Enterprise Procurement : Minimal chrome, contract price columns, approval workflow cues. ---------- */
body.b2b-procurement{
  --b-top:#14313d; --b-hdr:#1b4d3e; --b-acc:#1b4d3e; --b-acc2:#2f7d63;
  --b-accink:#ffffff; --b-link:#12639e;
  --b-bg:#f4f6f5; --b-surf:#fff; --b-ink:#16211d; --b-mut:#5a6a64;
  --b-line:#d8dedb; --b-ok:#1b7a4b; --b-ff:"Inter",system-ui,sans-serif;
  /* derived, so a colour combination below can retint every design at once */
  --b-topink:#ffffff; --b-topink-soft:rgba(255,255,255,.78);
  --b-hdrink:#ffffff; --b-hdrink-soft:rgba(255,255,255,.78);
  --b-nav:var(--b-top);
  --b-navink:#fff;
  --b-card:#1b4d3e; --b-cardink:#ffffff; --b-cardink-soft:rgba(255,255,255,.80);
}

/* ============================================================================
   HERO SECTIONS  -  includes/b2b-hero.php
   Seven shapes across the ten designs. Everything is driven by the --b-* tokens
   above, so a colour combination retints these too.
   ============================================================================ */
.b2bx{padding:22px 0}
.b2bx__in{width:min(var(--page-w),100% - var(--page-gutter));margin-inline:auto;padding-inline:var(--band-pad)}
.b2bx h2{font-size:clamp(21px,2.4vw,30px);line-height:1.12;margin:0 0 8px;letter-spacing:-.02em}
.b2bx p{margin:0 0 14px;font-size:14.5px;line-height:1.55;max-width:56ch}
.b2bx__kick{display:inline-block;background:var(--b-acc);color:var(--b-accink);font-size:10.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:3px;margin-bottom:11px}
.b2bx__cta{display:inline-block;background:var(--b-acc);color:var(--b-accink);font-weight:700;font-size:13.5px;
  padding:11px 20px;border-radius:4px;text-decoration:none;margin-right:8px}
.b2bx__cta:hover{filter:brightness(1.07);color:var(--b-accink)}
.b2bx__cta--g{background:transparent;border:1.5px solid currentColor}
.b2bx__ti{display:block;height:66px;background:color-mix(in srgb, var(--b-ink) 7%, transparent);
  border-radius:4px;margin-bottom:9px}

/* deal banner + category tiles */
.b2bx--deal .b2bx__in{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;align-items:stretch}
.b2bx__bnr{background:linear-gradient(120deg,var(--b-hdr),var(--b-top));color:var(--b-hdrink);border-radius:6px;padding:26px}
.b2bx__bnr p{color:var(--b-hdrink-soft)}
.b2bx__bnr--soft{background:var(--b-surf);color:var(--b-ink);border:1px solid var(--b-line)}
.b2bx__bnr--soft p{color:var(--b-mut)}
.b2bx__tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.b2bx__tile{background:var(--b-surf);border:1px solid var(--b-line);border-radius:6px;padding:12px;
  text-decoration:none;color:var(--b-ink);text-align:center;font-size:13px;font-weight:600}
.b2bx__tile:hover{border-color:var(--b-acc);color:var(--b-ink)}
.b2bx__tile .b2bx__ti{height:44px;margin-bottom:7px}

/* account banner + department tiles */
.b2bx--promo .b2bx__in{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:12px}
.b2bx__pt{background:var(--b-surf);border:1px solid var(--b-line);border-radius:6px;padding:14px;
  text-decoration:none;color:var(--b-ink)}
.b2bx__pt:hover{border-color:var(--b-acc);color:var(--b-ink)}
.b2bx__pt b{display:block;font-size:13.5px;margin-bottom:2px}
.b2bx__pt em{font-style:normal;font-size:12px;color:var(--b-mut)}

/* full-width statement + live figures */
.b2bx--full .b2bx__in{display:flex;align-items:center;gap:30px;flex-wrap:wrap;
  background:linear-gradient(120deg,var(--b-hdr),var(--b-top));color:var(--b-hdrink);border-radius:6px;padding:30px}
.b2bx--full p{color:var(--b-hdrink-soft)}
.b2bx__stat{display:flex;gap:30px;margin-left:auto;text-align:center}
.b2bx__stat b{display:block;font-size:26px;font-weight:800;letter-spacing:-.02em}
.b2bx__stat span{font-size:11.5px;opacity:.78}

/* search-led */
.b2bx--search{background:var(--b-surf);border-bottom:1px solid var(--b-line);text-align:center;padding:34px 0}
.b2bx--search h2{margin-bottom:14px}
.b2bx__srch{display:flex;max-width:620px;margin:0 auto;border:2px solid var(--b-hdr);border-radius:5px;overflow:hidden;background:#fff}
.b2bx__srch input{flex:1;min-width:0;border:0;padding:13px 15px;font-size:15px;color:#111}
.b2bx__srch input:focus{outline:2px solid var(--b-acc);outline-offset:-2px}
.b2bx__srch button{border:0;background:var(--b-acc);color:var(--b-accink);font-weight:700;font-size:13.5px;padding:0 22px;cursor:pointer;white-space:nowrap}
.b2bx__pop{margin-top:13px;font-size:13px;color:var(--b-mut)}
.b2bx__pop a{color:var(--b-link);margin-left:10px;text-decoration:underline}

/* solutions */
.b2bx--sol .b2bx__in{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:11px}
.b2bx__sc{background:var(--b-surf);border:1px solid var(--b-line);border-radius:6px;padding:14px;
  text-decoration:none;color:var(--b-ink);display:flex;flex-direction:column;justify-content:center}
.b2bx__sc:hover{border-color:var(--b-acc);color:var(--b-ink)}
.b2bx__sc b{display:block;font-size:13.5px;margin-bottom:3px}
.b2bx__sc em{font-style:normal;font-size:12px;color:var(--b-mut);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* quick order pad + account panel */
.b2bx--qo .b2bx__in{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
.b2bx__pad,.b2bx__acct{background:var(--b-surf);border:1px solid var(--b-line);border-radius:6px;padding:22px}
.b2bx__pad input{width:100%;border:1.5px solid var(--b-line);border-radius:4px;padding:11px 13px;font-size:14px;margin-bottom:12px}
.b2bx__acct h3{font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--b-mut);margin:0 0 11px}
.b2bx__acct dl{margin:0 0 14px}
.b2bx__acct dt{font-size:13.5px;font-weight:700;margin-top:8px}
.b2bx__acct dd{margin:1px 0 0;font-size:12.5px;color:var(--b-mut)}

/* branch / collect today */
.b2bx--branch .b2bx__in{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center}
.b2bx--branch .b2bx__srch{margin:0}
.b2bx__contact{display:grid;gap:9px}
.b2bx__contact div{background:var(--b-surf);border:1px solid var(--b-line);border-radius:5px;padding:10px 13px}
.b2bx__contact b{display:block;font-size:12.5px}
.b2bx__contact span{font-size:12.5px;color:var(--b-mut)}

@media(max-width:960px){
  .b2bx--deal .b2bx__in,.b2bx--promo .b2bx__in,.b2bx--sol .b2bx__in,
  .b2bx--qo .b2bx__in,.b2bx--branch .b2bx__in{grid-template-columns:1fr}
  .b2bx__tiles{grid-template-columns:repeat(4,1fr)}
  .b2bx__stat{margin:14px 0 0;gap:22px}
}
@media(max-width:600px){.b2bx__tiles{grid-template-columns:1fr 1fr}}


/* ---- brand strip, above the footer ---- */
.b2bbs{background:var(--b-surf);border-top:1px solid var(--b-line);padding:20px 0}
.b2bbs__in{width:min(var(--page-w),100% - var(--page-gutter));margin-inline:auto;padding-inline:var(--band-pad)}
.b2bbs h3{font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--b-mut);margin:0 0 12px;font-weight:700}
.b2bbs__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:9px}
.b2bbs__row a{display:grid;place-items:center;height:52px;padding:8px;background:var(--b-bg);
  border:1px solid var(--b-line);border-radius:5px;text-decoration:none;overflow:hidden}
.b2bbs__row a:hover{border-color:var(--b-acc)}
.b2bbs__row img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.b2bbs__row span{font-size:11.5px;font-weight:600;color:var(--b-mut);text-align:center;line-height:1.25}

/* ---- the stock footer, retinted to the design ---- */


/* ============================================================================
   HEAD TO FOOT
   The design owns the whole page, not just the header. Without this the strip
   at the top was the design's and everything below it was still the stock
   theme's - two different sites stacked on one another.
   ============================================================================ */

/* the stock contact bar is replaced by .b2bu, so it must not render twice */
body.b2b .utilitybar{display:none}

/* page surfaces */
body.b2b .section{background:var(--b-bg)}
body.b2b .section--soft{background:var(--b-surf)}
body.b2b .pagehead{background:var(--b-surf);border-bottom:1px solid var(--b-line)}
body.b2b .pagehead h1{color:var(--b-ink)}

/* headings and eyebrows */
body.b2b .section__head h2,body.b2b h1,body.b2b h2,body.b2b h3{color:var(--b-ink)}
body.b2b .eyebrow{color:var(--b-acc2);background:none;border:0;padding:0;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase}
body.b2b .section__head{border-left-color:var(--b-acc)}
body.b2b p,body.b2b .lead{color:var(--b-mut)}

/* every card surface on the site */
body.b2b .card,body.b2b .catcard,body.b2b .tile,body.b2b .artcard,
body.b2b .tb-ct,body.b2b .tb-bi,body.b2b .marketrow{
  background:var(--b-surf);border-color:var(--b-line);
}
body.b2b .catcard h3,body.b2b .tile__name,body.b2b .artcard h3,body.b2b .tb-ct h3{color:var(--b-ink)}
body.b2b .catcard p,body.b2b .artcard p,body.b2b .tile__part,body.b2b .tb-ct__n{color:var(--b-mut)}
body.b2b .catcard span,body.b2b .tb-bi__i{color:var(--b-acc2)}
body.b2b .catcard:hover,body.b2b .tile:hover,body.b2b .artcard:hover{border-color:var(--b-acc)}

/* prices, wherever they appear */
body.b2b .tile__price,body.b2b .price__now,body.b2b .prow__now{color:var(--b-ink)}
body.b2b .price__was,body.b2b .prow__was{color:var(--b-mut)}

/* controls */
body.b2b .btn,body.b2b .tile__add .btn{background:var(--b-acc);color:var(--b-accink);border-color:transparent}
body.b2b .btn:hover{filter:brightness(1.07);background:var(--b-acc);color:var(--b-accink)}
body.b2b .btn--ghost{background:transparent;color:var(--b-link);border:1px solid var(--b-line)}
body.b2b .btn--ghost:hover{background:color-mix(in srgb, var(--b-link) 10%, transparent);color:var(--b-link)}
body.b2b a{color:inherit}
body.b2b .crumbs,body.b2b .crumbs a{color:var(--b-mut)}
body.b2b .crumbs a:hover{color:var(--b-link)}
body.b2b .pager a{background:var(--b-surf);border-color:var(--b-line);color:var(--b-ink)}
body.b2b .pager a[aria-current],body.b2b .pager .is-on{background:var(--b-acc);color:var(--b-accink);border-color:transparent}
body.b2b input,body.b2b select,body.b2b textarea{border-color:var(--b-line)}

/* strips and the footer */
body.b2b .logostrip{background:var(--b-surf);border-block:1px solid var(--b-line)}

/* floating things */
body.b2b .cookiebar{background:var(--b-surf);border-color:var(--b-line);color:var(--b-ink)}
/* .sitechat is the fixed positioning wrapper, not the button. Painting it
   left an orange square sitting behind the bubble and over the footer.
   Only the bubble itself takes the design's colour. */
body.b2b .sitechat{background:none}
body.b2b .sitechat__bubble{background:var(--b-hdr);color:var(--b-hdrink)}
body.b2b .sitechat__bubble:hover{background:var(--b-top)}
body.b2b .sitechat__badge{background:var(--b-acc);color:var(--b-accink)}


/* ============================================================================
   THE REST OF THE PAGE
   Without this the header is the design's and everything under it is the
   stock theme's, which is what "not coordinated from the contact bar to the
   footer" means. Every surface below now reads from the same --b-* tokens.
   ============================================================================ */
body.b2b .wrap{width:min(var(--page-w,1440px),100% - 32px)}
body.b2b .section{padding:26px 0;background:var(--b-bg)}
body.b2b .section--soft,body.b2b .section--soft > .wrap{background:var(--b-surf)}
body.b2b .section__head h2,body.b2b h1,body.b2b h2,body.b2b h3{color:var(--b-ink)}
body.b2b p,body.b2b .lead{color:var(--b-mut)}
body.b2b a{color:var(--b-link)}

/* section headings: one rule, in the design's accent */
body.b2b .section__head{border-left:3px solid var(--b-acc);padding-left:12px}
body.b2b .eyebrow{background:none;border:0;padding:0;color:var(--b-acc2);
  font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:11px}

/* cards, tiles and articles all take the design's surface and border */
body.b2b .card,body.b2b .catcard,body.b2b .tile,body.b2b .artcard,body.b2b .tb-ct,body.b2b .tb-bi{
  background:var(--b-surf);border:1px solid var(--b-line);border-radius:6px;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
body.b2b .catcard:hover,body.b2b .tile:hover,body.b2b .artcard:hover,body.b2b .tb-ct:hover{
  border-color:var(--b-acc);transform:none;box-shadow:0 4px 14px rgba(10,20,40,.10)}
body.b2b .catcard h3,body.b2b .tile__name,body.b2b .artcard h3{color:var(--b-ink)}
body.b2b .catcard p,body.b2b .tile__part,body.b2b .artcard p{color:var(--b-mut)}
body.b2b .catcard span{color:var(--b-acc2)}
body.b2b .catcard--auto::before{background:var(--b-acc)}
body.b2b .catcard__i{background:color-mix(in srgb, var(--b-acc) 16%, transparent);
  color:var(--b-acc);border-color:color-mix(in srgb, var(--b-acc) 34%, transparent)}
body.b2b .catcard__bg{opacity:.05}
body.b2b .tile__price,body.b2b .prow__now{color:var(--b-ink)}

/* buttons everywhere, including the ones inside blocks */
body.b2b .btn,body.b2b .btn--ghost{background:var(--b-acc);color:var(--b-accink);border:0;border-radius:4px}
body.b2b .btn:hover,body.b2b .btn--ghost:hover{filter:brightness(1.07);background:var(--b-acc);color:var(--b-accink)}

/* the promo band and the why-choose band pick up the design too */
body.b2b .tb-promo,body.b2b .tb-wc{background:var(--b-surf);border-color:var(--b-line)}
body.b2b .logostrip{background:var(--b-surf);border-color:var(--b-line)}

/* footer, from the utility-bar colour so the page closes where it opened */
body.b2b .cookiebar{background:var(--b-top);color:var(--b-topink);border-color:var(--b-line)}


/* ---- footer: one block, measured ink, nothing hard-coded ---- */
body.b2b .sitefoot{background:var(--b-top);color:var(--b-topink)}
body.b2b .sitefoot a,body.b2b .sitefoot p,body.b2b .sitefoot span,
body.b2b .sitefoot li,body.b2b .sitefoot address{color:var(--b-topink-soft)}
body.b2b .sitefoot a:hover{color:var(--b-topink)}
body.b2b .sitefoot h3,body.b2b .sitefoot h4,body.b2b .sitefoot b,
body.b2b .sitefoot strong{color:var(--b-topink)}
body.b2b .sitefoot hr,body.b2b .foot__bottom,body.b2b .sitefoot__bottom{
  border-color:color-mix(in srgb, var(--b-topink) 18%, transparent)}

/* ---- everything else that was still wearing the old theme ---- */
body.b2b .pagehead{background:var(--b-surf);border-bottom:1px solid var(--b-line)}
body.b2b .pagehead h1{color:var(--b-ink)}
body.b2b .crumbs,body.b2b .crumbs a{color:var(--b-mut)}
body.b2b .crumbs a:hover{color:var(--b-link)}
body.b2b .filters,body.b2b .facet,body.b2b .sidebar,body.b2b .panel{
  background:var(--b-surf);border-color:var(--b-line);color:var(--b-ink)}
body.b2b .pager a,body.b2b .pager span{border-color:var(--b-line);color:var(--b-ink);background:var(--b-surf)}
body.b2b .pager .is-current,body.b2b .pager [aria-current]{background:var(--b-acc);color:var(--b-accink);border-color:transparent}
body.b2b input,body.b2b select,body.b2b textarea{
  background:var(--b-surf);border-color:var(--b-line);color:var(--b-ink)}
body.b2b input:focus,body.b2b select:focus,body.b2b textarea:focus{
  outline:2px solid var(--b-acc);outline-offset:-1px}
body.b2b .msg{border-color:var(--b-line);background:var(--b-surf);color:var(--b-ink)}
body.b2b table th{background:var(--b-surf);color:var(--b-mut);border-color:var(--b-line)}
body.b2b table td{border-color:var(--b-line)}
body.b2b .tb-cattiles,body.b2b .tb-whychoose,body.b2b .marketrow{background:transparent}
body.b2b .slide,body.b2b .hero{border-color:var(--b-line)}
body.b2b .sitechat__panel{background:var(--b-surf);border-color:var(--b-line);color:var(--b-ink)}

/* category photo tiles keep their picture - only the frame is retinted */
body.b2b .tb-ct{background:var(--b-surf);border-color:var(--b-line)}
body.b2b .tb-ct__img{background:var(--b-bg);border-color:var(--b-line)}
body.b2b .tb-ct__b h3{color:var(--b-ink)}
body.b2b .tb-ct__n,body.b2b .tb-ct__b p{color:var(--b-mut)}


/* ---- elements whose colour is written inline by the markup ----------------
   Why-choose pills, promo bands and the auto category cards each carry their
   own colour in a style attribute, chosen per item in the admin. Under a
   design those read as a rainbow against one palette - the "nothing matches"
   look. An inline style beats any rule, so these are the one place !important
   is warranted. Turn the design off and the per-item colours return.        */
body.b2b .tb-wc__pill{background:var(--b-acc)!important;color:var(--b-accink)!important}
body.b2b .tb-wc__ic{color:var(--b-acc)!important}
body.b2b .tb-wc{background:var(--b-surf);border-color:var(--b-line)}
body.b2b .tb-promo{background:var(--b-hdr)!important;color:var(--b-hdrink)}
body.b2b .tb-promo h3,body.b2b .tb-promo p{color:var(--b-hdrink)}
body.b2b .tb-shop{background:var(--b-acc);color:var(--b-accink)}
body.b2b .tb-bi__i{background:color-mix(in srgb, var(--b-acc) 16%, transparent);
  color:var(--b-acc);border-color:color-mix(in srgb, var(--b-acc) 32%, transparent)}
body.b2b .tb-bi::before{background:var(--b-acc)}
body.b2b .catcard__i{background:color-mix(in srgb, var(--b-acc) 16%, transparent)!important;
  color:var(--b-acc)!important;border-color:color-mix(in srgb, var(--b-acc) 32%, transparent)!important}
body.b2b .catcard--auto::before{background:var(--b-acc)!important}
body.b2b .catcard--auto:hover .catcard__i{background:var(--b-acc)!important;color:var(--b-accink)!important}

/* prices: the strike-through and the live price both from the design */
body.b2b .tile__was,body.b2b .price__old,body.b2b .prow__was{color:var(--b-mut)}
body.b2b .tile__price,body.b2b .price__new,body.b2b .prow__now{color:var(--b-ink)}

/* the logo strips sit between bands, so they take the soft surface */
body.b2b .logostrip,body.b2b .logostrip--customers{background:var(--b-surf);border-color:var(--b-line)}


/* ============================================================================
   SOLID CARDS
   The content cards - Shop by category, Who we supply, Why choose - are filled
   with the design's own colour instead of sitting white on a tinted page, and
   their text colour is MEASURED against that fill, so it comes out black on a
   light colour and white on a dark one without anyone choosing.

   Product tiles and article cards are deliberately left on a light surface:
   they carry photographs, and a photograph on a navy card looks like a
   mistake. This is the line between "card" and "product".
   ============================================================================ */
body.b2b .catcard,body.b2b .tb-wc{
  background:var(--b-card);border-color:color-mix(in srgb, var(--b-cardink) 18%, transparent);
  color:var(--b-cardink)}
body.b2b .catcard h3,body.b2b .tb-wc h3,body.b2b .catcard span,
body.b2b .tb-wc__t{color:var(--b-cardink)}
body.b2b .catcard p,body.b2b .tb-wc p{color:var(--b-cardink-soft)}
body.b2b .catcard:hover,body.b2b .tb-wc:hover{
  background:color-mix(in srgb, var(--b-card) 88%, #000);border-color:var(--b-acc)}

/* the icon chip has to invert on a filled card, or it disappears into it */
body.b2b .catcard__i{
  background:color-mix(in srgb, var(--b-cardink) 16%, transparent)!important;
  color:var(--b-cardink)!important;
  border-color:color-mix(in srgb, var(--b-cardink) 30%, transparent)!important}
body.b2b .catcard--auto:hover .catcard__i{
  background:var(--b-acc)!important;color:var(--b-accink)!important}
body.b2b .catcard--auto::before{background:var(--b-acc)!important}
body.b2b .catcard__bg{color:var(--b-cardink);opacity:.07}
body.b2b .tb-wc__ic{color:var(--b-cardink)!important}
body.b2b .tb-wc__pill{
  background:color-mix(in srgb, var(--b-cardink) 15%, transparent)!important;
  color:var(--b-cardink)!important}

/* ---- header and footer on the SAME edge ----------------------------------
   theme.css floats the footer at --band-w, which is min(1240px, 100% - 48px),
   while every B2B bar and .wrap use --page-w at 100% - 40px. That is why the
   footer sat narrower than the header and did not line up. Under a design the
   footer becomes a full-width band like the header, with its inner grid on the
   same measurement as everything else. */
body.b2b .sitefoot,body.b2b footer.sitefoot{
  width:100%;max-width:none;margin:44px 0 0;border-radius:0}
body.b2b .sitefoot__grid,body.b2b .sitefoot__bar-in{
  width:min(var(--page-w),100% - var(--page-gutter));margin-inline:auto;
  padding-inline:var(--band-pad)}
body.b2b .logostrip,body.b2b .logostrip--customers{width:100%;max-width:none;border-radius:0}


/* ============================================================================
   SOLID CARDS, AND A FOOTER THAT LINES UP WITH THE HEADER
   ============================================================================ */

/* The footer is a floating rounded card in theme.css - width:var(--band-w),
   80px of top margin and a 30px radius - while a design's header runs edge to
   edge. Side by side they read as two different websites. Under a design the
   footer becomes a full-bleed band like the header, and its inner grid lines
   up on the same column as everything above it. */
body.b2b .sitefoot,body.b2b footer.sitefoot{
  width:100%;max-width:none;margin:0;border-radius:0;min-height:0}
body.b2b .sitefoot__grid,body.b2b .sitefoot__bar-in{
  width:min(var(--page-w),100% - var(--page-gutter));margin-inline:auto;
  padding-inline:var(--band-pad)}
body.b2b .sitefoot__bar{background:color-mix(in srgb, var(--b-topink) 8%, var(--b-top))}

/* SOLID CARDS. The category and market cards were white with a coloured hair
   line, which reads as timid next to a strong header. Filled with the design's
   accent they become the strongest thing on the page - and the text colour is
   MEASURED against that accent, so it is black on amber and white on red
   rather than one guess for all ten. Worst case across the ten designs is
   5.9:1, comfortably past the 4.5 AA needs. */
body.b2b .catcard--auto{
  background:var(--b-acc)!important;border-color:transparent!important;
  color:var(--b-accink)!important;box-shadow:none}
body.b2b .catcard--auto h3,body.b2b .catcard--auto p,body.b2b .catcard--auto span{
  color:var(--b-accink)!important}
body.b2b .catcard--auto p,body.b2b .catcard--auto span{opacity:.86}
body.b2b .catcard--auto::before{display:none!important}
body.b2b .catcard--auto .catcard__i{
  background:color-mix(in srgb, var(--b-accink) 16%, transparent)!important;
  color:var(--b-accink)!important;border-color:transparent!important}
body.b2b .catcard--auto .catcard__bg{color:var(--b-accink);opacity:.10}
body.b2b .catcard--auto:hover{
  background:color-mix(in srgb, var(--b-acc) 86%, #000)!important;transform:translateY(-3px)}

/* the why-choose cards go solid in the header colour, so the two families of
   card are distinct without either reverting to plain white */
body.b2b .tb-wc{
  background:var(--b-hdr)!important;border-color:transparent!important;color:var(--b-hdrink)}
body.b2b .tb-wc__t,body.b2b .tb-wc h3,body.b2b .tb-wc p{color:var(--b-hdrink);opacity:.9}
body.b2b .tb-wc__pill{
  background:color-mix(in srgb, var(--b-hdrink) 18%, transparent)!important;
  color:var(--b-hdrink)!important}
body.b2b .tb-wc__ic{color:var(--b-hdrink)!important;opacity:.9}

/* photo tiles keep their picture; only the caption plate goes solid */
body.b2b .tb-ct{background:var(--b-surf);border-color:var(--b-line)}
body.b2b .tb-ct__b{background:var(--b-acc);color:var(--b-accink)}
body.b2b .tb-ct__b h3,body.b2b .tb-ct__n{color:var(--b-accink)}
body.b2b .tb-ct__n{opacity:.85}


/* ---- brand chips ---- */
body.b2b .brandchips a,body.b2b .brandlist a,body.b2b .chip{
  background:var(--b-surf);border:1px solid var(--b-line);color:var(--b-ink)}
body.b2b .brandchips a:hover,body.b2b .brandlist a:hover,body.b2b .chip:hover{
  background:var(--b-acc);border-color:transparent;color:var(--b-accink)}


/* ============================================================================
   COLOUR COMBINATIONS
   Applied on top of whichever design is chosen. They retint the brand surfaces
   - utility bar, masthead, accent, links - and leave the design's page
   surfaces, type and structure alone, so one combination reads correctly on
   all ten. "Design default" sets nothing, so each design keeps its own.
   These come AFTER the design blocks, so they win on equal specificity.
   --b-accink is chosen by MEASURING contrast against the accent, not by a
   luminance guess: on a mid-tone orange, white text scores 2.1:1 and fails,
   near-black scores 7.4:1 and passes.
   ============================================================================ */
body.bp-navy-orange{
  --b-top:#131921; --b-hdr:#232f3e; --b-acc:#ff9900; --b-acc2:#febd69;
  --b-link:#007185; --b-accink:#111111;
  --b-topink:#ffffff; --b-topink-soft:rgba(255,255,255,.78);
  --b-hdrink:#ffffff; --b-hdrink-soft:rgba(255,255,255,.78);
  --b-card:#232f3e; --b-cardink:#ffffff; --b-cardink-soft:rgba(255,255,255,.80);
}
body.bp-blue-yellow{
  --b-top:#0053b3; --b-hdr:#0071dc; --b-acc:#ffc220; --b-acc2:#ffe57f;
  --b-link:#0071dc; --b-accink:#111111;
  --b-topink:#ffffff; --b-topink-soft:rgba(255,255,255,.78);
  --b-hdrink:#ffffff; --b-hdrink-soft:rgba(255,255,255,.78);
  --b-card:#0071dc; --b-cardink:#ffffff; --b-cardink-soft:rgba(255,255,255,.80);
}
body.bp-red-graphite{
  --b-top:#3a3a3a; --b-hdr:#c8102e; --b-acc:#c8102e; --b-acc2:#ff5c6e;
  --b-link:#0b5cab; --b-accink:#ffffff;
  --b-topink:#ffffff; --b-topink-soft:rgba(255,255,255,.78);
  --b-hdrink:#ffffff; --b-hdrink-soft:rgba(255,255,255,.78);
  --b-card:#c8102e; --b-cardink:#ffffff; --b-cardink-soft:rgba(255,255,255,.80);
}
body.bp-black-amber{
  --b-top:#0f0f0f; --b-hdr:#1c1c1c; --b-acc:#ff6a00; --b-acc2:#ff9d5c;
  --b-link:#0b7bd0; --b-accink:#111111;
  --b-topink:#ffffff; --b-topink-soft:rgba(255,255,255,.78);
  --b-hdrink:#ffffff; --b-hdrink-soft:rgba(255,255,255,.78);
  --b-card:#1c1c1c; --b-cardink:#ffffff; --b-cardink-soft:rgba(255,255,255,.80);
}
body.bp-teal-gold{
  --b-top:#0d3b3b; --b-hdr:#125e5e; --b-acc:#c9a227; --b-acc2:#e3c766;
  --b-link:#0f6f9e; --b-accink:#111111;
  --b-topink:#ffffff; --b-topink-soft:rgba(255,255,255,.78);
  --b-hdrink:#ffffff; --b-hdrink-soft:rgba(255,255,255,.78);
  --b-card:#125e5e; --b-cardink:#ffffff; --b-cardink-soft:rgba(255,255,255,.80);
}
body.bp-forest-sand{
  --b-top:#143325; --b-hdr:#1b4d3e; --b-acc:#d8a657; --b-acc2:#eec98a;
  --b-link:#12639e; --b-accink:#111111;
  --b-topink:#ffffff; --b-topink-soft:rgba(255,255,255,.78);
  --b-hdrink:#ffffff; --b-hdrink-soft:rgba(255,255,255,.78);
  --b-card:#1b4d3e; --b-cardink:#ffffff; --b-cardink-soft:rgba(255,255,255,.80);
}
body.bp-slate-cyan{
  --b-top:#1e2733; --b-hdr:#2b3849; --b-acc:#00a3e0; --b-acc2:#6fd3f5;
  --b-link:#0077b6; --b-accink:#111111;
  --b-topink:#ffffff; --b-topink-soft:rgba(255,255,255,.78);
  --b-hdrink:#ffffff; --b-hdrink-soft:rgba(255,255,255,.78);
  --b-card:#2b3849; --b-cardink:#ffffff; --b-cardink-soft:rgba(255,255,255,.80);
}
body.bp-maroon-cream{
  --b-top:#4a1020; --b-hdr:#6d1a2f; --b-acc:#e0b062; --b-acc2:#f0d3a0;
  --b-link:#8a4b2a; --b-accink:#111111;
  --b-topink:#ffffff; --b-topink-soft:rgba(255,255,255,.78);
  --b-hdrink:#ffffff; --b-hdrink-soft:rgba(255,255,255,.78);
  --b-card:#6d1a2f; --b-cardink:#ffffff; --b-cardink-soft:rgba(255,255,255,.80);
}