/* OyeKudiye - Discover feed. Most of the page is inline-styled (house convention, see oye/discover/index.php
   and _discover_post.php); this file only carries what inline style attributes cannot express: hover/focus
   states, scrollbar cosmetics and the wish-heart fill state (reusing card-icons.css's .lst-wish rules). */
.dcv-rail::-webkit-scrollbar, .dcv-strip::-webkit-scrollbar { display: none; }
.dcv-rail, .dcv-strip { scrollbar-width: none; }
.dcv-post .lst-wish, .dcv-post .dcv-share { transition: transform .15s ease; }
.dcv-post .lst-wish:hover, .dcv-post .dcv-share:hover { transform: scale(1.08); }
.dcv-post .lst-quickadd:hover, .dcv-post .lst-buynow:hover { opacity: .88; }
.dcv-modes a:hover, .dcv-rail a:hover span:first-child { opacity: .9; }
.dcv-post .dcv-poster { transition: opacity .25s ease; }

/* ---- Reel / full-screen detail viewer (docs: discover.js header comment, "reel" section). The overlay's
   own DOM/markup is built entirely in JS (house pattern for overlays - see cart-panel.js/checkout-sheet.js
   appending to document.body, outside .oye-root, so a transformed/overflow-hidden ancestor can never clip
   a position:fixed layer); this file only carries what an inline style attribute cannot express: the
   hidden/open toggle, native swipe-to-navigate (CSS scroll-snap, not JS touch-delta math - matches Manek
   Ratna's own .mr-reel-track technique), scrollbar cosmetics, and the desktop-only "phone pane + arrows"
   layout switch. */
.dcv-reel { position: fixed; inset: 0; z-index: 999999; background: #000; display: none; }
.dcv-reel.is-open { display: block; }
body.dcv-reel-lock { overflow: hidden; }
.dcv-reel-track {
  height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; scrollbar-width: none;
}
.dcv-reel-track::-webkit-scrollbar { display: none; }
.dcv-reel-slide { height: 100%; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; position: relative; }
.dcv-reel-stage { position: relative; width: 100%; height: 100%; background: #000; }
.dcv-reel-nav { display: none; }                                  /* mobile: swipe only, no arrows - matches MR */
.dcv-reel-rail button:hover, .dcv-reel-rail a:hover,
.dcv-reel-close:hover, .dcv-reel-mute:hover, .dcv-reel-navbtn:hover { opacity: .82; }
@media (min-width: 1024px) {
  /* Desktop: a centered 9:16 "phone pane" (like Instagram's own web reels) with explicit prev/next arrows,
     since there's no touch swipe on a desktop pointer - trackpad/wheel scroll over the track still snaps
     between slides via the same scroll-snap-type above, the arrows are just an added affordance.
     NOTE: the track itself stays a plain block scroll container (not flex) - each full-height slide
     centers its own narrower stage via its own display:flex below. An earlier version put display:flex on
     the TRACK to center things, which fed .dcv-reel-stage's `height:calc(100% - 52px)` a flex column item
     with no definite height to resolve the percentage against, collapsing the stage to 0x0 - the box model
     for a plain block ancestor with height:100% chained down to inset:0 is unambiguous, so that's what
     each slide keeps. */
  .dcv-reel-slide { display: flex; align-items: center; justify-content: center; padding: 26px 0; box-sizing: border-box; }
  .dcv-reel-stage {
    width: auto; height: 100%; aspect-ratio: 9 / 16; max-width: min(52vw, 460px);
    border-radius: 16px; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.55);
  }
  .dcv-reel-nav { display: block; }
}