/* =====================================================================
   ZZ Universe rail — additive progressive enhancement.
   Loads AFTER styles.css and attaches to the existing .nav rail purely
   by selector. Owns nothing in store.js / styles.css (zero-collision with
   the agent working those files). Desktop (>=1024px) only — the mobile
   bottom bar is left exactly as-is.

   Layers (operator brief, OPIN-20260606T144950Z-13i):
     L0  default = ICON-ONLY rail, fixed to the left edge -> more room.
     L1  hover the rail = the LABELS slide OVER the page as a layer
         (the rail is position:fixed, so widening overlays content and
          never reflows it; the icons keep their x = "fix verankert").
     L2  hover a nav point = a third column (shop-style PREVIEW) opens to
         entice the user; the rail retracts to icons-only so the preview
         gets maximum room ("nur Icons sichtbar damit mehr Platz da ist").
   ===================================================================== */

/* preview panel is built unconditionally by JS but only ever shown on desktop */
.zzu-preview { display: none; }

@media (min-width: 1024px) {

  body.zzu {
    --zzu-mini: 76px;             /* icon-only resting width */
    --zzu-exp:  248px;            /* label layer width (== the original --rail-w)  */
    --zzu-uni-w: 268px;           /* ZZ Universe level-1 popover (== Mehr flyout)  */
    --zzu-pv-w: min(440px, 34vw); /* level-2 preview, capped so content keeps room */
    --zzu-gold: #d4a24c;          /* notification accent — warm gold, fits the
                                     terra/creme/sand CI; distinct from --terra (actions) */
    /* content is offset by the MINI width only; the label layer and the
       preview overlay on top of the page, they do not push it — EXCEPT when
       the ZZ Universe flyout opens, then the main column slides right (below). */
    padding-left: var(--zzu-mini);
  }

  /* ---- when the ZZ Universe navigation opens, push the main column right so
     the flyout never collides with page content (operator: "Hauptteil muss
     weiter nach rechts rutschen, wenn die Navigation aufgeht"). ---- */
  body.zzu main.wrap { transition: margin-left .22s cubic-bezier(.22, .61, .36, 1); }
  body.zzu.zzu-uni-open main.wrap,
  body.zzu.zzu-more-open main.wrap {
    margin-left: calc(var(--zzu-exp) + var(--zzu-uni-w) + 24px - var(--zzu-mini));
  }
  body.zzu.zzu-pv-open main.wrap {
    margin-left: calc(var(--zzu-exp) + var(--zzu-uni-w) + var(--zzu-pv-w) + 34px - var(--zzu-mini));
  }

  /* ---- L0: icon rail, fixed mini width; the icons are the anchor ---- */
  /* MINIMAL/flat (operator): NO divider line, NO drop-shadow in any state. */
  body.zzu .nav {
    width: var(--zzu-mini); overflow: visible;
    border-right: none !important; box-shadow: none !important;
    transition: width .22s cubic-bezier(.22, .61, .36, 1);
  }
  body.zzu .nav .wrap {
    width: var(--zzu-mini); overflow: visible;
    display: flex; flex-direction: column;     /* enable `order`-based nav layout */
    padding-left: 16px; padding-right: 12px;
    transition: width .22s cubic-bezier(.22, .61, .36, 1);
  }
  body.zzu .nav a { justify-content: flex-start; overflow: hidden; }
  body.zzu .nav a .ic { flex: 0 0 auto; position: relative; overflow: visible; }  /* icon: fix verankert */

  /* ---- notification: gold count pill on a rail icon (IG-style), plus the
     store's existing dot recoloured to the same gold for one cue language. ---- */
  body.zzu .nav a .ic .zzu-badge {
    position: absolute; top: -5px; left: 13px;
    min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
    border-radius: 999px; background: var(--zzu-gold); color: #1c1b18;
    font: 700 10px/16px var(--sans, system-ui, sans-serif);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px var(--bg); pointer-events: none; z-index: 2;
  }
  body.zzu .nav a .ic .dot-badge { background: var(--zzu-gold) !important; }
  /* Activity uses the SAME badge rule as Messages — no per-item offset, so the two
     are provably identical in position (operator: "activity wie messages"). */

  /* Activity PAGE: styles.css centres the feed (.act-feed margin:0 auto) so it sits
     in the middle. Operator wants it laid out like the Messages page = flush-left
     against the rail. Left-align the feed and drop the centred max-width wrapper.
     Override lives here (store-owner styles.css untouched). */
  body.zzu.zzu-actpage main.wrap { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
  body.zzu.zzu-actpage .act-feed,
  body.zzu.zzu-actpage main.wrap > .stub-note { margin-left: 0 !important; margin-right: auto !important; }

  /* Settings page flush-left like Messages (operator): drop the centred wrap AND
     the inner .settings max-width:920px/margin:auto that re-centres the grid. */
  body.zzu.zzu-setpage main.wrap,
  body.zzu.zzu-setpage .settings { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

  /* ---- operator nav: force-show the listed items (override store.js auth
     scoping), hide the rest, and order them by CSS `order` so the DOM is never
     re-arranged (mobile bottom bar untouched). All gated on body.zzu = desktop. */
  body.zzu .nav a[data-zzu="1"] { display: flex !important; }
  body.zzu .nav a[data-zzu-hidden="1"] { display: none !important; }
  body.zzu .nav .rail-group { display: none; }          /* ecosystem box -> ZZ Universe covers it */
  body.zzu .nav .rail-brand  { order: 0; }
  body.zzu .nav a[data-navid="feed"]        { order: 1; }
  body.zzu .nav a[data-navid="explore"]     { order: 2; }
  body.zzu .nav a[data-navid="sellstyle"]   { order: 3; }
  body.zzu .nav a[data-navid="showstyle"]   { order: 4; }
  body.zzu .nav a[data-navid="live"]        { order: 5; }
  body.zzu .nav a[data-navid="following"]   { order: 6; }
  body.zzu .nav a[data-navid="connections"] { order: 7; }
  body.zzu .nav a[data-navid="messages"]    { order: 8; }
  body.zzu .nav a[data-navid="activity"]    { order: 9; }
  body.zzu .nav a[data-navid="zzuniverse"]  { order: 10; }
  body.zzu .nav .rail-spacer { order: 11; display: block; flex: 1 1 auto; }
  body.zzu .nav a[data-navid="more"]        { order: 12; }
  body.zzu .nav a[data-navid="profile"]     { order: 13; }
  body.zzu .nav .rail-foot   { order: 14; }
  body.zzu .nav a .lbl {
    opacity: 0; transform: translateX(-8px);
    transition: opacity .18s ease, transform .18s ease;
    white-space: nowrap;
  }
  body.zzu .nav .rail-group { padding: 6px 4px; }
  body.zzu .nav .rail-group-label .lbl,
  body.zzu .nav .rail-foot {
    opacity: 0; pointer-events: none; transition: opacity .18s ease;
  }

  /* ---- L1: hover/focus the rail -> label layer slides over content ---- */
  body.zzu .nav:hover,
  body.zzu .nav:focus-within {
    width: var(--zzu-exp); z-index: 60;
  }
  body.zzu .nav:hover .wrap,
  body.zzu .nav:focus-within .wrap { width: var(--zzu-exp); }
  body.zzu .nav:hover  .lbl,
  body.zzu .nav:focus-within .lbl { opacity: 1; transform: none; }
  body.zzu .nav:hover  .rail-group-label .lbl,
  body.zzu .nav:hover  .rail-foot,
  body.zzu .nav:focus-within .rail-group-label .lbl,
  body.zzu .nav:focus-within .rail-foot { opacity: 1; pointer-events: auto; }

  /* ZZ Universe (the only point with the preview concept) stays "held" while open */
  body.zzu .nav a.zzu-active { background: rgba(243, 238, 228, .07); color: var(--ink); }

  /* ---- when ZZ Universe is open, the rail STAYS expanded with labels (like the
     Mehr flyout) — it does NOT retract on click; it only collapses once you
     close it and move away. (operator: "fährt nicht sofort ein") ---- */
  body.zzu.zzu-uni-open .nav,
  body.zzu.zzu-uni-open .nav:hover { width: var(--zzu-exp); z-index: 60; }
  body.zzu.zzu-uni-open .nav .wrap,
  body.zzu.zzu-uni-open .nav:hover .wrap { width: var(--zzu-exp); }
  body.zzu.zzu-uni-open .nav .lbl { opacity: 1; transform: none; }
  body.zzu.zzu-uni-open .nav .rail-foot,
  body.zzu.zzu-uni-open .nav .rail-group-label .lbl { opacity: 1; pointer-events: auto; }

  /* ---- "Mehr" account flyout (store.js .mf-flyout): keep the rail expanded while
     it is open (same as Universe) and pin the container to the footer bottom,
     ~2px LEFT of the Universe column, so the two containers read consistently
     (operator). Universe column left = --zzu-exp + 8px; Mehr = +6px (2px left). ---- */
  body.zzu.zzu-more-open .nav,
  body.zzu.zzu-more-open .nav:hover { width: var(--zzu-exp); z-index: 60; }
  body.zzu.zzu-more-open .nav .wrap,
  body.zzu.zzu-more-open .nav:hover .wrap { width: var(--zzu-exp); }
  body.zzu.zzu-more-open .nav .lbl { opacity: 1; transform: none; }
  body.zzu.zzu-more-open .nav .rail-foot,
  body.zzu.zzu-more-open .nav .rail-group-label .lbl { opacity: 1; pointer-events: auto; }
  body.zzu .mf-flyout.anchored .mf-sheet {
    left: var(--zzu-exp) !important;          /* flush to the rail edge, 0 gap (operator) */
    bottom: 10px !important; top: auto !important;
  }

  /* ---- LEVEL 1: ZZ Universe — opens EXACTLY like the "Mehr" flyout: an
     anchored popover next to the rail item, bottom-aligned (builds bottom->top),
     sliding out from the LEFT. NO title. JS sets left/bottom/maxHeight. ---- */
  .zzu-uni {
    position: fixed; left: 88px; bottom: 80px;     /* JS overrides to the ZZ item */
    width: var(--zzu-uni-w, 268px);
    /* operator: move the DARK level-3 colour onto level 2 so list + preview read
       as one surface ("aus einem Guss"). Both use --bg-2 now. */
    background: var(--bg-2); border-radius: var(--r);
    z-index: 58; display: flex; flex-direction: column; justify-content: flex-start;
    padding: 14px 8px; overflow-y: auto; overflow-x: hidden;
    transform: translateX(-10px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .16s ease, opacity .16s ease, visibility 0s linear .16s;
  }
  .zzu-uni.open {
    transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    transition: transform .16s ease, opacity .16s ease, visibility 0s;
  }
  .zzu-uni-list { display: flex; flex-direction: column; gap: 1px; }
  .zzu-uni-row {
    display: flex; align-items: center; gap: 14px; width: 100%;
    background: none; border: none; cursor: pointer; text-align: left; font: inherit;
    padding: 12px 12px; border-radius: var(--r-m); color: var(--ink); font-size: 14px;
  }
  .zzu-uni-row:hover, .zzu-uni-row.on { background: rgba(243, 238, 228, .07); }
  .zzu-uni-ic { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; }
  .zzu-uni-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .zzu-uni-t { flex: 1; }
  .zzu-uni-soon {
    flex: 0 0 auto; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted, #9a958c); border: 1px solid currentColor; border-radius: 999px;
    padding: 2px 7px; opacity: .7;
  }
  .zzu-uni-row[data-zzu-tool] .zzu-uni-soon { pointer-events: none; }
  /* operator: mark the live tools (Surf, Cloud, Transfer, Secrets, Vault) as new */
  .zzu-uni-new {
    flex: 0 0 auto; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
    font-weight: 700; color: #0c0b0a; background: var(--zz-accent, #c8a44c);
    border-radius: 999px; padding: 2px 7px; pointer-events: none;
  }

  /* ---- LEVEL 2: the teaser, ~double the nav width, beside level 1, same
     bottom-anchored + slide-from-left chrome. JS sets left/bottom/maxHeight. ---- */
  .zzu-pv {
    position: fixed; left: 368px; bottom: 80px;    /* JS overrides */
    width: var(--zzu-pv-w, 496px); max-width: calc(100vw - 120px);
    /* same dark surface as the level-1 list -> reads as one piece (operator) */
    background: var(--bg-2); border-radius: var(--r);
    z-index: 57; display: flex; flex-direction: column; justify-content: flex-start;
    padding: 26px 24px 22px; overflow-y: auto; overflow-x: hidden;
    /* NO slide/translate -> no jump when opening from a tool click; a quick fade
       only, same colour, so switching tool is seamless (operator: "keine Unterbrechung"). */
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .12s ease, visibility 0s linear .12s;
  }
  .zzu-pv.open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .12s ease;
  }
  /* 0-gap join: flatten the facing edges so list + preview read as ONE surface
     (operator: "Abstände 0 / aus einem Guss"). pv always sits to the right of the
     list; the list's right corners flatten only while the preview is open. */
  .zzu-pv { border-top-left-radius: 0; border-bottom-left-radius: 0; }
  body.zzu.zzu-pv-open .zzu-uni { border-top-right-radius: 0; border-bottom-right-radius: 0; }
  .zzu-pv-hero {
    width: 64px; height: 64px; border-radius: var(--r); display: grid; place-items: center;
    background: linear-gradient(135deg, var(--bg-3), var(--bg-deep)); margin: 0 0 16px;
  }
  .zzu-pv-glyph svg { width: 34px; height: 34px; fill: none; stroke: var(--ac); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .zzu-pv-eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 4px; }
  .zzu-pv-title { font-family: var(--display); font-size: 30px; line-height: 1.05; color: var(--ink); margin: 0 0 10px; font-weight: 700; }
  .zzu-pv-desc { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); margin: 0 0 20px; max-width: 42ch; }
  .zzu-pv-pts { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .zzu-pv-pt { display: flex; align-items: flex-start; gap: 12px; }
  .zzu-pv-pic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--r-s); display: grid; place-items: center; background: rgba(243, 238, 228, .06); }
  .zzu-pv-pic svg { width: 20px; height: 20px; fill: none; stroke: var(--ac); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .zzu-pv-pt b { display: block; font-size: 14px; color: var(--ink); font-weight: 600; }
  .zzu-pv-pt span span { display: block; font-size: 13px; color: var(--ink-2); }
  .zzu-pv-cta {
    margin-top: auto; display: inline-flex; align-items: center; justify-content: center;
    height: 46px; border-radius: var(--r-s); text-decoration: none;
    background: var(--terra); color: #fff; font-weight: 700; font-size: 15px;
    transition: background .14s ease;
  }
  .zzu-pv-cta:hover { background: var(--terra-h); }
}

/* hidden until JS + desktop enable them */
.zzu-uni, .zzu-pv { display: none; }
@media (min-width: 1024px) { .zzu-uni, .zzu-pv { display: flex; } }

/* respect reduced-motion (styles.css ships none) */
@media (prefers-reduced-motion: reduce) {
  body.zzu .nav,
  body.zzu .nav a .lbl,
  .zzu-preview,
  .zzu-preview .zp-card { transition: none !important; }
}

/* ---- top-right cluster: Coins chip + Login/Profile (operator OPIN 2026-06-08).
   TikTok-style corner: gold Coins pill -> /coins.html, terra Login button when
   logged out, avatar -> /profil when logged in. Toggled by body.auth-in/.auth-out
   that store.js sets. Fallback colours so it renders even before styles.css vars. */
.zzu-topright { position: fixed; top: 14px; right: 18px; z-index: 60;
  display: flex; align-items: center; gap: 10px; }
.zzu-tr-coins { display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  background: rgba(212,162,76,.12); color: var(--coin, #d4a24c);
  border: 1px solid rgba(212,162,76,.38); border-radius: 999px;
  padding: 6px 13px 6px 8px; font-weight: 800; font-size: 14px;
  font-variant-numeric: tabular-nums; }
.zzu-tr-coins:hover { background: rgba(212,162,76,.20); }
.zzu-tr-coin { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 34% 30%, #f6dd9c, var(--coin, #d4a24c) 72%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), inset 0 -2px 2px rgba(0,0,0,.12); }
/* login is the PRIMARY CTA — high-contrast solid pill. The theme's --ac is a pale
   sand (#c9bfa8), so cream-on-ac was nearly invisible (operator: "login nicht
   sichtbar"). Solid cream pill + dark bold text = clearly visible on the dark UI. */
.zzu-tr-login { display: inline-flex; align-items: center; text-decoration: none;
  background: var(--ink, #f3eee4); color: var(--bg, #1c1b18);
  border-radius: 999px; padding: 7px 18px; font-weight: 800; font-size: 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,.28); }
.zzu-tr-login:hover { filter: brightness(1.06); }
.zzu-tr-me { display: inline-flex; }
.zzu-tr-av { width: 30px; height: 30px; border-radius: 50%; display: inline-block;
  background: var(--bg-2, #2d2a27); border: 1px solid var(--bd, rgba(255,250,218,.18)); }
body.auth-out .zzu-tr-me { display: none; }
body.auth-in .zzu-tr-login { display: none; }
@media (max-width: 640px) {
  .zzu-topright { top: 10px; right: 12px; gap: 8px; }
  .zzu-tr-login { padding: 6px 13px; font-size: 13px; }
}

/* ---- DE/EN language switcher in the "More" flyout (operator OPIN: EN primary,
   selector in More). Appended by i18n.js. CI-consistent rows. ---- */
.zz-langsel { display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:8px; padding:12px 14px; border-top:1px solid var(--bd, rgba(255,250,218,.12)); }
.zz-langsel-lbl { font-size:13px; color:var(--ink-3, #9b958a); font-weight:600; }
.zz-langsel-opts { display:inline-flex; gap:6px; }
.zz-lang { font:inherit; font-size:13px; font-weight:700; cursor:pointer;
  background:var(--bg-2, #2d2a27); color:var(--ink-2, #c9c3b6);
  border:1px solid var(--bd, rgba(255,250,218,.14)); border-radius:8px; padding:5px 12px; }
.zz-lang:hover { border-color:var(--coin, #d4a24c); }
.zz-lang[aria-current="true"] { background:rgba(212,162,76,.16); color:var(--coin, #d4a24c);
  border-color:var(--coin, #d4a24c); }

/* ---- FILTERS slide-out + button (operator OPIN #4): opens from the RIGHT. ---- */
.ff-btn { display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  background:var(--bg-2,#232220); color:var(--ink,#f3eee4); border:1px solid var(--bd,rgba(243,238,228,.18));
  border-radius:999px; padding:6px 12px; font:inherit; font-size:13px; font-weight:600; margin-left:8px; }
.ff-btn svg { width:16px; height:16px; }
.ff-btn:hover { border-color:var(--coin,#d4a24c); }
.ff-btn-count { font-variant-numeric:tabular-nums; color:var(--ink-3,#9b958a); font-weight:700; }
.ff-btn.has-filters, .ff-btn.has-filters .ff-btn-count { border-color:var(--coin,#d4a24c); color:var(--coin,#d4a24c); }
.ff-scrim { position:fixed; inset:0; background:rgba(10,9,8,0); z-index:120; pointer-events:none; transition:background .25s ease; }
body.ff-open .ff-scrim { background:rgba(10,9,8,.5); pointer-events:auto; }
.ff-panel { position:fixed; top:0; right:0; bottom:0; width:min(380px,92vw); z-index:121;
  background:var(--bg,#1c1b18); border-left:1px solid var(--bd,rgba(243,238,228,.14));
  box-shadow:-24px 0 70px -22px rgba(0,0,0,.6); transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; }
body.ff-open .ff-panel { transform:translateX(0); }
.ff-head { display:flex; align-items:center; justify-content:space-between; padding:18px 18px 12px; border-bottom:1px solid var(--bd,rgba(243,238,228,.1)); }
.ff-head h2 { margin:0; font-size:18px; color:var(--ink,#f3eee4); }
.ff-x { background:none; border:none; color:var(--ink-2,#c9c3b6); cursor:pointer; padding:4px; }
.ff-x svg { width:20px; height:20px; }
.ff-body { flex:1; overflow-y:auto; padding:6px 18px 18px; }
.ff-sec { padding:16px 0; border-bottom:1px solid var(--bd,rgba(243,238,228,.07)); }
.ff-sec h3 { margin:0 0 10px; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3,#9b958a); font-weight:700; }
.ff-radios { display:flex; flex-direction:column; gap:4px; }
.ff-radio { text-align:left; background:none; border:none; color:var(--ink-2,#c9c3b6); cursor:pointer; font:inherit; font-size:14px; padding:7px 0; }
.ff-radio.on { color:var(--coin,#d4a24c); font-weight:700; }
.ff-chks { display:flex; flex-wrap:wrap; gap:8px; }
.ff-chk { background:var(--bg-2,#232220); border:1px solid var(--bd,rgba(243,238,228,.18)); color:var(--ink-2,#c9c3b6); cursor:pointer; font:inherit; font-size:13px; padding:7px 13px; border-radius:999px; }
.ff-chk.on { background:rgba(212,162,76,.14); border-color:var(--coin,#d4a24c); color:var(--coin,#d4a24c); font-weight:700; }
.ff-sizes .ff-chk { min-width:46px; text-align:center; }
.ff-colors { display:flex; flex-wrap:wrap; gap:10px; }
.ff-color { background:none; border:none; cursor:pointer; padding:0; border-radius:50%; line-height:0; }
.ff-sw { display:block; width:26px; height:26px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); }
.ff-color.on .ff-sw { box-shadow:0 0 0 2px var(--bg,#1c1b18), 0 0 0 4px var(--coin,#d4a24c); }
.ff-price { display:flex; align-items:center; gap:10px; }
.ff-price input { flex:1; width:0; background:var(--bg-2,#232220); border:1px solid var(--bd,rgba(243,238,228,.18)); color:var(--ink,#f3eee4); border-radius:8px; padding:9px 11px; font:inherit; font-size:14px; }
.ff-empty { color:var(--ink-3,#9b958a); margin:0; }
.ff-foot { display:flex; gap:10px; padding:14px 18px; border-top:1px solid var(--bd,rgba(243,238,228,.1)); }
.ff-clear { flex:0 0 auto; background:none; border:1px solid var(--bd,rgba(243,238,228,.22)); color:var(--ink-2,#c9c3b6); border-radius:10px; padding:11px 16px; cursor:pointer; font:inherit; font-weight:600; }
.ff-apply { flex:1; background:var(--coin,#d4a24c); color:#3a2a08; border:none; border-radius:10px; padding:11px 16px; cursor:pointer; font:inherit; font-weight:800; }
.fy-sentinel { height:1px; grid-column:1/-1; }

/* Following route = social posts: hide the listing-only Filters button + Feed/Battle
   view control (operator OPIN #5; they belong to the For-You product feed only). */
body.route-following .ff-btn,
body.route-following .view-ctl { display: none !important; }