/* eShobuy — Showcase filter rail refinement + static cart hover
   -----------------------------------------------------------------
   Keeps/ filtering logic intact while making the three-icon rail a
   tighter, more polished glass control.  The hover/click label is now
   contained by the same blurred rail surface: the rail itself expands and
   clips its contents, so the label cannot visually leak outside the box.

   Showcase Cart hover is intentionally state-only: no zoom, lift, pulse,
   glow or transition. */

/* ── Showcase media filter: one clipped glass box ─────────────────────── */
html body #view-reels .wave-media-mode,
html body.stb-standard #view-reels .wave-media-mode{
  --dune-rail-rest:48px;
  --dune-rail-open:160px;
  width:var(--dune-rail-rest)!important;
  min-width:var(--dune-rail-rest)!important;
  max-width:var(--dune-rail-rest)!important;
  padding:4px 4px 4px 0!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.20)!important;
  border-left:0!important;
  border-radius:0 14px 14px 0!important;
  background:linear-gradient(145deg,rgba(20,23,28,.70),rgba(8,10,13,.58))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
  -webkit-backdrop-filter:blur(18px) saturate(132%)!important;
  backdrop-filter:blur(18px) saturate(132%)!important;
  transition:width .16s ease,max-width .16s ease,opacity .14s ease,visibility .14s ease!important;
  contain:paint!important;
}

/* JS owns expansion so click/tap can still force collapse after exactly 2s,
   even when the pointer is resting over the same control. */
html body #view-reels .wave-media-mode.dune-expanded,
html body.stb-standard #view-reels .wave-media-mode.dune-expanded{
  width:min(var(--dune-rail-open),calc(100vw - 8px))!important;
  min-width:min(var(--dune-rail-open),calc(100vw - 8px))!important;
  max-width:min(var(--dune-rail-open),calc(100vw - 8px))!important;
}

html body #view-reels .wave-mode-btn,
html body.stb-standard #view-reels .wave-mode-btn{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:42px!important;
  min-height:42px!important;
  justify-content:flex-start!important;
  gap:10px!important;
  padding:0 9px 0 8px!important;
  overflow:hidden!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  background:transparent!important;
  color:rgba(255,255,255,.90)!important;
  box-shadow:none!important;
  transform:none!important;
  animation:none!important;
  transition:background-color .12s ease,color .12s 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;
}

/* A compact inner tile makes each symbol easier to recognise without adding
   a floating glow or changing the product/video content underneath. */
html body #view-reels .harbor-mode-icon,
html body.stb-standard #view-reels .harbor-mode-icon{
  width:30px!important;
  height:30px!important;
  flex:0 0 30px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:9px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.115),rgba(255,255,255,.045))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
  color:rgba(255,255,255,.94)!important;
}
html body #view-reels .harbor-mode-icon svg,
html body.stb-standard #view-reels .harbor-mode-icon svg{
  width:18px!important;
  height:18px!important;
  stroke-width:1.85!important;
  overflow:hidden!important;
}

/* Label is a normal flex child, not a second floating box.  Parent overflow
   is hidden, guaranteeing the label stays inside the blurred rail surface. */
html body #view-reels .harbor-mode-label,
html body.stb-standard #view-reels .harbor-mode-label{
  position:static!important;
  inset:auto!important;
  z-index:auto!important;
  display:block!important;
  flex:0 0 auto!important;
  width:auto!important;
  max-width:100px!important;
  height:auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  color:inherit!important;
  font:760 11.5px/1.15 var(--shell-sans,system-ui,-apple-system,"Segoe UI",sans-serif)!important;
  letter-spacing:.012em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:none!important;
  transition:opacity .11s ease,visibility .11s ease!important;
}

html body #view-reels .wave-media-mode.dune-expanded .wave-mode-btn:hover .harbor-mode-label,
html body.stb-standard #view-reels .wave-media-mode.dune-expanded .wave-mode-btn:hover .harbor-mode-label,
html body #view-reels .wave-media-mode.dune-expanded .wave-mode-btn:focus-visible .harbor-mode-label,
html body.stb-standard #view-reels .wave-media-mode.dune-expanded .wave-mode-btn:focus-visible .harbor-mode-label,
html body #view-reels .wave-media-mode.dune-expanded .wave-mode-btn.harbor-click-reveal .harbor-mode-label,
html body.stb-standard #view-reels .wave-media-mode.dune-expanded .wave-mode-btn.harbor-click-reveal .harbor-mode-label{
  opacity:1!important;
  visibility:visible!important;
}

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;
}

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,.075)!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,.62)!important;
  outline-offset:-2px!important;
}

/* Active option is obvious but remains in the same neutral visual family. */
html body #view-reels .wave-mode-btn.is-active,
html body.stb-standard #view-reels .wave-mode-btn.is-active{
  background:rgba(255,255,255,.11)!important;
  color:#fff!important;
  box-shadow:inset 3px 0 0 rgba(255,255,255,.88)!important;
}
html body #view-reels .wave-mode-btn.is-active .harbor-mode-icon,
html body.stb-standard #view-reels .wave-mode-btn.is-active .harbor-mode-icon{
  background:rgba(248,250,252,.96)!important;
  border-color:rgba(255,255,255,.90)!important;
  color:#101820!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:transparent!important;
  color:#fff!important;
  border:0!important;
}

/* ── Showcase Cart: clear hover state, absolutely no motion/effect ─────── */
html body #view-reels .reel-actions .reel-act:nth-child(2) button,
html body.stb-standard #view-reels .reel-actions .reel-act:nth-child(2) button{
  transform:none!important;
  animation:none!important;
  transition:none!important;
  filter:none!important;
  box-shadow:none!important;
  border-color:rgba(255,255,255,.22)!important;
  background:rgba(8,11,15,.48)!important;
}
html body #view-reels .reel-actions .reel-act:nth-child(2) button:hover,
html body.stb-standard #view-reels .reel-actions .reel-act:nth-child(2) button:hover,
html body #view-reels .reel-actions .reel-act:nth-child(2) button:focus-visible,
html body.stb-standard #view-reels .reel-actions .reel-act:nth-child(2) button:focus-visible{
  transform:none!important;
  animation:none!important;
  transition:none!important;
  filter:none!important;
  box-shadow:none!important;
  border-color:rgba(255,255,255,.68)!important;
  background:rgba(255,255,255,.18)!important;
  color:#fff!important;
  outline:none!important;
}

/* Inline Reels.pulse() writes a transform on click. !important above makes
   that write visually inert, so Cart stays completely static. */
html body #view-reels .reel-actions .reel-act:nth-child(2) button:active,
html body.stb-standard #view-reels .reel-actions .reel-act:nth-child(2) button:active{
  transform:none!important;
  animation:none!important;
  transition:none!important;
}

@media (max-width:380px){
  html body #view-reels .wave-media-mode,
  html body.stb-standard #view-reels .wave-media-mode{
    --dune-rail-rest:46px;
    --dune-rail-open:148px;
    padding-right:3px!important;
  }
  html body #view-reels .wave-mode-btn,
  html body.stb-standard #view-reels .wave-mode-btn{
    height:40px!important;
    min-height:40px!important;
    gap:8px!important;
    padding-left:7px!important;
  }
  html body #view-reels .harbor-mode-icon,
  html body.stb-standard #view-reels .harbor-mode-icon{
    width:28px!important;
    height:28px!important;
    flex-basis:28px!important;
    border-radius:8px!important;
  }
  html body #view-reels .harbor-mode-label,
  html body.stb-standard #view-reels .harbor-mode-label{
    max-width:94px!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;
  }
}