/* Mobile menu backdrop fix */
@media (max-width: 900px) {
  ul.menu { z-index: 10000 !important; }
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(2, 8, 6, 0.92);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 9998;
  }
  body:has(ul.menu.open)::after {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Mobile fix: enlarge undersized label/nav/eyebrow text (9-9.6px) to a readable size */
@media (max-width: 900px) {
  /* Homepage */
  .brand small,
  .flagship-media .ribbon,
  .card.rv .card-img b,
  .res-list.rv em {
    font-size: 13px !important;
  }

  /* Shop V2 */
  .mg-desktop-nav a,
  .mg-mobile-nav summary,
  .mg-pill,
  .mg-kicker,
  .mg-bundle-eyebrow,
  .mg-bundle-cta,
  .mg-label,
  .mg-text-link,
  .mg-package small,
  .mg-mini span {
    font-size: 13px !important;
  }
}

/* Mobile fix: scroll-fade + arrow affordance on Shop V2 category filter chip row */
@media (max-width: 900px) {
  .mg-rail { position: relative; }
  .mg-rail-fade-right::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.97) 70%);
    pointer-events: none;
    z-index: 1;
  }
  .mg-rail-fade-right::before {
    content: "›";
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    font-size: 18px;
    line-height: 1;
    color: rgba(11, 31, 19, 0.55);
    pointer-events: none;
    z-index: 2;
  }
}


/* Mobile fix: increase tap-target height on small inline Shop V2 text links to >=40px */
@media (max-width: 900px) {
  .mg-text-link {
    padding: 10px 0 !important;
    margin: -10px 0 !important;
  }
}

/* Mobile fix: menu drawer was rendering behind the backdrop (nav has its own
   stacking context at z-index 200, so ul.menu's z-index was scoped inside it,
   not the document root) — raise the nav container itself above the backdrop,
   and make the backdrop fully opaque so no hero text bleeds through the drawer's
   left peek gap */
@media (max-width: 900px) {
  .nav { z-index: 10000 !important; }
  body::after { background: rgba(2, 8, 6, 1) !important; }
}