:root{
    --ink:#1C1C1C;
    --muted:#5B5B5B;
    --accent:#5A2E22;
    --line:#E6E6E6;
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  a{ text-decoration:none; }
  img{ display:block; }
 
  .site-header{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:#fff;
    position:sticky; top:0; z-index:100;
  }
  .header-inner{
    max-width:1400px; margin:0 auto;
    display:flex; align-items:center; gap:48px;
    padding:22px 40px;
  }
 
  /* ---------- Logo group (Listers + optional brand) ---------- */
  .logo-group{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
  .logo-listers{ height:42px; width:auto; }
  .logo-divider{ width:1px; height:26px; background:var(--line); }
  .logo-brand{ height:32px; width:auto; }
 
  /* Fallback text wordmark — shown only if the image fails to load */
  .logo-listers-text{
    font-weight:700; font-size:18px; letter-spacing:6px; color:var(--ink);
    white-space:nowrap; display:none;
  }
  .logo-listers[src=""], .logo-listers:not([src]){ display:none; }
 
  /* ---------- Primary nav ---------- */
  nav.primary{ display:flex; align-items:center; gap:34px;
    font-family: "Plus Jakarta Sans", sans-serif; }
  nav.primary a{
    font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase;
    color:var(--muted); transition:color 0.15s ease;
  }
  nav.primary a:hover{ color:var(--ink); }
  nav.primary a.accent{ color:var(--accent); }
  nav.primary a.accent:hover{ opacity:0.8; color:var(--accent); }
 
  .spacer{ flex:1; }
 
  .retailers{
    display:flex; align-items:center; gap:6px; flex-shrink:0;
    font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase;
    color:var(--muted);
    font-family: "Plus Jakarta Sans", sans-serif;
  }
  .retailers:hover{ color:var(--ink); }
  .retailers svg{ flex-shrink:0; }
 
  /* ---------- Mobile menu toggle ---------- */
  .menu-toggle{
    display:none; flex-shrink:0;
    width:32px; height:32px; border:none; background:none; cursor:pointer;
    flex-direction:column; justify-content:center; gap:5px; padding:0;
  }
  .menu-toggle span{ display:block; height:2px; width:100%; background:var(--ink); transition:transform 0.2s ease, opacity 0.2s ease; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
 
  /* ---------- Responsive ---------- */
  @media (max-width:960px){
    .header-inner{ padding:18px 24px; gap:20px; flex-wrap:wrap; }
    .menu-toggle{ display:flex; order:3; margin-left:auto; }
    .retailers{ order:2; }
    .logo-group{ order:1; }
 
    nav.primary{
      order:4;
      width:100%;
      flex-direction:column;
      align-items:flex-start;
      gap:0;
      max-height:0;
      overflow:hidden;
      transition:max-height 0.25s ease;
    }
    nav.primary.open{ max-height:320px; }
    nav.primary a{
      width:100%; padding:14px 0; border-top:1px solid var(--line); font-size:13px;
    }
    .spacer{ display:none; }
  }
 
  @media (max-width:480px){
    .header-inner{ padding:16px 18px; }
    .logo-listers{ height:18px; }
    .logo-brand{ height:18px; }
    .retailers span.retailers-label{ display:none; }
  }
 
  /* Demo page filler so sticky header behaviour is visible */
  .demo-note{ max-width:1400px; margin:32px auto; padding:0 40px; font-family:Arial, sans-serif; font-size:13px; color:#777; }