.esl-topbar { --esl-accent:#F77205; --esl-accent2:#F78B33; --esl-accent-soft:#F8BA7D; --esl-cream:#FFF8EE; --esl-deep:#1A1A1A; --esl-card:#FFFFFF; --esl-muted:rgba(26,26,26,.62); --esl-display:'Bricolage Grotesque',sans-serif; --esl-sans:'Plus Jakarta Sans',sans-serif; --esl-mono:'JetBrains Mono',monospace;
    position: sticky; top: 0; z-index: 1000; background: var(--esl-cream); border-bottom: 2px solid var(--esl-deep);
    font-family: var(--esl-sans); color: var(--esl-deep); font-size: 15px; line-height: 1.5;
  }
  .esl-topbar *, .esl-topbar *::before, .esl-topbar *::after { box-sizing: border-box; }
  .esl-topbar a { color: inherit; text-decoration: none; }
  .esl-topbar__inner { max-width: 1320px; margin: 0 auto; height: 72px; display: flex; align-items: center; gap: 24px; padding: 0 32px; position: relative; }
  .esl-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .esl-logo__glyph { position: relative; width: 42px; height: 42px; border-radius: 12px; background: var(--esl-accent); border: 2px solid var(--esl-deep); box-shadow: 3px 3px 0 var(--esl-deep); }
  .esl-logo__eye { position: absolute; top: 11px; width: 5px; height: 8px; border-radius: 3px; background: var(--esl-cream); }
  .esl-logo__eye--l { left: 9px; }
  .esl-logo__eye--r { right: 9px; }
  .esl-logo__smile { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 18px; height: 8px; border-bottom: 2.5px solid var(--esl-cream); border-radius: 0 0 9px 9px; }
  .esl-logo__word { font-family: var(--esl-display); font-weight: 800; font-size: 28px; letter-spacing: -1px; line-height: 1; }
  .esl-logo__word span { color: var(--esl-accent); }
  .esl-nav { display: flex; align-items: center; gap: 6px; margin-left: 12px; }
  .esl-nav__item { padding: 8px 14px; border-radius: 12px; background: transparent; border: 2px solid transparent; font-weight: 700; font-size: 14.5px; cursor: default; display: flex; align-items: center; gap: 5px; transition: transform .12s ease, background .12s ease, border-color .12s ease; user-select: none; outline: none; }
  .esl-nav__item:hover, .esl-nav__item.is-open, .esl-nav__item:focus { background: var(--esl-accent-soft); border-color: var(--esl-deep); transform: translate(-1px,-1px); }
  .esl-nav__chev { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .esl-grow { flex: 1; }
  .esl-streak { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--esl-accent-soft); border: 2px solid var(--esl-deep); font-weight: 700; font-size: 13px; }
  .esl-signin { font-size: 14px; font-weight: 700; cursor: pointer; }
  .esl-cta { background: var(--esl-accent); color: #fff; padding: 11px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; border: 2px solid var(--esl-deep); box-shadow: 4px 4px 0 var(--esl-deep); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
  .esl-mega-wrap { position: absolute; left: 0; right: 0; top: 64px; display: flex; justify-content: center; pointer-events: none; padding: 0 32px; }
  .esl-mega { width: 100%; max-width: 1100px; background: var(--esl-card); border: 2px solid var(--esl-deep); border-radius: 20px; box-shadow: 6px 6px 0 var(--esl-deep); padding: 28px 32px; display: none; grid-template-columns: 320px 1fr 1fr 1fr; gap: 32px; pointer-events: auto; }
  .esl-mega.is-open { display: grid; }
  .esl-mega__intro { background: var(--esl-accent-soft); border-radius: 14px; padding: 20px 22px; border: 2px solid var(--esl-deep); display: flex; flex-direction: column; }
  .esl-mega__section { font-family: var(--esl-mono); font-size: 11px; color: var(--esl-accent); letter-spacing: 1.4px; margin-bottom: 10px; font-weight: 700; }
  .esl-mega__title { font-family: var(--esl-display); font-weight: 700; font-size: 26px; line-height: 1.05; letter-spacing: -0.6px; margin-bottom: 10px; }
  .esl-mega__blurb { font-size: 13.5px; line-height: 1.5; margin: 0 0 20px; }
  .esl-mega__cta { margin-top: auto; align-self: flex-start; background: var(--esl-accent); color: #fff; padding: 11px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; border: 2px solid var(--esl-deep); box-shadow: 4px 4px 0 var(--esl-deep); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
  .esl-mega__col-head { font-family: var(--esl-mono); font-size: 11px; color: var(--esl-accent); letter-spacing: 1.4px; margin-bottom: 14px; font-weight: 700; }
  .esl-mega__list { display: flex; flex-direction: column; gap: 6px; }
  .esl-mega__link { font-size: 14px; font-weight: 600; padding: 7px 10px; border-radius: 8px; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: background .12s ease; color: var(--esl-deep); }
  .esl-mega__link:hover { background: var(--esl-cream); }
  .esl-mega__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--esl-accent); flex-shrink: 0; }

  /* Grayed-out subcategory links — non-clickable, awaiting content. */
  .esl-mega__link--soon {
      cursor: default;
      opacity: .42;
      color: var(--esl-deep);
      pointer-events: none;
  }
  .esl-mega__link--soon:hover { background: transparent; }

  /* "Coming soon" footer per dropdown column. */
  .esl-mega__soon-tag {
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px dashed rgba(26,26,26,.18);
      font-family: var(--esl-mono);
      font-size: 10.5px;
      letter-spacing: .12em;
      color: var(--esl-accent);
      text-transform: uppercase;
      font-weight: 700;
      text-align: center;
  }

/* ════════════════════════════════════════════════════════════
   Suppress the theme's old header stack so the plugin's
   .esl-topbar is the only banner on the page.
   Targets three specific theme elements by their stable IDs/
   aria-label — won't affect anything else.
   ════════════════════════════════════════════════════════════ */
#tv-topbar,
#tv-site-header,
nav[aria-label="Primary Menu"] {
    display: none !important;
}