/* ============================================================
   EDITORIAL THEME — storefront design system.
   TOKEN CONTRACT every theme MUST define (in :root and html.dark):
     --paper, --paper-2, --ink, --ink-2, --ink-soft, --rule, --rule-soft, --noise
   plus body base styling and the shared component classes:
     .font-display, .display-italic, .ed-eyebrow, .section-eyebrow, .text-gradient-theme
   References --theme-* (accent color) from theme-generator.php (separate axis).
   ============================================================ */
    /* ── Editorial design system ── */
    :root {
      --font-display: 'Fraunces', Georgia, serif;
      --paper:        #fbf9f4;
      --paper-2:      #f3efe6;
      --ink:          #15131a;
      --ink-2:        #2d2933;
      --ink-soft:     #57525e;
      --rule:         rgba(21, 19, 26, 0.10);
      --rule-soft:    rgba(21, 19, 26, 0.06);
      --noise:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.045 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
      /* Page backdrop — restraint is the identity: paper + faint grain only. */
      --page-bg:      var(--noise) repeat, var(--paper);
      --notify-accent: var(--theme-500);   /* unified popup engine accent — theme-generator.php's site-wide accent axis */
    }
    html.dark {
      --paper:        #0a0a0c;
      --paper-2:      #111114;
      --ink:          #f4efe2;
      --ink-2:        #d8d1c0;
      --ink-soft:     #8b8595;
      --rule:         rgba(244, 239, 226, 0.10);
      --rule-soft:    rgba(244, 239, 226, 0.06);
      /* Dark backdrop — one near-imperceptible top vignette so pure black
         isn't a void. Grain dropped (invisible on near-black). */
      --page-bg:
        radial-gradient(1400px 900px at 50% -120px, rgba(244,239,226,0.035), transparent 62%) no-repeat,
        var(--paper);
    }

    body { background: var(--paper); color: var(--ink); }

    /* Display headlines use Inter */
    .font-display, h1.display, h2.display, h3.display {
      font-family: 'Inter', system-ui, sans-serif;
      letter-spacing: -0.02em;
    }
    .display-italic {
      font-style: italic;
    }
    .text-gradient-theme {
      background: linear-gradient(115deg, var(--theme-500) 0%, var(--theme-600) 48%, #d97757 110%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    /* Small caps eyebrow */
    .ed-eyebrow {
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.22em;
      color: var(--ink-soft);
    }

    /* Section eyebrow — mono folio with leading line */
    .section-eyebrow {
      display: inline-flex; align-items: center; gap: 0.6rem;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.22em;
      color: var(--ink-soft);
      margin-bottom: 0.7rem;
    }
    .section-eyebrow::before {
      content: ''; width: 1.75rem; height: 1px;
      background: var(--ink-soft); opacity: 0.6; flex-shrink: 0;
    }

    /* View-all hairline arrow link */
    .btn-view-all {
      display: inline-flex; align-items: center; gap: 0.45rem;
      font-family: 'Inter', sans-serif;
      font-size: 0.78rem; font-weight: 600;
      letter-spacing: 0.04em;
      white-space: nowrap; flex-shrink: 0;
      color: var(--ink);
      padding-bottom: 3px;
      border-bottom: 1px solid var(--ink);
      text-decoration: none;
      transition: gap 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    }
    .btn-view-all svg { transition: transform 0.2s ease; }
    .btn-view-all:hover { gap: 0.75rem; color: var(--ink-soft); border-bottom-color: var(--ink-soft); }
    [dir="rtl"] .btn-view-all svg { transform: scaleX(-1); }

    .ed-rule { background-color: var(--rule); }
    .ed-rule-soft { background-color: var(--rule-soft); }

    /* Paper grain overlay (used on hero) */
    .ed-grain::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background-image: var(--noise);
      opacity: 0.55; mix-blend-mode: multiply;
    }
    html.dark .ed-grain::before { mix-blend-mode: screen; opacity: 0.4; }

    /* Article-style number ornament */
    .ed-folio {
      font-family: 'Inter', sans-serif;
      font-style: italic;
      font-weight: 300;
      color: var(--ink-soft);
    }

    /* Header search — editorial soft pill.
       Overrides the legacy #desktopHeader .hdr-search greys (assets/css/header.css)
       with theme tokens. ID-scoped to beat that rule; loaded after it, so equal
       specificity resolves in the theme's favour. */
    .ed-search {
      background: transparent;
      border: none;
      transition: border-color 0.18s ease, background 0.18s ease;
    }
    #desktopHeader .hdr-search {
      background: var(--paper-2);
      border: 1px solid var(--rule);
      border-radius: 12px;
    }
    #desktopHeader .hdr-search:hover {
      background: var(--paper);
      border-color: rgba(var(--theme-500-rgb), 0.28);
    }
    #desktopHeader .hdr-search:focus-within {
      background: var(--paper);
      border-color: var(--theme-500);
      box-shadow: 0 0 0 3px rgba(var(--theme-500-rgb), 0.12);
    }
    /* Dark: token-driven; html.dark selector out-specifies header.css's .dark rule. */
    html.dark #desktopHeader .hdr-search {
      background: var(--paper-2);
      border-color: var(--rule);
    }
    html.dark #desktopHeader .hdr-search:hover {
      background: var(--paper-3, var(--paper-2));
      border-color: rgba(var(--theme-500-rgb), 0.3);
    }
    html.dark #desktopHeader .hdr-search:focus-within {
      background: var(--paper-3, var(--paper-2));
      border-color: var(--theme-500);
    }

    /* ── Contextual sub-nav — sibling wayfinding strip on cluster pages ──
       Appears below the desktop header; never touches the primary floating pill. */
    .ed-subnav {
      align-items: center;
      background: var(--paper-2);
      border-bottom: 1px solid var(--rule);
    }
    .ed-subnav-inner {
      display: flex;
      align-items: center;
      gap: 1.25rem;
      width: 100%;
      padding: 0.6rem 2rem;
    }
    @media (min-width: 1280px) {
      .ed-subnav-inner { padding-left: 2.5rem; padding-right: 2.5rem; }
    }
    .ed-subnav-eyebrow {
      flex-shrink: 0;
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--ink-soft);
      white-space: nowrap;
      padding-right: 1.25rem;
      border-right: 1px solid var(--rule);
    }
    .ed-subnav-items {
      display: flex;
      align-items: center;
      gap: 0.15rem;
      flex-wrap: wrap;
    }
    .ed-subnav-item {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.44rem 0.8rem;
      border-radius: 8px;
      font-family: 'Inter', sans-serif;
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--ink-soft);
      text-decoration: none;
      border: 1px solid transparent;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .ed-subnav-item svg {
      width: 15px; height: 15px;
      fill: none; stroke: currentColor; stroke-width: 1.7;
      flex-shrink: 0;
    }
    .ed-subnav-item:hover {
      color: var(--ink);
      background: var(--paper);
    }
    .ed-subnav-item.active {
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink);
    }
    .ed-subnav-item:focus-visible {
      outline: 2px solid var(--theme-500);
      outline-offset: 2px;
    }

    /* Pill links / buttons */
    .ed-link-arrow {
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-family: 'Inter', sans-serif;
      font-size: 0.78rem; font-weight: 600;
      color: var(--ink); text-decoration: none;
      padding-bottom: 2px;
      border-bottom: 1px solid var(--ink);
      transition: gap 0.18s ease, color 0.18s ease;
    }
    .ed-link-arrow:hover { gap: 0.7rem; color: var(--theme-600); border-bottom-color: var(--theme-600); }
    html.dark .ed-link-arrow:hover { color: var(--theme-300); border-bottom-color: var(--theme-300); }

    /* Primary CTA — letterpress feel */
    .ed-btn-primary {
      display: inline-flex; align-items: center; gap: 0.55rem;
      padding: 0.85rem 1.6rem;
      white-space: nowrap;
      font-family: 'Inter', sans-serif;
      font-size: 0.85rem; font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--paper);
      background: var(--ink);
      border-radius: 999px;
      border: 1px solid var(--ink);
      transition: transform 0.2s ease, background 0.2s ease;
    }
    .ed-btn-primary:hover {
      background: var(--theme-600); border-color: var(--theme-600);
      transform: translateY(-1px);
    }
    html.dark .ed-btn-primary { color: var(--paper); }
    html.dark .ed-btn-primary:hover { color: var(--paper); }
    /* Image banners are dark in either mode, so the ink button would vanish on them. */
    :is([data-bnr-layout="cover"], [data-bnr-layout="product"]) .ed-btn-primary { color: #111; background: #fff; border-color: #fff; }
    :is([data-bnr-layout="cover"], [data-bnr-layout="product"]) .ed-btn-primary:hover { color: #fff; background: var(--theme-600); border-color: var(--theme-600); }

    .ed-btn-secondary {
      display: inline-flex; align-items: center; gap: 0.55rem;
      padding: 0.8rem 1.5rem;
      font-family: 'Inter', sans-serif;
      font-size: 0.82rem; font-weight: 600;
      color: var(--ink);
      background: transparent;
      border-radius: 999px;
      border: 1px solid var(--rule);
      transition: background 0.18s ease, border-color 0.18s ease;
    }
    .ed-btn-secondary:hover { background: var(--paper-2); border-color: var(--ink); }

    /* Shared pill CTA — letterpress; hover inverts ink/paper */
    .ed-plan-cta {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
      padding: 0.8rem 1.5rem; border-radius: 999px;
      font-family: 'Inter', sans-serif;
      font-size: 0.85rem; font-weight: 600;
      background: var(--ink); color: var(--paper);
      border: 1px solid var(--ink);
      transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
      text-decoration: none;
    }
    .ed-plan-cta:hover { background: var(--paper); color: var(--ink); transform: translateY(-1px); }
    /* Override dynamic-theme.css .dark button { color: var(--text-primary) } which has higher specificity (0,1,1) */
    html.dark .ed-plan-cta { color: var(--paper); }
    html.dark .ed-plan-cta:hover { color: var(--ink); }

    /* Editorial plan/dossier cards */
    .ed-plan {
      background: var(--paper);
      border: 1px solid var(--rule);
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .ed-plan:hover { border-color: var(--ink); box-shadow: 0 24px 50px -24px rgba(0,0,0,0.18); }

    .ed-plan-featured {
      position: relative;
      background: var(--ink); color: var(--paper);
      border: 1px solid var(--ink);
      overflow: hidden;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .ed-plan-featured:hover { box-shadow: 0 30px 60px -24px rgba(0,0,0,0.35); }
    html.dark .ed-plan-featured { background: var(--paper-2); color: var(--ink); border-color: var(--rule); }
    .ed-plan-hairline { border-color: var(--rule); }
    .ed-plan-featured .ed-plan-hairline { border-color: rgba(255,255,255,0.16); }
    html.dark .ed-plan-featured .ed-plan-hairline { border-color: var(--rule); }
    .ed-plan-featured .ed-plan-cta { background: var(--paper); color: var(--ink); border-color: var(--paper); }
    .ed-plan-featured .ed-plan-cta:hover { background: transparent; color: var(--paper); border-color: var(--paper); }
    html.dark .ed-plan-featured .ed-plan-cta { background: var(--ink); color: var(--paper); border-color: var(--ink); }
    html.dark .ed-plan-featured .ed-plan-cta:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
    /* Force correct text colour on featured card buttons in dark mode (beats dynamic-theme .dark button) */
    html.dark .ed-plan-featured button.ed-plan-cta { color: var(--paper); }

    /* Shop card — hairline frame */
    .shop-card {
      background: var(--paper);
      border: 1px solid var(--rule);
      transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .shop-card:hover { border-color: var(--ink); box-shadow: 0 24px 50px -24px rgba(0,0,0,0.16); }

    /* Header top status strip */
    .ed-status {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 10.5px;
      letter-spacing: 0.08em;
      color: var(--ink-soft);
    }

    /* Primary nav — rendered inline in the status strip (menu_tree('primary_header')) */
    .ed-topnav-link { color: var(--ink-soft); text-decoration: none; transition: color 0.16s ease; }
    .ed-topnav-link:hover { color: var(--ink); }
    .ed-topnav-link.active { color: var(--theme-600); }
    html.dark .ed-topnav-link.active { color: var(--theme-300); }

    /* Drawer typography */
    .drawer-section-label {
      display: flex; align-items: center; gap: 0.6rem;
      font-family: 'Inter', sans-serif;
      font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.22em;
      color: var(--ink-soft);
      padding: 1.1rem 1.5rem 0.4rem;
    }
    .drawer-section-label::after {
      content: ''; flex: 1; height: 1px; background: var(--rule);
    }
    .drawer-nav-row {
      display: flex; align-items: center; gap: 0.85rem;
      padding: 0.65rem 1.5rem;
      font-family: 'Inter', sans-serif;
      font-size: 0.92rem; font-weight: 500;
      color: var(--ink-2);
      transition: background 0.15s ease, color 0.15s ease;
      text-decoration: none;
    }
    .drawer-nav-row:hover { background: var(--paper-2); color: var(--ink); }
    .drawer-logout, .drawer-login {
      display: flex; align-items: center; justify-content: center; gap: 0.5rem;
      margin: 1rem 1.5rem 1.25rem;
      padding: 0.85rem 1rem;
      border-radius: 999px;
      font-family: 'Inter', sans-serif;
      font-size: 0.86rem; font-weight: 600;
      text-decoration: none;
      transition: background 0.18s ease;
    }
    .drawer-logout { color: #b8431a; border: 1px solid rgba(184,67,26,0.25); }
    .drawer-logout:hover { background: rgba(184,67,26,0.06); }
    .drawer-login { color: var(--paper); background: var(--ink); }
    .drawer-login:hover { background: var(--theme-600); }
    html.dark .drawer-logout { color: #f4a17b; border-color: rgba(244,161,123,0.20); }

    /* Mobile glass header refined */
    .mobile-glass-header {
      background: rgba(251,249,244,0.85);
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      border-bottom: 1px solid var(--rule);
    }
    html.dark .mobile-glass-header {
      background: rgba(10,10,12,0.78);
    }

    /* Avatar ring (editorial — thin gold) */
    .ed-avatar-ring {
      box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px rgba(var(--theme-500-rgb), 0.55);
    }

    /* Hide Alpine cloak */
    [x-cloak] { display: none !important; }

    /* Premium dropdown */
    .ed-dropdown {
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: 1.25rem;
      box-shadow: 0 30px 60px -20px rgba(0,0,0,0.18), 0 8px 20px -12px rgba(0,0,0,0.12);
      overflow: hidden;
    }
    html.dark .ed-dropdown { background: #131316; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55); }

    .ed-dropdown-item {
      display: flex; align-items: center; gap: 0.85rem;
      padding: 0.7rem 1rem;
      font-family: 'Inter', sans-serif;
      font-size: 0.88rem; font-weight: 500;
      color: var(--ink-2);
      text-decoration: none;
      transition: background 0.14s ease, color 0.14s ease;
    }
    .ed-dropdown-item:hover { background: var(--paper-2); color: var(--ink); }
    html.dark .ed-dropdown-item:hover { background: rgba(255,255,255,0.04); color: var(--ink); }

    .ed-section-cap {
      font-family: 'Inter', sans-serif;
      font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.2em;
      color: var(--ink-soft);
      padding: 0.9rem 1rem 0.4rem;
    }

    /* ── Dark/light toggle: "press roller" ──
       header.js (runEditorialRollerTransition) snaps the page to grayscale
       instantly (.ed-roller-grayscale on <html>, zero transition), then
       drives #pxThemeFx purely via inline style + a plain `transform:
       translateX` transition. A solid black bar sweeps in from the left,
       covers the screen, and keeps moving off the right edge; the mode
       swap and the grayscale-to-color snap both happen the instant it
       fully covers, while hidden. Brutalist and linear — no fades, a hard
       cut rather than a dissolve. */
    .ed-roller-grayscale {
      filter: grayscale(1);
      transition: none !important;
    }
    .px-fx--editorial-roller {
      background: #000;
    }

    @media (prefers-reduced-motion: reduce) {
      .ed-roller-grayscale { filter: none !important; }
      .px-fx--editorial-roller { transition: none !important; }
    }

    /* The wallet, earn and games heroes are painted with --ink and mix
       --paper lettering with fixed light text, which only works the way
       round light mode has them. In dark mode they keep light mode's
       tokens, so they look the same in both, edged to stand off the page. */
    html.dark .wallet-hero,
    html.dark .earn-hero,
    html.dark section.ed-grain[style*="var(--ink)"] {
      --paper:     #fbf9f4;
      --paper-2:   #f3efe6;
      --ink:       #1a1820;
      --ink-2:     #2d2933;
      --ink-soft:  #57525e;
      --rule:      rgba(21, 19, 26, 0.10);
      --rule-soft: rgba(21, 19, 26, 0.06);
      box-shadow: inset 0 0 0 1px rgba(244, 239, 226, 0.10);
    }
    /* …and the shared dark rule for buttons would letter its cream Add
       Balance chip in cream. */
    html.dark .wallet-hero .wallet-hero-btn-primary:not(:hover) { color: var(--ink); }
/* rev 10cfa7771699522a */