/* Floating gooey shop sidebar (shop + product pages). Neon blob color changes per item and bleeds onto the page. */
@property --nc{syntax:'<color>';inherits:true;initial-value:#00E5FF}
.sb{--nc:#00E5FF;--sbw:68px;position:fixed;z-index:35;left:14px;top:calc(var(--head-h) + 14px);max-height:calc(100vh - var(--head-h) - 28px);display:flex;width:var(--sbw);padding:5px;border-radius:26px;
  background:color-mix(in srgb,var(--nc) 14%,rgba(255,255,255,.06));border:1px solid color-mix(in srgb,var(--nc) 70%,transparent);
  box-shadow:0 0 18px -4px var(--nc),0 0 60px -14px var(--nc),0 24px 50px -20px rgba(0,0,0,.55);
  transition:width .45s cubic-bezier(.2,.8,.2,1),opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),--nc .45s ease;opacity:0;transform:translateX(-24px);pointer-events:none;
  animation:sb-cycle 14s linear infinite}
.sb.lit{animation:none}
@keyframes sb-cycle{0%,100%{--nc:#00E5FF}16%{--nc:#FF2E97}33%{--nc:#B6FF00}50%{--nc:#FF8A00}66%{--nc:#9D5CFF}83%{--nc:#FFE600}}
.sb.show{opacity:1;transform:none;pointer-events:auto}
.sb.open{--sbw:272px}
.sb-aura{position:absolute;z-index:-1;left:0;top:0;width:820px;height:820px;margin:-410px 0 0 -330px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--nc) 48%,transparent),color-mix(in srgb,var(--nc) 16%,transparent) 50%,transparent);
  opacity:.55;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s;transform:translate(40px,50vh)}
.sb.lit .sb-aura{opacity:1}
:root[data-theme=light] .sb-aura{opacity:.4}:root[data-theme=light] .sb.lit .sb-aura{opacity:.75}
.sb-bg{position:absolute;inset:5px;border-radius:21px;background:#fff;z-index:0}
.sb-in{position:relative;z-index:2;flex:1;min-width:0;display:flex;flex-direction:column;border-radius:21px;color:#1A1F29;overflow:hidden}
.sb-head{display:flex;align-items:center;gap:10px;height:58px;padding:0 12px 0 11px;border-bottom:1px solid #EEF0F3;flex:none;cursor:pointer}
.sb-logo{flex:none;width:36px;height:36px;border-radius:12px;background:#09172B;display:grid;place-items:center;box-shadow:0 0 14px -2px var(--nc)}
.sb-logo img{width:26px;height:26px}
.sb-name{font:800 16px var(--f-body);white-space:nowrap;opacity:0;transition:opacity .25s}
.sb-col{margin-left:auto;flex:none;width:28px;height:28px;border:0;border-radius:9px;background:#F3F4F6;color:#6B7280;cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .25s}
.sb.open .sb-name,.sb.open .sb-col{opacity:1;transition-delay:.12s}
.sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px;scrollbar-width:thin;overscroll-behavior:contain}
.sb-sep{height:1px;background:#EEF0F3;margin:8px 4px}
.sb-it{position:relative;z-index:1;display:flex;align-items:center;gap:12px;width:100%;height:44px;padding:0 13px;border:0;border-radius:14px;background:none;color:#1F2937;font:600 14px var(--f-body);text-decoration:none;text-align:left;cursor:pointer;white-space:nowrap;transition:color .2s}
.sb-it svg{flex:none;width:22px;height:22px}
.sb-it .lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .3s}
.sb.open .sb-it .lb{opacity:1;transform:none;transition-delay:.1s}
.sb-it .car{flex:none;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-4px 4px 0 0;opacity:0;transition:transform .3s,opacity .2s}
.sb.open .sb-it .car{opacity:.6}
.sb-it[aria-expanded=true] .car{transform:rotate(225deg);margin-top:4px}
.sb-it.hot,.sb-sub a.hot,.sb-sub a.hot em{color:#07101F}
.sb-it:focus-visible,.sb-sub a:focus-visible{outline:2px solid #2F6BFF;outline-offset:-2px}
.sb-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1)}
.sb.open .sb-grp.on .sb-sub{grid-template-rows:1fr}
.sb-sub>div{overflow:hidden;min-height:0}
.sb-sub ul{list-style:none;margin:2px 0 6px 24px;padding:0 0 0 10px;border-left:1.5px solid #E5E7EB}
.sb-sub a{position:relative;z-index:1;display:flex;align-items:center;gap:10px;height:38px;padding:0 10px;border-radius:12px;color:#374151;font:600 13px var(--f-body);text-decoration:none;white-space:nowrap}
.sb-sub a::before{content:"";position:absolute;left:-11px;top:50%;width:9px;border-top:1.5px solid #E5E7EB}
.sb-sub a img{flex:none;width:28px;height:22px;object-fit:contain}
.sb-sub a span{flex:1;overflow:hidden;text-overflow:ellipsis}
.sb-sub a em{font-style:normal;font-size:11px;color:#9CA3AF}
/* goo layer: neon blob follows the hovered item; in rail mode a tooltip blob oozes out to the right on a gooey neck */
.sb-goo{position:absolute;left:0;top:0;width:calc(100% + 260px);height:100%;pointer-events:none;z-index:1;filter:url(#sb-goo) drop-shadow(0 0 6px var(--nc)) drop-shadow(0 0 18px var(--nc))}
.sb-blob,.sb-tb,.sb-nk{position:absolute;left:0;top:0;background:var(--nc);border-radius:14px;opacity:0;transition:transform .38s cubic-bezier(.3,1.4,.5,1),width .38s cubic-bezier(.3,1.4,.5,1),height .3s,opacity .2s}
.sb-tb{height:36px;border-radius:12px;transition:transform .42s cubic-bezier(.3,1.3,.5,1),width .42s cubic-bezier(.3,1.3,.5,1),opacity .2s}
.sb-nk{height:14px;border-radius:7px}
.sb-tip{position:absolute;z-index:3;left:0;top:0;height:36px;display:flex;align-items:center;padding:0 14px;color:#07101F;font:800 13px var(--f-body);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s}
.sb-tip.on{opacity:1;transition-delay:.16s}
.sb-fab{display:none}
@media (min-width:901px){ body.has-sb main .wrap{padding-left:max(20px,calc(96px - max(0px,(100vw - var(--wrap)) / 2)))} }
@media (max-width:900px){
  .sb{left:10px;top:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px));max-height:min(70vh,560px);--sbw:min(300px,calc(100vw - 20px));transform:translateY(16px) scale(.96);transform-origin:bottom left}
  .sb.show{opacity:0;transform:translateY(16px) scale(.96);pointer-events:none}
  .sb.show.open{opacity:1;transform:none;pointer-events:auto}
  .sb .lb,.sb .sb-name,.sb .sb-col{opacity:1!important;transform:none!important}.sb .car{opacity:.6}
  .sb-goo,.sb-tip,.sb-aura{display:none}
  .sb-it.hot,.sb-sub a.hot,.sb-sub a.hot em{color:inherit}
  .sb-fab{--nc:#00E5FF;position:fixed;z-index:36;left:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:8px;height:48px;padding:0 18px 0 14px;border:1.5px solid var(--nc);border-radius:999px;background:#fff;color:#111827;font:800 14px var(--f-body);
    box-shadow:0 0 16px -2px var(--nc),0 0 40px -10px var(--nc),0 14px 30px -10px rgba(0,0,0,.55);opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1);animation:sb-cycle 14s linear infinite}
  .sb-fab svg{width:20px;height:20px}
  .sb-fab.show{opacity:1;transform:none;pointer-events:auto}
}
@media (prefers-reduced-motion:reduce){.sb,.sb *,.sb-fab{transition:none!important;animation:none!important}}