/* ShopTV Reels Pro v7
   Correctly reserves the shared header and bottom dock, then presents every Reel
   inside the usable portrait stage. All selectors are scoped to /reels. */
html:has(body.reels-body) { background:#eef3fa; }
body.reels-body {
  --stv-reels-header-h:68px;
  --stv-reels-dock-reserve:72px;
  --stv-reels-stage-height:calc(100dvh - 140px);
  --stv-reels-frame-width:min(100%,500px);
  overflow:hidden!important;
  overflow-x:hidden!important;
  padding:0!important;
  background:#eef3fa!important;
  color:#fff;
}
body.reels-body .marketing-header {
  position:relative!important;
  top:auto!important;
  z-index:1150!important;
  width:100%;
  transform:none!important;
}
body.reels-body .site-footer,
body.reels-body .reels-topbar,
body.reels-body>[data-ai-widget] { display:none!important; }
body.reels-body main {
  display:block!important;
  position:relative!important;
  width:100%!important;
  height:var(--stv-reels-stage-height)!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#eaf0f8!important;
}
body.reels-body main>.flash-message,
body.reels-body main>.notice { position:fixed;z-index:1190;top:10px;left:10px;right:10px; }
body.reels-body .reel-feed {
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:contain!important;
  scroll-snap-type:y mandatory!important;
  scroll-padding:0!important;
  scrollbar-width:none!important;
  background:linear-gradient(135deg,#eaf1fa,#f8fbff)!important;
}
body.reels-body .reel-feed::-webkit-scrollbar { display:none!important; }
body.reels-body .reel-card {
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  isolation:isolate!important;
  contain:layout paint style!important;
  background:transparent!important;
  scroll-snap-align:start!important;
  scroll-snap-stop:always!important;
}
body.reels-body .reel-media {
  position:relative!important;
  display:block!important;
  width:var(--stv-reels-frame-width,100%)!important;
  height:100%!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0 auto!important;
  overflow:hidden!important;
  isolation:isolate!important;
  aspect-ratio:9/16!important;
  border:0!important;
  border-radius:0!important;
  background:#08172b!important;
  box-shadow:none!important;
}
body.reels-body .reel-media>video,
body.reels-body .reel-media>iframe {
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  border:0!important;
  object-fit:cover!important;
  background:#08172b!important;
}
body.reels-body .reel-video-shade {
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,rgba(4,14,31,.23) 0%,transparent 17%,transparent 42%,rgba(4,14,31,.15) 54%,rgba(4,14,31,.76) 100%)!important;
}
body.reels-body .reel-progress-track {
  top:7px!important;
  left:12px!important;
  right:12px!important;
  height:3px!important;
  z-index:12!important;
  border-radius:99px!important;
  background:rgba(255,255,255,.38)!important;
  box-shadow:0 1px 5px rgba(0,0,0,.16)!important;
}
body.reels-body .reel-progress-track>span { background:linear-gradient(90deg,#20d8f5,#fff)!important; }
body.reels-body .reel-top-meta {
  position:absolute!important;
  top:19px!important;
  left:12px!important;
  right:12px!important;
  z-index:14!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  min-height:34px!important;
  padding:0!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:850!important;
  line-height:1.25!important;
  text-shadow:0 2px 8px rgba(0,0,0,.65)!important;
}
body.reels-body .reel-live-dot {
  flex:0 0 7px!important;
  width:7px!important;
  height:7px!important;
  border-radius:50%!important;
  background:#35e0ff!important;
  box-shadow:0 0 0 4px rgba(53,224,255,.15),0 0 12px rgba(53,224,255,.3)!important;
}
body.reels-body .reel-counter {
  margin-inline-start:auto!important;
  padding:6px 10px!important;
  border:1px solid rgba(255,255,255,.25)!important;
  border-radius:999px!important;
  background:rgba(7,19,39,.57)!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:900!important;
  backdrop-filter:blur(12px)!important;
}
body.reels-body .reel-play-toggle {
  flex:0 0 34px!important;
  width:34px!important;
  height:34px!important;
  border:1px solid rgba(255,255,255,.34)!important;
  border-radius:50%!important;
  background:rgba(7,19,39,.64)!important;
  color:#fff!important;
  backdrop-filter:blur(12px)!important;
}
body.reels-body .reel-action-rail {
  position:absolute!important;
  z-index:24!important;
  top:auto!important;
  right:10px!important;
  bottom:14px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:10px!important;
  max-height:calc(100% - 110px)!important;
}
body.reels-body .reel-shop-avatar {
  display:grid!important;
  place-items:center!important;
  flex:0 0 43px!important;
  width:43px!important;
  height:43px!important;
  overflow:hidden!important;
  border:2px solid rgba(255,255,255,.96)!important;
  border-radius:50%!important;
  background:linear-gradient(135deg,#087cf5,#27d8f4)!important;
  color:#fff!important;
  box-shadow:0 5px 18px rgba(0,0,0,.32),0 0 0 3px rgba(255,255,255,.16)!important;
}
body.reels-body .reel-shop-avatar img { width:100%!important;height:100%!important;object-fit:cover!important; }
body.reels-body .reel-action-button {
  display:flex!important;
  flex:0 0 auto!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  min-width:44px!important;
  min-height:48px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#fff!important;
  text-decoration:none!important;
  text-shadow:0 2px 8px rgba(0,0,0,.72)!important;
  cursor:pointer!important;
}
body.reels-body .reel-action-symbol {
  display:grid!important;
  place-items:center!important;
  width:40px!important;
  height:40px!important;
  border:1px solid rgba(255,255,255,.66)!important;
  border-radius:15px!important;
  background:rgba(247,251,255,.94)!important;
  color:#173c68!important;
  box-shadow:0 5px 16px rgba(0,0,0,.22)!important;
  font-size:19px!important;
  font-weight:950!important;
  line-height:1!important;
  backdrop-filter:blur(12px)!important;
  transition:transform .16s ease,background .16s ease,color .16s ease!important;
}
body.reels-body .reel-action-button small {
  display:block!important;
  max-width:52px!important;
  color:#fff!important;
  font-size:10px!important;
  font-weight:850!important;
  line-height:1.15!important;
  text-align:center!important;
}
body.reels-body .reel-action-button.is-liked .reel-action-symbol {
  border-color:#ffd9e4!important;
  background:#fff!important;
  color:#e91e63!important;
  box-shadow:0 0 0 3px rgba(233,30,99,.18),0 5px 16px rgba(0,0,0,.22)!important;
}
body.reels-body .reel-action-button:active .reel-action-symbol { transform:scale(.94)!important; }
body.reels-body .reel-product-info {
  position:absolute!important;
  z-index:20!important;
  top:auto!important;
  left:12px!important;
  right:78px!important;
  bottom:12px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:7px!important;
  width:auto!important;
  max-width:calc(100% - 90px)!important;
  max-height:58%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  padding:12px!important;
  border:1px solid rgba(255,255,255,.2)!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,rgba(5,21,43,.88),rgba(8,33,61,.72))!important;
  color:#fff!important;
  box-shadow:0 12px 36px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.1)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  overscroll-behavior:contain!important;
}
body.reels-body .reel-shop-follow-row {
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  max-width:100%!important;
  margin:0 0 1px!important;
}
body.reels-body .reel-shop-name {
  display:inline-flex!important;
  align-items:center!important;
  max-width:100%!important;
  min-height:30px!important;
  overflow:hidden!important;
  padding:5px 10px!important;
  border:1px solid rgba(255,255,255,.2)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.09)!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:900!important;
  line-height:1.25!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  backdrop-filter:blur(10px)!important;
}
body.reels-body .reel-follow-form { display:inline-flex!important;margin:0!important; }
body.reels-body .reel-follow-button {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:30px!important;
  padding:0 12px!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:999px!important;
  background:linear-gradient(115deg,#32d9f4,#087cf5)!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:950!important;
  line-height:1!important;
  text-decoration:none!important;
  box-shadow:0 5px 13px rgba(0,0,0,.18)!important;
  white-space:nowrap!important;
}
body.reels-body .reel-follow-button.is-following { background:rgba(255,255,255,.95)!important;color:#155eaa!important;border-color:#d9e8fa!important; }
body.reels-body .reel-product-title {
  display:block!important;
  max-width:100%!important;
  margin:0!important;
  color:#fff!important;
  font-size:clamp(15px,4.2vw,20px)!important;
  font-weight:950!important;
  line-height:1.28!important;
  letter-spacing:-.015em!important;
  text-decoration:none!important;
  text-wrap:balance!important;
  text-shadow:0 2px 10px rgba(0,0,0,.55)!important;
}
body.reels-body .reel-description {
  display:-webkit-box!important;
  max-width:100%!important;
  margin:0!important;
  overflow:hidden!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  color:rgba(255,255,255,.84)!important;
  font-size:11px!important;
  line-height:1.5!important;
  text-shadow:none!important;
}
body.reels-body .reel-price-row { display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;margin:0!important; }
body.reels-body .reel-price-row strong { color:#fff!important;font-size:19px!important;font-weight:1000!important;line-height:1.2!important;text-shadow:0 2px 8px rgba(0,0,0,.25)!important; }
body.reels-body .reel-price-row del { padding:3px 7px!important;border-radius:7px!important;background:rgba(0,0,0,.25)!important;color:#d7e5f5!important;font-size:11px!important; }
body.reels-body .reel-buy-button {
  position:relative!important;
  z-index:35!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  width:100%!important;
  min-height:46px!important;
  margin:2px 0 0!important;
  padding:9px 12px!important;
  border:1px solid rgba(175,229,255,.82)!important;
  border-radius:13px!important;
  background:linear-gradient(115deg,#21c9e9 0%,#087cf5 52%,#0755bd 100%)!important;
  color:#fff!important;
  font:inherit!important;
  font-size:12px!important;
  font-weight:950!important;
  line-height:1.2!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  box-shadow:0 8px 22px rgba(0,90,200,.26),inset 0 1px rgba(255,255,255,.3)!important;
}
body.reels-body .reel-buy-button>span:first-child { color:#fff!important; }
body.reels-body .reel-buy-button>span:last-child { display:grid!important;place-items:center!important;width:25px!important;height:25px!important;border-radius:8px!important;background:rgba(255,255,255,.18)!important;font-size:17px!important; }
body.reels-body .reel-buy-button:disabled { opacity:.62!important;cursor:not-allowed!important;filter:grayscale(.2)!important; }
body.reels-body .reel-comments-sheet {
  z-index:38!important;
  bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;
  left:12px!important;
  right:78px!important;
  max-height:43%!important;
  overflow-y:auto!important;
  border:1px solid rgba(255,255,255,.85)!important;
  border-radius:17px!important;
  background:rgba(255,255,255,.97)!important;
  color:#203a58!important;
  box-shadow:0 16px 40px rgba(0,0,0,.27)!important;
  backdrop-filter:blur(18px)!important;
}
body.reels-body .shop-bottom-nav {
  position:fixed!important;
  z-index:1200!important;
  left:50%!important;
  right:auto!important;
  bottom:calc(5px + env(safe-area-inset-bottom,0px))!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) 54px minmax(0,1fr) minmax(0,1fr)!important;
  align-items:center!important;
  gap:2px!important;
  width:calc(100% - 18px)!important;
  max-width:520px!important;
  min-height:62px!important;
  margin:0!important;
  padding:4px 5px!important;
  transform:translateX(-50%)!important;
  border:1px solid #d7e5f5!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.97)!important;
  color:#65758b!important;
  box-shadow:0 12px 34px rgba(4,26,59,.18),0 2px 8px rgba(4,26,59,.05)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
}
body.reels-body .bottom-nav-item { color:#71819a!important; }
body.reels-body .bottom-nav-item small { color:inherit!important;font-size:clamp(8px,2.35vw,10px)!important;font-weight:850!important; }
body.reels-body .bottom-nav-item.is-active { background:#eaf4ff!important;color:#075fbd!important; }
body.reels-body .bottom-nav-logo.bottom-nav-reels {
  width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;
  margin-top:-14px!important;padding:3px!important;border:2px solid #fff!important;border-radius:17px!important;
  background:linear-gradient(145deg,#fff,#e8f5ff)!important;color:#087cf5!important;
  box-shadow:0 7px 20px rgba(5,64,138,.24)!important;
}
body.reels-body .bottom-nav-logo.bottom-nav-reels:before { inset:-4px!important;border-color:rgba(8,124,245,.19)!important;border-radius:21px!important; }
body.reels-body .bottom-nav-reels-logo { width:42px!important;height:42px!important;object-fit:contain!important; }
body.reels-body .bottom-nav-logo .bottom-nav-logo-label { display:none!important; }
body.reels-body .reels-empty-state {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:100%!important;
  height:100%!important;
  max-height:100%!important;
  padding:24px 20px!important;
  overflow-y:auto!important;
  background:radial-gradient(ellipse at 50% 10%,#163d70,#071b35 65%,#061326)!important;
}
body.reels-body .reel-flash-error { z-index:1300!important; }
@media(min-width:761px) {
  body.reels-body .marketing-header { position:relative!important; }
  body.reels-body .reel-media { border:1px solid rgba(255,255,255,.22)!important;border-radius:22px!important;box-shadow:0 18px 60px rgba(8,28,54,.2)!important; }
  body.reels-body .shop-bottom-nav { bottom:12px!important;width:min(580px,calc(100% - 32px))!important; }
  body.reels-body .reel-product-info { left:12px!important;right:78px!important;bottom:12px!important; }
  body.reels-body .reel-action-rail { right:10px!important;bottom:14px!important; }
}
@media(max-width:420px) {
  body.reels-body .reel-product-info { left:9px!important;right:72px!important;bottom:9px!important;padding:10px!important;gap:6px!important;max-height:61%!important;border-radius:15px!important; }
  body.reels-body .reel-product-title { font-size:15px!important; }
  body.reels-body .reel-description { font-size:10px!important;-webkit-line-clamp:2!important; }
  body.reels-body .reel-price-row strong { font-size:18px!important; }
  body.reels-body .reel-action-rail { right:7px!important;bottom:10px!important;gap:8px!important; }
  body.reels-body .reel-action-symbol { width:37px!important;height:37px!important;border-radius:13px!important;font-size:18px!important; }
  body.reels-body .reel-action-button { min-width:40px!important;min-height:44px!important; }
  body.reels-body .reel-shop-avatar { width:40px!important;height:40px!important;flex-basis:40px!important; }
  body.reels-body .reel-follow-button { min-height:29px!important;padding-inline:10px!important;font-size:10px!important; }
  body.reels-body .bottom-nav-logo.bottom-nav-reels { width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important; }
  body.reels-body .bottom-nav-reels-logo { width:39px!important;height:39px!important; }
}
@media(max-height:690px) {
  body.reels-body .reel-action-rail { gap:6px!important; }
  body.reels-body .reel-action-symbol { width:35px!important;height:35px!important;border-radius:12px!important;font-size:17px!important; }
  body.reels-body .reel-action-button { min-height:39px!important; }
  body.reels-body .reel-shop-avatar { width:36px!important;height:36px!important;flex-basis:36px!important; }
  body.reels-body .reel-product-info { max-height:55%!important;padding:8px 10px!important;gap:5px!important; }
  body.reels-body .reel-description { -webkit-line-clamp:1!important; }
  body.reels-body .reel-buy-button { min-height:42px!important; }
}
@media(prefers-reduced-motion:reduce) {
  body.reels-body .reel-action-symbol,
  body.reels-body .reel-buy-button,
  body.reels-body .bottom-nav-item,
  body.reels-body .bottom-nav-logo { transition:none!important; }
  body.reels-body .bottom-nav-logo.bottom-nav-reels:before { animation:none!important; }
}