/* The feed takes over the viewport: one card per screen, snap paging.
   Heights use dvh where supported so the address bar collapse does not
   clip a card, with a vh fallback for older Android WebView. */
.m2y-feed{position:relative}
.m2y-feed__tabs{
  position:sticky;top:0;z-index:5;display:flex;gap:6px;justify-content:center;
  padding:8px 10px;background:var(--ink-50,#FAF6EF);border-bottom:1px solid var(--ink-200,#E5DED5)}
.m2y-feed__tab{
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  flex:0 1 auto;padding:8px 18px;border-radius:999px;white-space:nowrap;
  font-family:Quicksand,system-ui,sans-serif;font-weight:700;font-size:14px;text-decoration:none;
  color:var(--ink-700,#4A4034);border:1px solid var(--ink-200,#E5DED5);background:var(--paper,#fff);
  border-bottom:1px solid var(--ink-200,#E5DED5);transition:background .15s ease,color .15s ease,border-color .15s ease}
.m2y-feed__tab:hover{border-color:var(--ink-300,#C9BEB3);text-decoration:none}
.m2y-feed__tab.is-active{background:var(--brand-orange,#F89A1F);color:#fff;border-color:var(--brand-orange,#F89A1F)}
.m2y-feed__tab.is-active:hover{border-color:var(--brand-orange,#F89A1F)}
@media (max-width:380px){
  /* Keep all three tabs on one row without overflow on a 375px phone. */
  .m2y-feed__tabs{gap:4px;padding:8px 6px}
  .m2y-feed__tab{padding:8px 12px;font-size:13px}
}

.m2y-feed__empty{padding:48px 20px;text-align:center;color:var(--ink-700,#4A4034)}
.m2y-feed__hint{color:#6B5E55;font-size:14px}

.m2y-feed__scroller{
  height:calc(100vh - 57px);height:calc(100dvh - 57px);
  overflow-y:scroll;scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch}

.m2y-card{
  position:relative;height:calc(100vh - 57px);height:calc(100dvh - 57px);
  scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:#1A140E;overflow:hidden}
.m2y-card__media{position:absolute;inset:0}
.m2y-card__video,.m2y-card__img{width:100%;height:100%;object-fit:cover;display:block}
/* Designed placeholder for a feed card with no video and no photo. A deep
   category-tinted fill with the category glyph so the card never shows the
   flat grey PNG. Tinted off the dark card base so the white caption scrim
   still reads. No gradient on the surface, no extra request: light for 3G. */
.m2y-card__ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:#241B12;
  background:color-mix(in srgb, var(--cat-colour,#8E7CA0) 30%, #1A140E);
  color:#fff}
.m2y-card__ph-glyph{width:88px;height:88px;opacity:.85}
/* Solid dark scrim, no blur. Keeps white text readable over any photo.
   Taller coverage and a stronger floor (0.85) so the full caption block,
   from the seller row down to the action rail, clears 4.5:1 against any
   bright video frame in sunlight. No backdrop-filter: it stutters Mali
   GPUs on entry-level phones. */
.m2y-card__scrim{
  position:absolute;left:0;right:0;bottom:0;height:72%;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,.85) 100%);
  pointer-events:none}

.m2y-card__info{position:relative;z-index:2;padding:16px;color:#fff}
/* Soft shadow behind every white overlay string so the title, price and
   seller name keep contrast even where the scrim is thinnest. */
.m2y-card__title,.m2y-card__price,.m2y-card__sellername{text-shadow:0 1px 3px rgba(0,0,0,.65)}
.m2y-card__seller{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.m2y-card__sellername{font-weight:700;font-size:15px}
.m2y-card__selleravatar{display:inline-flex;flex-shrink:0;line-height:0}
.m2y-card__selleravatar .m2y-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,0.85);display:block}
/* Category accent: a small chip with a 3px left accent in the category
   colour and a colour-matched dot. The pill stays a light translucent
   white so the label is legible over any photo, the colour does the
   category signalling. */
.m2y-card__cat{
  display:inline-flex;align-items:center;gap:6px;margin:0 0 8px;
  padding:3px 10px 3px 8px;border-radius:999px;
  border-left:3px solid var(--cat-colour);
  background:rgba(255,255,255,.92);color:var(--cat-colour);
  font-family:Nunito,system-ui,sans-serif;font-weight:700;font-size:11px;line-height:1.4}
.m2y-card__cat-dot{width:7px;height:7px;border-radius:50%;background:var(--cat-colour);flex-shrink:0}
.m2y-card__title{
  font-family:Quicksand,system-ui,sans-serif;font-weight:700;font-size:20px;line-height:1.25;
  margin:0 0 8px;color:#fff}
.m2y-card__pricerow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.m2y-card__priceblock{display:flex;flex-direction:column;gap:4px;min-width:0}
.m2y-card__price{font-family:Quicksand,system-ui,sans-serif;font-weight:700;font-size:22px;line-height:1.1;font-variant-numeric:tabular-nums}
/* Escrow reassurance chip under the price. Light pill on the dark card so
   the buyer sees the protection promise right where they decide to Shop. */
.m2y-card__escrow{
  display:inline-flex;align-items:center;gap:5px;align-self:flex-start;
  padding:3px 10px;border-radius:999px;
  background:rgba(255,255,255,.92);color:#1E6E3E;
  font-family:Nunito,system-ui,sans-serif;font-weight:700;font-size:11px;line-height:1.3;
  text-shadow:none}
.m2y-card__shop{min-height:44px;flex-shrink:0;display:inline-flex;align-items:center;padding:10px 22px;font-weight:700}

/* The social bar sits on a dark card, so lift it to a light pill row. */
.m2y-card__info .m2y-socialbar__btn{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.4);color:#3A322A}
/* Action counts must clear 4.5:1 too: drop the dimming and use a solid ink. */
.m2y-card__info .m2y-socialbar__count{opacity:1;color:#3A322A}
/* site.css hides .m2y-socialbar__label with display:none at <=480px, which
   leaves the like/comment/share/save controls icon-only with no accessible
   name (a button-name and link-name failure on the phone Lighthouse run).
   Inside the feed card we keep the action icons but expose the label to the
   accessibility tree with a visually-hidden treatment, so every button and
   link in the rail has a discernible name at every width. */
@media (max-width:480px){
  .m2y-card__info .m2y-socialbar__label{
    display:inline-block;
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;border:0}
}

@media (min-width:768px){
  /* Centre a phone-width column on tablet and desktop. */
  .m2y-feed__scroller,.m2y-card{max-width:480px;margin-left:auto;margin-right:auto}
  /* Round the contained desktop card and clip the media + scrim to it, so the
     feed reads as the framed panel the hi-fi prototype FeedCard shows (mobile
     stays edge-to-edge full-bleed). */
  .m2y-card{
    height:min(78vh, 680px);
    border-radius:var(--radius-lg);
    border:1px solid var(--ink-200,#E7DFD5);
    margin-top:8px;margin-bottom:8px}
  .m2y-feed__scroller{scroll-padding-top:8px}
}

@media (max-width:767.98px){
  /* The mobile bottom nav (shown <=768px) is fixed over the bottom of the
     viewport. Shrink each snap card by its height so the caption block
     (seller, price and the action rail) is never sliced by the nav bar. */
  .m2y-feed__scroller,.m2y-card{
    height:calc(100vh - 57px - var(--bottom-nav-h, 64px));
    height:calc(100dvh - 57px - var(--bottom-nav-h, 64px));
  }
}

@media (prefers-reduced-motion:reduce){
  .m2y-feed__scroller{scroll-snap-type:y proximity;scroll-behavior:auto}
  .m2y-feed__tab,.m2y-card__shop{transition:none}
}

/* Tap-to-unmute control on video cards. Clips autoplay muted; this turns
   sound on for the session. Sits clear of the right-hand action rail. */
.m2y-card__sound {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}
.m2y-card__sound:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.m2y-card__sound .m2y-card__sound-on { display: none; }
.m2y-card__sound.is-on .m2y-card__sound-off { display: none; }
.m2y-card__sound.is-on .m2y-card__sound-on { display: inline; }

/* Swipe gesture hint badges: shown briefly when a swipe fires (left = cart,
   right = wishlist). Hidden until JS adds .show. */
.m2y-card__swipehint {
  position: absolute;
  top: 50%;
  z-index: 6;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  opacity: 0;
  transform: translateY(-50%) scale(0.8);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.m2y-card__swipehint--cart { left: 1rem;  background: rgba(0,0,0,0.6); }
.m2y-card__swipehint--save { right: 1rem; background: rgba(0,0,0,0.6); }
.m2y-card__swipehint.show { opacity: 1; transform: translateY(-50%) scale(1); }

/* Seller name is now a link into the seller profile. */
a.m2y-card__sellername { color: inherit; text-decoration: none; }
a.m2y-card__sellername:hover,
a.m2y-card__sellername:focus-visible { text-decoration: underline; }