/* ===========================================================================
   BRANDLAB — brand tokens, single source of truth for colour.
   ---------------------------------------------------------------------------
   Every customer page loads this. Change a colour HERE and it changes
   everywhere, instead of hunting through six inline <style> blocks.

   Derived from the DTF splat mark (cyan -> violet -> magenta), inverted to a
   LIGHT theme on Luke's call 2026-08-20. Replaces the old black/orange store
   identity so the store, the wholesale DTF page and the staff tools all speak
   one language.

   ⚠️ CACHING: link this as  brand.css?v=YYYYMMDD  and bump the date when you
   change it. Same trick config.js uses. Without it Cloudflare can serve the old
   palette for hours.

   ⚠️ CONTRAST: the bright fills fail legibility as body text on white.
   #18A8E8 on white is about 2.9:1, well under the 4.5:1 needed. Use the -ink
   variants for text and links, the bright ones for fills, bars and large type.
   =========================================================================== */
:root{
  /* --- surfaces -------------------------------------------------------
     NOT pure #FFF. Flat white read as sterile and clinical against the
     splat accents, so the page sits on a barely-warm off-white. Warm enough
     to feel like paper, neutral enough not to muddy the cool magenta/cyan. */
  --bl-paper:#FAF9F6;        /* page background, warm off-white */
  --bl-paper-2:#FFFFFF;      /* true white, for cards that must lift off the page */
  --bl-well:#F1EFEA;         /* raised card / input well */
  --bl-well-2:#E7E4DD;       /* pressed / hover well */
  --bl-carbon:#0A0A0E;       /* full-bleed dark bands (marquee, footer) */

  /* --- type ----------------------------------------------------------- */
  --bl-ink:#0A0A0E;          /* headlines + body */
  --bl-ink-2:#3A3A46;        /* secondary copy */
  --bl-ink-3:#6B6B78;        /* muted, captions, placeholders */

  /* --- lines ---------------------------------------------------------- */
  --bl-line:rgba(10,10,14,.12);
  --bl-line-2:rgba(10,10,14,.22);

  /* --- brand accents, FILLS (bars, buttons, large type) ---------------- */
  --bl-magenta:#E81088;
  --bl-violet:#7B3FF2;
  --bl-cyan:#18A8E8;

  /* --- brand accents, TEXT SAFE (>=4.5:1 on white) --------------------- */
  --bl-magenta-ink:#C4076E;
  --bl-violet-ink:#6A2FE0;
  --bl-cyan-ink:#0B7FB8;

  /* --- status --------------------------------------------------------- */
  --bl-ok:#0F9D58;
  --bl-warn:#D93025;

  /* --- the splat gradient, for hero washes and rules ------------------- */
  --bl-splat:linear-gradient(90deg,var(--bl-magenta),var(--bl-violet),var(--bl-cyan));
}

/* ===========================================================================
   SITE CHROME — shared top nav + footer sitemap for the interior pages
   ---------------------------------------------------------------------------
   Added 2026-08-23. Before this, catalog-browse / order / q / portal all had a
   logo that linked to catalog-browse.html, so a customer who entered the
   catalog had NO route back to the marketing site. They were stuck. Every one
   of those pages now carries the same slim nav and the same footer, and the
   logo goes home like it does on every normal website.

   The nav sits ABOVE each page's own header rather than replacing it, so the
   catalog keeps its search box and cart button untouched.
   =========================================================================== */
.blnav{background:var(--bl-paper);border-bottom:1px solid var(--bl-line);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:9px 22px;flex-wrap:wrap;position:relative;z-index:30}
.blnav-logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.blnav-logo img{height:26px;width:auto;display:block}
.blnav-links{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  font-family:'Archivo Narrow',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:12.5px}
.blnav-links a{color:var(--bl-ink-2);text-decoration:none;transition:.15s;white-space:nowrap}
.blnav-links a:hover{color:var(--bl-magenta-ink)}
.blnav-links a.dtf{color:var(--bl-cyan-ink)}
.blnav-links a.tel{color:var(--bl-ink);font-weight:700}
.blnav-links a.signin{background:var(--bl-magenta);color:#fff;padding:8px 16px;border-radius:999px;font-weight:800;letter-spacing:.04em}
.blnav-links a.signin:hover{background:var(--bl-magenta-ink);color:#fff}
@media(max-width:820px){
  .blnav{padding:8px 14px;gap:10px}
  .blnav-links{gap:14px;font-size:11.5px}
}

/* --- footer sitemap ------------------------------------------------------ */
.blfoot{background:var(--bl-carbon);color:#fff;margin-top:70px;
  padding:52px 22px 30px;position:relative;z-index:30}
.blfoot-in{max-width:1240px;margin:0 auto;display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;gap:38px}
.blfoot h5{font-family:'Archivo Narrow',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;font-size:12px;
  color:var(--bl-cyan);margin-bottom:14px}
.blfoot a{display:block;color:rgba(255,255,255,.74);text-decoration:none;
  font-size:14.5px;padding:5px 0;transition:.15s}
.blfoot a:hover{color:#fff}
.blfoot .mark{font-family:'Anton',sans-serif;font-size:30px;text-transform:uppercase;
  letter-spacing:.02em;color:#fff;text-decoration:none;display:inline-block;margin-bottom:14px}
.blfoot .mark b{color:var(--bl-magenta);font-weight:400}
.blfoot .addr{color:rgba(255,255,255,.74);font-size:14.5px;line-height:1.75}
.blfoot .addr a{display:inline;padding:0}
.blfoot-bottom{max-width:1240px;margin:34px auto 0;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:10px;font-size:13px;color:rgba(255,255,255,.55)}
@media(max-width:820px){ .blfoot-in{grid-template-columns:1fr 1fr;gap:26px} }
@media(max-width:520px){ .blfoot-in{grid-template-columns:1fr} }