/* ============================================================
   2BE CLOTHING WORLD — RAIL CONTROLS
   Replaces the native horizontal scrollbar on every snap rail with a
   prev/next pair and a draggable progress track.

   WHY NOT JUST HIDE THE BAR: the sticky filter row already did that, and
   hiding a scrollbar without replacing it removes the only cue that
   content continues off-screen. Every control here is additive — native
   swipe, scroll-snap, wheel and keyboard all still work exactly as they
   did; this only adds a visible, clickable way to do the same thing.

   ZERO ADDED HEIGHT. The rails already reserved padding-bottom for the
   native bar (.rail 16px, .look__rail/.reels__rail 8px). The track is
   absolutely positioned into that reclaimed band, so nothing below a rail
   moves — which matters most on the PDP, where the 360x640 purchase-panel
   check (e2e2 §7) has no headroom to give.

   Tokens only: radius 0, 8px grid, oxblood confined to the thumb and the
   focus/hover border (guide §01-02, well under the 5% squint budget).
   ============================================================ */

.railx{ position:relative; min-width:0; }

/* The native bar goes away — but only once JS has actually mounted a
   replacement, so a no-JS visitor keeps the real scrollbar rather than
   losing both. */
[data-railx-scroller]{ scrollbar-width:none; -ms-overflow-style:none; }
[data-railx-scroller]::-webkit-scrollbar{ width:0; height:0; display:none; }

/* Controls exist only while there is genuinely something off-screen —
   an arrow that can never do anything is noise. */
.railx:not([data-railx-overflow]) > .railx__arrow,
.railx:not([data-railx-overflow]) > .railx__track{ display:none; }

/* ---------- EDGE FADE ----------
   Reads the surface's own --bg (set by .s-light / .s-dark), so the same
   component fades correctly on the white commerce pages and the dark
   editorial ones. If no surface scope is in play the fade resolves to
   transparent and simply does not render, rather than painting a wrong
   colour over the artwork. */
.railx::before,
.railx::after{
  content:''; position:absolute; top:0; bottom:0; width:56px;
  z-index:var(--z-raised); pointer-events:none; opacity:0;
}
.railx::before{
  left:0;
  background:linear-gradient(to right, var(--bg,transparent), transparent);
}
.railx::after{
  right:0;
  background:linear-gradient(to left, var(--bg,transparent), transparent);
}
.railx[data-railx-start]::before{ opacity:1; }
.railx[data-railx-end]::after{ opacity:1; }

/* ---------- ARROWS ----------
   Vertically centred on the rail's MEDIA, not on the whole rail: the cards
   carry a caption underneath, so centring on the box would float the
   arrows below the middle of the picture. rails.js measures the first
   frame and sets --railx-arrow-top. */
.railx__arrow{
  position:absolute; top:var(--railx-arrow-top,50%);
  transform:translateY(-50%);
  z-index:var(--z-sticky);
  width:44px; height:44px; padding:0;
  display:grid; place-items:center; cursor:pointer;
  background:var(--bg,#FFFFFF); color:var(--ink,#111111);
  border:1px solid var(--hairline,rgba(17,17,17,.14));
  font-size:16px; line-height:1;
}
/* Sit in the page gutter where one exists (the desktop .rail centres its
   content and leaves 48px), so the arrows do not cover artwork. Where
   there is no gutter they fall back to the viewport edge and overlay —
   which is the only option on the narrow rails, and is what the PDP
   gallery does by design. */
.railx__arrow--prev{ left:max(4px, calc(var(--railx-inset,8px) - 48px)); }
.railx__arrow--next{ right:max(4px, calc(var(--railx-inset,8px) - 48px)); }
.railx__arrow:hover{ border-color:var(--accent); }
.railx__arrow[disabled]{ opacity:.28; cursor:default; }

/* Arrows show on touch as well as pointer. The swipe still works and is
   still the faster gesture — but it is invisible, and the PDP gallery is
   a MOBILE-ONLY surface (it stacks into a column on desktop), so hiding
   the arrows on touch would mean that gallery never showed a control at
   all. A visible affordance beats an efficient hidden one. */

/* ---------- PROGRESS TRACK ----------
   role="scrollbar" (rails.js), so it is announced as what it is and takes
   arrow keys / Home / End. 12px tall for a thumb-friendly hit area
   (study.md §4.7) with a 2px visible groove inside it. */
.railx__track{
  position:absolute; bottom:0;
  left:var(--railx-inset,0); right:var(--railx-inset,0);
  height:12px; background:transparent; cursor:pointer;
  touch-action:none;   /* the thumb is dragged, not scrolled past */
}
.railx__track::before{
  content:''; position:absolute; left:0; right:0; top:50%;
  height:2px; transform:translateY(-50%);
  background:var(--hairline,rgba(17,17,17,.14));
}
.railx__thumb{
  position:absolute; top:50%; transform:translateY(-50%);
  height:4px; min-width:24px; background:var(--accent);
}
.railx__track:hover .railx__thumb,
.railx__track:focus-visible .railx__thumb{ height:8px; }

/* ---------- STICKY FILTER ROW ----------
   .shopbar__row is NOT wrapped: it holds absolutely-positioned filter
   dropdowns, and introducing a new positioned ancestor around them is a
   change to the wrong thing. It already hid its own scrollbar (Phase 2),
   so it had a cue of exactly nothing — this restores one with a pure-CSS
   fade off the sticky bar itself, no wrapper and no new stacking context. */
.shopbar{ position:sticky; }
.shopbar::after{
  content:''; position:absolute; top:0; bottom:0; right:0; width:40px;
  background:linear-gradient(to left, var(--light), transparent);
  pointer-events:none;
}
@media (min-width:900px){ .shopbar::after{ display:none; } }