/* Built by boost-specificity.js — each `html body X` selector is
mirrored as `html body.stb-standard X` so this layer
outranks the legacy `body.stb-standard X` rules that
would otherwise win on specificity. Edit the source, not this. */
/* Built by boost-specificity.js — each `html body X` selector is
mirrored as `html body.stb-standard X` so this layer
outranks the legacy `body.stb-standard X` rules that
would otherwise win on specificity. Edit the source, not this. */
/* Built by boost-specificity.js — each `html body X` selector is
mirrored as `html body.stb-standard X` so this layer
outranks the legacy `body.stb-standard X` rules that
would otherwise win on specificity. Edit the source, not this. */
/* eShobuy — Showcase: no glow, and the filter moves off the search line.
=========================================================================
Loaded LAST (after), so it settles these two remaining issues without
touching any/ media/search logic — this is a visual-geometry layer
only, exactly like/ before it.
-------------------------------------------------------------------------
1. THE GLOW/HALO AROUND THE PRODUCT PHOTO
-------------------------------------------------------------------------
The screenshot shows a bright halo bleeding out from behind the product
photo on every Showcase slide, in both Image mode and Video mode's poster
frame. That halo is not part of the photo itself — it is a second copy of
the SAME photo, blown up 12-18%, blurred and used as a backdrop:
.reel-photo-stage > .reel-photo-blur (Image mode)
.reel-slide[data-media="image"]::before (poster/legacy) already dimmed this layer once (brightness .42) because it was
tinting the product, but a blurred, scaled-up copy of a bright product
photo still reads as a glow/vignette around the sharp image sitting on
top of it — which is exactly what the screenshot is pointing at.
Fixed by removing the blurred layer entirely rather than dimming it
further. Both stages already declare a plain, solid backdrop
(#05080f / #0a0a0f), so hiding the blur leaves a clean, flat dark
background behind every product photo — no gradient, no glow, no
halo, on any product regardless of its own photo's colours.
-------------------------------------------------------------------------
2. THE MEDIA FILTER (Video / Image / Video & Image) SAT ON THE SEARCH LINE
-------------------------------------------------------------------------
Back button + search live in `.reel-top`, in normal flow, one row.
The Video/Image/Video&Image filter was a SEPARATE element dropped into
the same `.reel-top`, but positioned absolutely and centred over that
same row — so opening search and the filter pill were competing for the
same strip of the screen (worst on narrow phones, where the search box
is close to full width).
Fixed structurally, not just visually:
- `index.html` now wraps back+search+results in `.reel-top-row`
(row 1). No JS/behaviour changed — same three controls, same ids.
- `.reel-top` becomes a column: row 1 is `.reel-top-row`, row 2 is the
filter, which's JS still appends as the next child of
`.reel-top` exactly as before.
- The filter drops its absolute positioning and becomes a normal,
centred flex child on its own line — under search, never over it.
========================================================================= */
/* ── 1. Kill the blurred glow layer, on every product ─────────────────── */
html body #view-reels .reel-photo-blur,
html body.stb-standard #view-reels .reel-photo-blur,
html body #view-reels .flux-gallery-blur,
html body.stb-standard #view-reels .flux-gallery-blur{
display: none!important;
}
html body #view-reels .reel-slide[data-media="image"]::before,html body.stb-standard #view-reels .reel-slide[data-media="image"]::before{
content: none!important;
display: none!important;
}
/* The stage itself stays a flat, solid ground — no gradient substituted
in the blur's place. */
html body #view-reels .reel-photo-stage,
html body.stb-standard #view-reels .reel-photo-stage,
html body #view-reels .reel-slide,
html body.stb-standard #view-reels .reel-slide{
background: #05080a!important;
background-image: none!important;
box-shadow: none!important;
filter: none!important;
}
/* Any drop-shadow/box-shadow anyone previously hung on the photo or its
stage (product page shares .stage too — scoped to reels only here). */
html body #view-reels .reel-photo,
html body.stb-standard #view-reels .reel-photo,
html body #view-reels .reel-media,
html body.stb-standard #view-reels .reel-media{
box-shadow: none!important;
filter: none!important;
}
/* ── 2. Two-row top bar: search on row 1, filter on its own row 2 ─────── */
html body #view-reels .reel-top,html body.stb-standard #view-reels .reel-top{
display: flex!important;
flex-direction: column!important;
align-items: stretch!important;
gap: 10px!important;
}
html body #view-reels .reel-top-row,html body.stb-standard #view-reels .reel-top-row{
display: flex!important;
flex-direction: row!important;
align-items: center!important;
gap: 10px!important;
width: 100%!important;
}
/* The filter leaves absolute positioning and becomes row 2: a normal,
centred flex child, sized to its own content (not stretched full-width),
sitting cleanly BELOW the search row instead of on top of it. */
html body #view-reels .wave-media-mode,
html body.stb-standard #view-reels .wave-media-mode,
html body #view-reels .kiln-media-mode,
html body.stb-standard #view-reels .kiln-media-mode,
html body #view-reels .reel-mode-row,
html body.stb-standard #view-reels .reel-mode-row{
position: static!important;
top: auto!important;
left: auto!important;
right: auto!important;
transform: none!important;
width: auto!important;
max-width: 100%!important;
margin: 0 auto!important;
}
@media (max-width: 760px){
html body #view-reels .reel-top,html body.stb-standard #view-reels .reel-top{ gap: 8px!important; }
html body #view-reels .reel-top-row,html body.stb-standard #view-reels .reel-top-row{ gap: 8px!important; }
}