/* eShobuy — Showcase: kill the residual blue cast, and turn the media
   filter into a left-anchored vertical list under Back+Search (per the
   client's marked-up screenshot), instead of's centred horizontal row.
   Loaded LAST (after), so it settles these two remaining issues without
   touching any/// media/search logic — visual-geometry and
   colour only, exactly like the layers before it.

   -------------------------------------------------------------------------
   1. THE "BLUE VIBE" AT THE BOTTOM OF THE SHOWCASE
   -------------------------------------------------------------------------
   this removed the blurred glow layer and left what it believed was a
   neutral flat backdrop: #05080a / #0a0a0f / #05080f. Those are NOT neutral
   — every one of them has B (blue) higher than R (red), e.g. #05080a is
   rgb(5,8,10). It's subtle, but on a large dark area it reads exactly as
   the client flagged: a cool/blue tint pooling at the bottom and edges of
   the stage, behind the product photo. Swapped for a true neutral (equal
   R=G=B) so there is no colour cast left at all, permanently.

   -------------------------------------------------------------------------
   2. THE MEDIA FILTER (Video / Image / Video & Image) BECOMES A LEFT LIST
   -------------------------------------------------------------------------
   this turned the filter into row 2 of `.reel-top`, centred under the search
   row. The client's screenshot draws a different target: the filter
   anchored at the LEFT, directly under the Back + Search icons, as a
   vertical list with a dividing line between each option — not a centred
   pill. Implemented by taking `.wave-media-mode` back out of flex flow
   (`position:absolute`) and anchoring it under the icon column instead of
   centring it; same element, same buttons, same click handlers — no JS
   touched, exactly like every layer before it.
   ========================================================================= */

/* ── 1. True neutral backdrop — no red/green/blue channel imbalance ───── */
html body #view-reels .reel-photo-stage,
html body.stb-standard #view-reels .reel-photo-stage,
html body #view-reels .reel-slide,
html body.stb-standard #view-reels .reel-slide{
  background: #000!important;
  background-image: none!important;
  box-shadow: none!important;
  filter: none!important;
}

/* Belt-and-braces: keep the blur/halo layers permanently off, in case any
   future stylesheet re-enables them the way→ had to fight. */
html body #view-reels .reel-photo-blur,
html body.stb-standard #view-reels .reel-photo-blur,
html body #view-reels .flux-gallery-blur,
html body.stb-standard #view-reels .flux-gallery-blur{
  display: none!important;
  content: none!important;
}
html body #view-reels .reel-slide[data-media="image"]::before,
html body.stb-standard #view-reels .reel-slide[data-media="image"]::before{
  content: none!important;
  display: none!important;
}
html body #view-reels .reel-photo,
html body.stb-standard #view-reels .reel-photo,
html body #view-reels .reel-media,
html body.stb-standard #view-reels .reel-media{
  box-shadow: none!important;
  filter: none!important;
}

/* ── 2. Filter: out of the centred row, anchored left under the icons ─── */
html body #view-reels .wave-media-mode,
html body.stb-standard #view-reels .wave-media-mode,
html body #view-reels .kiln-media-mode,
html body.stb-standard #view-reels .kiln-media-mode,
html body #view-reels .reel-mode-row,
html body.stb-standard #view-reels .reel-mode-row{
  position: absolute!important;
  top: calc(54px + env(safe-area-inset-top))!important;
  left: 10px!important;
  right: auto!important;
  bottom: auto!important;
  transform: none!important;
  margin: 0!important;
  width: 136px!important;
  max-width: 60vw!important;
  flex-direction: column!important;
  align-items: stretch!important;
  gap: 0!important;
  padding: 0!important;
  border-radius: 12px!important;
  overflow: hidden!important;
  box-shadow: none!important;
  filter: none!important;
}

/* Each option becomes a full-width list row, divided by a hairline —
   no more per-button pill radius. */
html body #view-reels .wave-mode-btn,
html body.stb-standard #view-reels .wave-mode-btn{
  width: 100%!important;
  min-height: 38px!important;
  padding: 9px 14px!important;
  border-radius: 0!important;
  text-align: left!important;
  justify-content: flex-start!important;
  border-bottom: 1px solid rgba(255,255,255,.14)!important;
  box-shadow: none!important;
  filter: none!important;
}
html body #view-reels .wave-mode-btn:last-child,
html body.stb-standard #view-reels .wave-mode-btn:last-child{
  border-bottom: 0!important;
}
html body #view-reels .wave-mode-btn.is-active,
html body.stb-standard #view-reels .wave-mode-btn.is-active{
  border-radius: 0!important;
}

@media (max-width: 380px){
  html body #view-reels .wave-media-mode,
  html body.stb-standard #view-reels .wave-media-mode{
    width: 118px!important;
  }
  html body #view-reels .wave-mode-btn,
  html body.stb-standard #view-reels .wave-mode-btn{
    padding: 8px 12px!important;
    font-size: 10.5px!important;
  }
}

@media (prefers-reduced-motion: reduce){
  html body #view-reels .wave-media-mode,
  html body.stb-standard #view-reels .wave-media-mode{ transition: none!important; }
}