/* Bars that stay on screen while you scroll (headers, filter chips, shop bars), plus touch behaviour.
   They use solid backgrounds and their own GPU layer: on iPhone Safari a blurred see-through bar flickers,
   and content with its own layer gets painted on top of sticky bars that don't have one. */

/* ---------- touch and scrolling ---------- */
html { -webkit-tap-highlight-color: transparent; }
button, a, [role=button], label, input, select, textarea { touch-action: manipulation; }
#shc, .e7-sc, #cbody, .screen > [class*="sc"] { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
img { -webkit-user-drag: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- shared: solid, own layer, above content ---------- */
.mx-cats, #shc .mx-act, .czs-head, .e7-nb, #cs .nb {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); will-change: transform; z-index: 30 !important;
}

/* ---------- MP Shop sheet ---------- */
.mx-cats { background: var(--s, #101018) !important; }
#shc .mx-cats { top: 0 !important; }
#shc .mx-act { z-index: 32 !important; }
#shc .mx-act.on { background: var(--s, #101018) !important; box-shadow: 0 -10px 24px -14px rgba(0,0,0,.8); }
/* nothing scrolls above the category bar */
#shc:has(.mps) { padding-top: 0 !important; }
#shc:has(.mps) > .grab { display: none; }
#shc:has(.mps) .mps { padding-top: 14px; }

/* ---------- Search: search box + chips stick under the compact top bar ---------- */
#hm .nb { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); z-index: 31; }
#hm.scrolled .nb, #hm .scrolled .nb { background: var(--bg, #07070b) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html:not(.th) #hm.scrolled .nb, html:not(.th) #hm .scrolled .nb { background: #07070b !important; }
#hm .x5 .xsticky, #hm .xsticky {
  top: 0 !important; background: var(--bg, #08080d) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); z-index: 30 !important;
}
html:not(.th) #hm .xsticky { background: #07070b !important; }
/* only once the compact bar is showing (--hm-nbh is measured in app.js): stop just under it and cover the gap above */
#hm.scrolled .xsticky { top: var(--hm-nbh, 44px) !important; }
/* the strip that covers the gap above a bar only paints while the bar is actually stuck (js/stick.js), never over content above it */
#hm.scrolled .xsticky.stuck { box-shadow: 0 -24px 0 0 var(--bg, #07070b) !important; }
html:not(.th) #hm.scrolled .xsticky.stuck { box-shadow: 0 -24px 0 0 #07070b !important; }

/* ---------- Casino ---------- */
#cs.scrolled .nb { background: var(--bg, #07070b) !important; }
html:not(.th) #cs.scrolled .nb { background: #07070b !important; }
.lz-chips {
  background: var(--bg, #07070b) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none;
  -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); z-index: 30 !important;
}
html:not(.th) .lz-chips { background: #07070b !important; }
.lz-chips.stuck { box-shadow: 0 -24px 0 0 var(--bg, #07070b); }
html:not(.th) .lz-chips.stuck { box-shadow: 0 -24px 0 0 #07070b; }

/* ---------- Search with a photo background: clear at the top (photo shows through, like the header), frosted glass once scrolled ---------- */
html[data-theme=photo] #hm .xsticky { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-theme=photo] #hm.scrolled .xsticky, html[data-theme=photo] #hm.scrolled .nb, html[data-theme=photo] #hm .scrolled .nb {
  background: rgba(255,255,255,.07) !important; box-shadow: inset 0 -.5px 0 rgba(255,255,255,.12) !important;
  -webkit-backdrop-filter: saturate(160%) blur(26px) !important; backdrop-filter: saturate(160%) blur(26px) !important;
}