/* eShobuy — Showcase compact media filter rail.
   -------------------------------------------------
   Three media modes remain the same logic. only replaces their
   presentation with one compact left-edge icon box. Labels reveal to the
   RIGHT on mouse hover / keyboard focus and briefly after touch/click.
   The left edge is intentionally square/flush to the viewport; only the
   outer right corners are rounded. Search-open state from still hides
   the rail, preventing search-result overlap. */

html body #view-reels .wave-media-mode,
html body.stb-standard #view-reels .wave-media-mode{
  position:absolute!important;
  top:calc(62px + env(safe-area-inset-top))!important;
  left:0!important;
  right:auto!important;
  bottom:auto!important;
  z-index:34!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:0!important;
  width:46px!important;
  min-width:46px!important;
  max-width:46px!important;
  margin:0!important;
  padding:3px 3px 3px 0!important;
  transform:none!important;
  overflow:visible!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-left:0!important;
  border-radius:0 12px 12px 0!important;
  background:rgba(10,10,10,.66)!important;
  background-image:none!important;
  color:#fff!important;
  box-shadow:none!important;
  filter:none!important;
  -webkit-backdrop-filter:blur(14px) saturate(125%)!important;
  backdrop-filter:blur(14px) saturate(125%)!important;
  isolation:isolate!important;
  transition:opacity .14s ease,visibility .14s ease!important;
}

html body #view-reels .wave-mode-btn,
html body.stb-standard #view-reels .wave-mode-btn{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:43px!important;
  min-width:43px!important;
  max-width:43px!important;
  height:40px!important;
  min-height:40px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.105)!important;
  border-radius:0!important;
  background:transparent!important;
  color:rgba(255,255,255,.88)!important;
  box-shadow:none!important;
  filter:none!important;
  text-align:center!important;
  cursor:pointer!important;
  outline:none!important;
  overflow:visible!important;
  -webkit-tap-highlight-color:transparent!important;
  transition:background .14s ease,color .14s ease!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 .harbor-mode-icon,
html body.stb-standard #view-reels .harbor-mode-icon{
  display:grid!important;
  place-items:center!important;
  width:20px!important;
  height:20px!important;
  flex:0 0 20px!important;
  position:relative!important;
  z-index:2!important;
  color:inherit!important;
  pointer-events:none!important;
}
html body #view-reels .harbor-mode-icon svg,
html body.stb-standard #view-reels .harbor-mode-icon svg{
  display:block!important;
  width:19px!important;
  height:19px!important;
  overflow:visible!important;
}

/* The text is not a second floating control. It is the horizontal extension
   of the same button and opens from the rail's right seam. */
html body #view-reels .harbor-mode-label,
html body.stb-standard #view-reels .harbor-mode-label{
  position:absolute!important;
  top:-1px!important;
  left:43px!important;
  z-index:1!important;
  display:flex!important;
  align-items:center!important;
  height:42px!important;
  width:max-content!important;
  max-width:calc(100vw - 58px)!important;
  padding:0 14px 0 11px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-left:0!important;
  border-radius:0 10px 10px 0!important;
  background:rgba(10,10,10,.90)!important;
  color:#fff!important;
  box-shadow:none!important;
  filter:none!important;
  -webkit-backdrop-filter:blur(14px) saturate(125%)!important;
  backdrop-filter:blur(14px) saturate(125%)!important;
  font:750 11.5px/1.1 var(--shell-sans,system-ui,-apple-system,"Segoe UI",sans-serif)!important;
  letter-spacing:.015em!important;
  white-space:nowrap!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateX(-7px)!important;
  transform-origin:left center!important;
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease!important;
}

html body #view-reels .wave-mode-btn:hover .harbor-mode-label,
html body.stb-standard #view-reels .wave-mode-btn:hover .harbor-mode-label,
html body #view-reels .wave-mode-btn:focus-visible .harbor-mode-label,
html body.stb-standard #view-reels .wave-mode-btn:focus-visible .harbor-mode-label,
html body #view-reels .wave-mode-btn.harbor-click-reveal .harbor-mode-label,
html body.stb-standard #view-reels .wave-mode-btn.harbor-click-reveal .harbor-mode-label{
  opacity:1!important;
  visibility:visible!important;
  transform:translateX(0)!important;
}

/* A click/tap must collapse again after 2 seconds even if the pointer is
   still resting on the same icon. Leaving the button clears this guard. */
html body #view-reels .wave-mode-btn.harbor-click-collapsed .harbor-mode-label,
html body.stb-standard #view-reels .wave-mode-btn.harbor-click-collapsed .harbor-mode-label{
  opacity:0!important;
  visibility:hidden!important;
  transform:translateX(-7px)!important;
}

html body #view-reels .wave-mode-btn:hover,
html body.stb-standard #view-reels .wave-mode-btn:hover,
html body #view-reels .wave-mode-btn:focus-visible,
html body.stb-standard #view-reels .wave-mode-btn:focus-visible{
  background:rgba(255,255,255,.105)!important;
  color:#fff!important;
}
html body #view-reels .wave-mode-btn:focus-visible,
html body.stb-standard #view-reels .wave-mode-btn:focus-visible{
  outline:2px solid rgba(255,255,255,.72)!important;
  outline-offset:-2px!important;
}

/* Active mode stays unambiguous on both very dark video and bright product
   images. Neutral white/ink avoids introducing another colour cast. */
html body #view-reels .wave-mode-btn.is-active,
html body.stb-standard #view-reels .wave-mode-btn.is-active{
  background:rgba(248,250,252,.96)!important;
  color:#111820!important;
  font-weight:800!important;
  text-shadow:none!important;
  box-shadow:none!important;
}
html body #view-reels .wave-mode-btn.is-active .harbor-mode-label,
html body.stb-standard #view-reels .wave-mode-btn.is-active .harbor-mode-label{
  background:rgba(248,250,252,.97)!important;
  color:#111820!important;
  border-color:rgba(255,255,255,.36)!important;
}

/* Preserve's no-overlap rule while the showcase search / results are open. */
html body #view-reels.wave-search-open .wave-media-mode,
html body.stb-standard #view-reels.wave-search-open .wave-media-mode{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Keep the rail clear of the lower action stack on short landscape screens. */
@media (max-height:480px) and (orientation:landscape){
  html body #view-reels .wave-media-mode,
  html body.stb-standard #view-reels .wave-media-mode{
    top:calc(54px + env(safe-area-inset-top))!important;
    transform:scale(.92)!important;
    transform-origin:left top!important;
  }
}

@media (max-width:380px){
  html body #view-reels .wave-media-mode,
  html body.stb-standard #view-reels .wave-media-mode{
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
  }
  html body #view-reels .wave-mode-btn,
  html body.stb-standard #view-reels .wave-mode-btn{
    width:41px!important;
    min-width:41px!important;
    max-width:41px!important;
    height:38px!important;
    min-height:38px!important;
  }
  html body #view-reels .harbor-mode-label,
  html body.stb-standard #view-reels .harbor-mode-label{
    left:41px!important;
    height:40px!important;
    padding-right:12px!important;
    font-size:11px!important;
  }
}

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