/* eShobuy FINAL — unified search + Showcase visual polish.
   No media/player/search logic is replaced here; this layer only owns the
   final visual geometry so the existing/ behaviour remains intact. */

/* ========================================================================
   MAIN HEADER SEARCH
   - Search button is flush with the right edge (no dead gap).
   - Text-only Search button: the magnifier beside the word is intentionally
     removed later.
   - The dropdown is allowed to escape the field instead of being clipped.
   ======================================================================== */
html body .header .search-wrap{
  position:relative!important;
  display:block!important;
  border:0!important;
  border-radius:10px!important;
  overflow:visible!important;
  background:transparent!important;
  box-shadow:none!important;
}
html body .header .search-wrap:focus-within{
  border:0!important;
  box-shadow:none!important;
}
html body .header .search-wrap .search-box,
html body.stb-standard .header .search-wrap .search-box{
  display:flex!important;
  align-items:center!important;
  gap:0!important;
  width:100%!important;
  height:46px!important;
  min-height:46px!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid var(--shell-rule-firm,#cbd7e4)!important;
  border-radius:10px!important;
  background:var(--shell-surface,#fff)!important;
  box-shadow:none!important;
  transform:none!important;
  transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease!important;
}
html body .header .search-wrap .search-box.focused,
html body .header .search-wrap .search-box:focus-within,
html body.stb-standard .header .search-wrap .search-box.focused{
  border-color:var(--shell-blue,#0a6fb4)!important;
  background:var(--shell-surface,#fff)!important;
  box-shadow:0 0 0 3px rgba(10,111,180,.10)!important;
}
html body .header .search-box .ico{display:none!important;}
html body .header .search-box input,
html body.stb-standard .header .search-box input{
  flex:1 1 auto!important;
  min-width:0!important;
  height:44px!important;
  padding:0 14px 0 16px!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--shell-ink,#142235)!important;
  font-size:14px!important;
  font-weight:500!important;
}
html body .header .search-box input::placeholder{
  color:var(--shell-mute,#8090a4)!important;
  opacity:.74!important;
}
html body .header .search-clear{
  flex:0 0 28px!important;
  width:28px!important;
  height:28px!important;
  margin:0 4px 0 0!important;
  padding:0!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  box-shadow:none!important;
}
html body .header .drift-search-btn{
  align-self:stretch!important;
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  min-width:84px!important;
  height:44px!important;
  min-height:44px!important;
  margin:0!important;
  padding:0 16px!important;
  border:0!important;
  border-left:1px solid rgba(255,255,255,.18)!important;
  border-radius:0 9px 9px 0!important;
  background:var(--shell-blue,#0a6fb4)!important;
  color:#fff!important;
  box-shadow:none!important;
  font-size:13px!important;
  font-weight:750!important;
  line-height:1!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  transition:background-color .14s ease!important;
}
html body .header .drift-search-btn:hover,
html body .header .drift-search-btn:focus-visible{
  background:var(--shell-blue-deep,#07598f)!important;
  outline:none!important;
}
html body .header .drift-search-btn:focus-visible{
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)!important;
}
html body .header .drift-search-btn svg{display:none!important;}
html body .header .suggest{
  z-index:5000!important;
  margin-top:0!important;
}

/* ========================================================================
   PRODUCT SHOWCASE — one coherent, transparent glass control language.
   ======================================================================== */
html body #view-reels{
  --basalt-show-blue:var(--shell-blue,#0a6fb4);
  --basalt-show-blue-deep:var(--shell-blue-deep,#07598f);
  --basalt-show-glass:rgba(7,18,29,.12);
  --basalt-show-glass-hover:rgba(10,61,95,.22);
  --basalt-show-line:rgba(164,218,255,.18);
  --basalt-show-line-strong:rgba(164,218,255,.34);
}

/* The media switch now sits directly at the top edge of the Showcase. */
html body #view-reels .wave-media-mode{
  top:calc(7px + env(safe-area-inset-top))!important;
  left:50%!important;
  z-index:36!important;
  gap:2px!important;
  max-width:calc(100vw - 220px)!important;
  padding:2px!important;
  transform:translateX(-50%)!important;
  border:1px solid var(--basalt-show-line)!important;
  border-radius:999px!important;
  background:rgba(7,18,29,.07)!important;
  box-shadow:none!important;
  filter:none!important;
  -webkit-backdrop-filter:blur(13px) saturate(125%)!important;
  backdrop-filter:blur(13px) saturate(125%)!important;
}
html body #view-reels .wave-mode-btn{
  min-height:30px!important;
  padding:0 13px!important;
  border:1px solid transparent!important;
  border-radius:999px!important;
  background:transparent!important;
  color:rgba(255,255,255,.78)!important;
  box-shadow:none!important;
  filter:none!important;
  font:750 11.5px/1 system-ui,-apple-system,"Segoe UI",sans-serif!important;
  letter-spacing:.005em!important;
  transition:background-color .13s ease,border-color .13s ease,color .13s ease!important;
}
html body #view-reels .wave-mode-btn:hover,
html body #view-reels .wave-mode-btn:focus-visible{
  color:#fff!important;
  border-color:rgba(164,218,255,.20)!important;
  background:rgba(255,255,255,.055)!important;
  outline:none!important;
}
html body #view-reels .wave-mode-btn.is-active{
  color:#fff!important;
  border-color:rgba(132,207,255,.28)!important;
  background:rgba(10,111,180,.18)!important;
  font-weight:800!important;
}

/* Top controls and sound use the same glass material as the mode switch. */
html body #view-reels .reel-back,
html body #view-reels #reelSearchBtn,
html body #view-reels .lens-audio-pill{
  border:1px solid var(--basalt-show-line)!important;
  background:var(--basalt-show-glass)!important;
  color:#fff!important;
  box-shadow:none!important;
  filter:none!important;
  -webkit-backdrop-filter:blur(12px) saturate(125%)!important;
  backdrop-filter:blur(12px) saturate(125%)!important;
}
html body #view-reels .reel-back:hover,
html body #view-reels #reelSearchBtn:hover,
html body #view-reels #reelSearchBtn:focus-visible{
  border-color:var(--basalt-show-line-strong)!important;
  background:var(--basalt-show-glass-hover)!important;
  outline:none!important;
}
html body #view-reels .lens-audio.open .lens-audio-pill,
html body #view-reels .lens-audio:hover .lens-audio-pill,
html body #view-reels .lens-audio:focus-within .lens-audio-pill{
  border-color:var(--basalt-show-line-strong)!important;
  background:rgba(7,25,39,.24)!important;
}

/* Showcase search: same radius/blue language as the storefront search. */
html body #view-reels #reelSearchBox{
  height:40px!important;
  padding:0 9px 0 13px!important;
  border:1px solid var(--basalt-show-line)!important;
  border-radius:10px!important;
  background:rgba(7,18,29,.14)!important;
  color:#fff!important;
  box-shadow:none!important;
  filter:none!important;
  -webkit-backdrop-filter:blur(14px) saturate(130%)!important;
  backdrop-filter:blur(14px) saturate(130%)!important;
}
html body #view-reels #reelSearchBox:focus-within{
  border-color:rgba(132,207,255,.42)!important;
  background:rgba(7,24,38,.20)!important;
  box-shadow:none!important;
}
html body #view-reels #reelSearchInput{
  color:#fff!important;
  font-size:13px!important;
  font-weight:550!important;
}
html body #view-reels #reelSearchInput::placeholder{
  color:rgba(235,246,255,.56)!important;
  opacity:1!important;
}
html body #view-reels #reelSearchBox .reel-search-close{
  color:rgba(255,255,255,.78)!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
html body #view-reels #reelSearchBox .reel-search-close:hover{
  color:#fff!important;
  background:rgba(255,255,255,.07)!important;
}
html body #view-reels #reelSearchResults{
  border:1px solid var(--basalt-show-line)!important;
  border-radius:12px!important;
  background:rgba(6,15,24,.78)!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:blur(16px) saturate(125%)!important;
  backdrop-filter:blur(16px) saturate(125%)!important;
}
html body #view-reels .wave-search-row:hover,
html body #view-reels .wave-search-row:focus-visible{
  background:rgba(10,111,180,.14)!important;
  outline:none!important;
}
html body #view-reels .wave-search-kind{
  background:rgba(10,111,180,.16)!important;
  color:rgba(236,248,255,.90)!important;
  border:1px solid rgba(132,207,255,.16)!important;
}

/* Like / Cart / Share stay in their familiar positions, but visually belong
   to the same eShobuy control family. */
html body #view-reels .reel-actions .reel-act button{
  border:1px solid var(--basalt-show-line)!important;
  background:var(--basalt-show-glass)!important;
  color:#fff!important;
  box-shadow:none!important;
  filter:none!important;
  -webkit-backdrop-filter:blur(10px) saturate(120%)!important;
  backdrop-filter:blur(10px) saturate(120%)!important;
  transition:background-color .13s ease,border-color .13s ease!important;
}
html body #view-reels .reel-actions .reel-act button:hover,
html body #view-reels .reel-actions .reel-act button:focus-visible{
  border-color:var(--basalt-show-line-strong)!important;
  background:var(--basalt-show-glass-hover)!important;
  outline:none!important;
}
html body #view-reels .reel-actions .reel-act button.on{
  border-color:rgba(132,207,255,.42)!important;
  background:rgba(10,111,180,.20)!important;
}
html body #view-reels .reel-actions .reel-act span{
  color:rgba(239,248,255,.82)!important;
  font-weight:650!important;
}

/* Product label + CTAs keep the existing hierarchy while using the site's
   blue accent instead of an unrelated visual treatment. */
html body #view-reels .reel-tag{
  border:1px solid rgba(132,207,255,.18)!important;
  background:rgba(10,111,180,.16)!important;
  color:#f3fbff!important;
  box-shadow:none!important;
}
html body #view-reels .reel-cta .buy{
  border:1px solid rgba(123,204,255,.20)!important;
  background:var(--basalt-show-blue)!important;
  color:#fff!important;
  box-shadow:none!important;
}
html body #view-reels .reel-cta .buy:hover,
html body #view-reels .reel-cta .buy:focus-visible{
  background:var(--basalt-show-blue-deep)!important;
  outline:none!important;
}
html body #view-reels .reel-cta .view{
  border:1px solid var(--basalt-show-line)!important;
  background:rgba(7,18,29,.12)!important;
  color:#fff!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:blur(10px)!important;
  backdrop-filter:blur(10px)!important;
}

@media (max-width:760px){
  html body #view-reels .wave-media-mode{
    top:calc(6px + env(safe-area-inset-top))!important;
    max-width:calc(100vw - 116px)!important;
    padding:2px!important;
  }
  html body #view-reels .wave-mode-btn{
    min-height:28px!important;
    padding:0 9px!important;
    font-size:10.5px!important;
  }
  html body #view-reels #reelSearchBox{height:36px!important;}
}
@media (max-width:520px){
  html body .header .drift-search-btn{
    min-width:70px!important;
    padding:0 11px!important;
    font-size:12px!important;
  }
  html body .header .search-box input{padding-left:13px!important;padding-right:9px!important;font-size:13px!important;}
}
@media (max-width:390px){
  html body #view-reels .wave-mode-btn{padding:0 7px!important;font-size:9.8px!important;}
}
@media (prefers-reduced-motion:reduce){
  html body .header .search-wrap .search-box,
  html body .header .drift-search-btn,
  html body #view-reels .wave-mode-btn,
  html body #view-reels .reel-actions .reel-act button{transition:none!important;}
}