/* 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 — video section, matched to the store's theme.
Loaded last. Palette unchanged. */
/* ═══════════════════════════════════════════════════════════════════════
1. THE GALLERY COUNTER IS GONE
═══════════════════════════════════════════════════════════════════════
A photo-gallery post carried three indicators at once: arrows, dots, and
a "1 / 9" counter. Three ways of saying the same thing, and the counter
was the least useful — it gives a shopper a number when what they want is
"how much is left", which the dots show at a glance and show better.
Hidden here as well as removed in JS, so a re-render cannot flash it back
between the render and the next pass. */
html body #view-reels .flux-gallery-count,
html body.stb-standard #view-reels .flux-gallery-count,
html body .flux-gallery-count,
html body.stb-standard .flux-gallery-count{ display: none!important; }
/* ═══════════════════════════════════════════════════════════════════════
2. DOTS — the store's own language, not a social app's
═══════════════════════════════════════════════════════════════════════
Square, hairline, glass. The active one widens into a bar rather than
changing colour, which reads at a glance on a moving video where a colour
change does not. */
html body #view-reels .flux-gallery-dots,html body.stb-standard #view-reels .flux-gallery-dots{
display: flex!important;
align-items: center!important;
gap: 5px!important;
padding: 6px 9px!important;
border-radius: var(--shell-r, 3px)!important;
background: rgba(12,16,22,.42)!important;
-webkit-backdrop-filter: blur(12px) saturate(160%);
backdrop-filter: blur(12px) saturate(160%);
border: 1px solid rgba(255,255,255,.14)!important;
overflow: hidden!important;
}
html body #view-reels .flux-gallery-dot,html body.stb-standard #view-reels .flux-gallery-dot{
width: 6px!important;
height: 6px!important;
padding: 0!important;
border: 0!important;
border-radius: 2px!important;
background: rgba(255,255,255,.46)!important;
opacity: 1!important;
cursor: pointer;
flex: 0 0 auto;
transition: width .22s cubic-bezier(.22,.61,.36,1),
background .18s ease, transform .18s ease, margin .22s ease;
}
html body #view-reels .flux-gallery-dot[aria-current="true"],html body.stb-standard #view-reels .flux-gallery-dot[aria-current="true"]{
width: 20px!important;
background: #fff!important;
}
/* Past eight photos the dots stop being scannable, so the row becomes a
sliding window of eight that follows the active image. The end dots
shrink, which says "there is more this way" without adding an element —
which is what the counter was doing badly. */
html body #view-reels .zinc-dots-compact .zinc-dot-hidden,html body.stb-standard #view-reels .zinc-dots-compact .zinc-dot-hidden{
width: 0!important;
margin: 0 -2.5px!important;
opacity: 0!important;
pointer-events: none;
}
html body #view-reels .zinc-dots-compact .zinc-dot-edge,html body.stb-standard #view-reels .zinc-dots-compact .zinc-dot-edge{
transform: scale(.6);
background: rgba(255,255,255,.30)!important;
}
/* ═══════════════════════════════════════════════════════════════════════
3. GALLERY ARROWS
═══════════════════════════════════════════════════════════════════════
Square and hairline like every other control in the store, instead of the
round social-app buttons. Hidden on touch, where swiping is the gesture
and an arrow is just something to hit by accident. */
html body #view-reels .flux-gallery-nav,html body.stb-standard #view-reels .flux-gallery-nav{
width: 38px!important;
height: 38px!important;
border-radius: var(--shell-r, 3px)!important;
background: rgba(12,16,22,.44)!important;
-webkit-backdrop-filter: blur(12px) saturate(160%);
backdrop-filter: blur(12px) saturate(160%);
border: 1px solid rgba(255,255,255,.16)!important;
color: #fff!important;
font-size: 20px!important;
line-height: 1!important;
box-shadow: none!important;
transition: background .16s ease;
}
html body #view-reels .flux-gallery-nav:hover,html body.stb-standard #view-reels .flux-gallery-nav:hover{ background: rgba(12,16,22,.72)!important; }
@media (hover: none){
html body #view-reels .flux-gallery-nav,html body.stb-standard #view-reels .flux-gallery-nav{ display: none!important; }
}
/* ═══════════════════════════════════════════════════════════════════════
4. SOUND CONTROL
═══════════════════════════════════════════════════════════════════════
One control, top right, square and glass. The muted state is shown by a
dimmed icon AND a struck-through speaker, because on a bright video frame
opacity alone is not readable. */
html body #view-reels .reel-sound,
html body.stb-standard #view-reels .reel-sound,
html body #view-reels .reel-mute,
html body.stb-standard #view-reels .reel-mute,
html body .ember-sound,
html body.stb-standard .ember-sound{
width: 40px!important;
height: 40px!important;
display: grid!important;
place-items: center!important;
border-radius: var(--shell-r, 3px)!important;
background: rgba(12,16,22,.46)!important;
-webkit-backdrop-filter: blur(12px) saturate(160%);
backdrop-filter: blur(12px) saturate(160%);
border: 1px solid rgba(255,255,255,.16)!important;
color: #fff!important;
box-shadow: none!important;
transition: background .16s ease, border-color .16s ease;
}
html body #view-reels .reel-sound:hover,html body.stb-standard #view-reels .reel-sound:hover{ background: rgba(12,16,22,.74)!important; }
html body #view-reels .reel-sound.is-muted,html body.stb-standard #view-reels .reel-sound.is-muted{
border-color: rgba(255,255,255,.10)!important;
color: rgba(255,255,255,.62)!important;
}
/* While muted, a small hint tells a first-time shopper what to do —
"tap for sound" is the one thing they cannot guess from a muted icon.
It disappears for good once sound has been turned on. */
html body #view-reels .reel-sound.is-muted::after,html body.stb-standard #view-reels .reel-sound.is-muted::after{
content: "Tap for sound";
position: absolute;
top: 50%; right: calc(100% + 8px);
transform: translateY(-50%);
white-space: nowrap;
padding: 4px 8px;
border-radius: var(--shell-r, 3px);
background: rgba(12,16,22,.60);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.12);
font-size: 10.5px;
font-weight: 650;
letter-spacing: .04em;
color: rgba(255,255,255,.88);
pointer-events: none;
animation: zinchint 5.5s ease forwards;
}
html body.zinc-sound-on #view-reels .reel-sound::after,html body.stb-standard.zinc-sound-on #view-reels .reel-sound::after{ display: none!important; }
@keyframes zinchint{
0%,4%{ opacity: 0; transform: translateY(-50%) translateX(4px) }
10%,72%{ opacity: 1; transform: translateY(-50%) translateX(0) }
100%{ opacity: 0 }
}
html body #view-reels .reel-sound,html body.stb-standard #view-reels .reel-sound{ position: relative; }
/* ═══════════════════════════════════════════════════════════════════════
5. PHOTO STAGE
═══════════════════════════════════════════════════════════════════════
The blurred backdrop was showing through at full strength and tinting the
product. Darkened and desaturated so it reads as a backdrop rather than
competing with the photo in front of it. */
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{
filter: blur(30px) saturate(120%) brightness(.42)!important;
transform: scale(1.18)!important;
}
html body #view-reels .reel-photo,
html body.stb-standard #view-reels .reel-photo,
html body #view-reels .flux-gallery-image,
html body.stb-standard #view-reels .flux-gallery-image{
object-fit: contain!important;
mix-blend-mode: normal!important;
filter: none!important;
}
/* ═══════════════════════════════════════════════════════════════════════
6. THE SLIDE ITSELF
═══════════════════════════════════════════════════════════════════════ */
html body #view-reels .reel-slide,html body.stb-standard #view-reels .reel-slide{
scroll-snap-align: start;
scroll-snap-stop: always; /* one slide per swipe, never two */
}
html body #reelFeed,html body.stb-standard #reelFeed{
scroll-snap-type: y mandatory;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain; /* a swipe past the end must not pull the page */
}
@media (prefers-reduced-motion: reduce){
html body #view-reels .flux-gallery-dot,
html body.stb-standard #view-reels .flux-gallery-dot,
html body #view-reels .reel-sound,
html body.stb-standard #view-reels .reel-sound{ transition: none!important; }
html body #view-reels .reel-sound.is-muted::after,html body.stb-standard #view-reels .reel-sound.is-muted::after{ animation: none; opacity: 1; }
}