/* Noor Naksha v1.11.11 — Mobile Phase M1 only.
 * Desktop (>=721px) is intentionally untouched.
 */

@media (max-width:720px){
  /* ----------------------------------------------------------------------
   * M1-01 — viewport containment / horizontal overflow root guards.
   * These constraints target known movable/fixed/carousel shells instead of
   * globally shrinking desktop components. overflow-x:clip is a final mobile
   * safety net after the offending shells are bounded below.
   * ------------------------------------------------------------------- */
  html{max-width:100%;overflow-x:clip!important}
  body{max-width:100%;overflow-x:clip!important}
  #page,.site,.nn-site,.nn-main,.nn-content-main,.nn-shop-main,
  .nn-native-slider,.nn-native-slider-track,.nn-hero,.nn-hero-grid,
  .nn-mainbar,.nn-mainbar-inner,.nn-topbar,.nn-footer,
  .nn-shop-shell-wide-v18,.nn-shop-toolbar-v18,.nn-shop-categories-v18{
    max-width:100%!important;box-sizing:border-box!important
  }
  .nn-native-slider,.nn-native-slider-track,.nn-hero-grid{overflow:hidden!important}
  .nn-mainbar-inner>*{min-width:0!important}
  .nn-mainbar-inner>.nn-brand{min-width:0!important;max-width:min(46vw,170px)!important}
  .nn-mainbar-inner>.nn-brand .nn-brand-link{max-width:100%!important}

  /* Fixed off-canvas UI must never create a scrollable document width. */
  .nn-mobile-drawer{
    right:0!important;left:auto!important;
    width:min(82vw,320px)!important;max-width:calc(100vw - 24px)!important;
    contain:layout paint!important;overscroll-behavior:contain!important
  }
  .nn-shop-filters-v18,
  .nn-shop-layout-sidebar-off .nn-shop-filters-v18{
    width:min(360px,calc(100vw - 20px))!important;max-width:calc(100vw - 20px)!important;
    contain:layout paint!important
  }
  .nn-shop-category-track-v18,
  .nn-category-reference-wrap,
  .nn-category-showcase-track{max-width:100%!important}

  /* ----------------------------------------------------------------------
   * M1-02 — mobile hero composition prepared for 1080x1350 (4:5) artwork.
   * Desktop hero variables/images are not modified. Existing per-slide
   * Mobile Image continues to be authoritative when supplied.
   * ------------------------------------------------------------------- */
  .nn-native-slider,.nn-hero-static{width:100%!important;isolation:isolate}
  .nn-native-slide .nn-hero-grid,.nn-hero-static .nn-hero-grid{
    min-height:clamp(570px,150vw,690px)!important;
    height:auto!important;
    width:100%!important;
    grid-template-columns:1fr!important;
    background:var(--nn-hero-overlay,#f9f5ed)!important
  }
  .nn-native-slide .nn-hero-art,.nn-hero-static .nn-hero-art{
    grid-area:1/1!important;
    min-height:clamp(570px,150vw,690px)!important;
    width:100%!important;
    margin:0!important;
    background-image:var(--nn-hero-mobile-image,var(--nn-hero-image))!important;
    background-size:cover!important;
    background-position:var(--nn-hero-focus-m,center) center!important;
    transform-origin:center center!important
  }
  .nn-native-slide .nn-hero-copy,.nn-hero-static .nn-hero-copy{
    grid-area:1/1!important;
    min-height:clamp(570px,150vw,690px)!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:clamp(245px,70vw,330px) max(18px,var(--nn-pad-mobile,20px)) 52px!important;
    align-self:stretch!important;
    justify-content:flex-end!important;
    background:linear-gradient(180deg,
      rgba(249,245,237,.01) 0%,
      rgba(249,245,237,.08) 34%,
      rgba(249,245,237,.70) 58%,
      rgba(249,245,237,.96) 75%,
      var(--nn-hero-overlay,#f9f5ed) 100%)!important;
    box-sizing:border-box!important
  }
  .nn-native-slide .nn-hero-copy>*{max-width:100%!important}
  .nn-native-slide .nn-eyebrow,.nn-hero-static .nn-eyebrow{
    font-size:10px!important;line-height:1.35!important;letter-spacing:.18em!important;
    margin:0 0 8px!important
  }
  .nn-native-slide .nn-hero-copy h1,.nn-hero-static .nn-hero-copy h1{
    font-size:clamp(34px,10.2vw,44px)!important;
    line-height:.98!important;letter-spacing:-.02em!important;
    max-width:12.5em!important;margin:0 0 12px!important;
    overflow-wrap:normal!important;word-break:normal!important
  }
  .nn-native-slide .nn-hero-lead,.nn-hero-static .nn-hero-lead{
    font-size:14px!important;line-height:1.52!important;max-width:34em!important;margin:0!important
  }
  .nn-hero-buttons{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-top:17px!important}
  .nn-hero-buttons .nn-btn{
    min-width:0!important;min-height:44px!important;width:100%!important;
    padding:10px 11px!important;font-size:12px!important;line-height:1.2!important;
    white-space:normal!important;text-align:center!important
  }
  .nn-hero-buttons .nn-btn .nn-icon{width:14px!important;height:14px!important;flex:0 0 14px!important}
  .nn-hero-benefits{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;
    width:100%!important;max-width:100%!important;margin-top:18px!important
  }
  .nn-hero-benefits span{gap:5px!important;min-width:0!important;font-size:9.5px!important;line-height:1.2!important}
  .nn-hero-benefits .nn-icon{width:21px!important;height:21px!important;flex:0 0 21px!important}
  .nn-slider-controls{max-width:calc(100% - 24px)!important}

  /* ----------------------------------------------------------------------
   * M1-03 — clean mobile transitions. The previous slide becomes invisible
   * immediately, while the incoming slide/content can still animate. This
   * removes readable old/new text overlap without deleting animation.
   * ------------------------------------------------------------------- */
  .nn-native-slider .nn-native-slide{
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    transition:none!important;z-index:0!important
  }
  .nn-native-slider .nn-native-slide.is-active{
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;z-index:2!important;
    animation:nnV11111MobileSlideIn .30s ease-out both
  }
  @keyframes nnV11111MobileSlideIn{from{opacity:.15}to{opacity:1}}

  /* ----------------------------------------------------------------------
   * M1-04 — keyboard/VisualViewport-safe mobile search.
   * JS supplies visual viewport top/height; the sheet stays visible above the
   * software keyboard and its results scroll inside the sheet.
   * ------------------------------------------------------------------- */
  .nn-v19-mobile-search-backdrop{inset:0!important}
  .nn-v19-mobile-search-sheet{
    left:10px!important;right:10px!important;
    top:calc(var(--nn-v11111-vv-top,0px) + 10px)!important;bottom:auto!important;
    width:auto!important;max-width:none!important;
    max-height:calc(var(--nn-v11111-vv-height,100dvh) - 20px)!important;
    overflow:hidden!important;
    border-radius:16px!important;padding:14px!important;
    transform:translate3d(0,calc(100dvh + 40px),0)!important;
    transition:transform .24s ease,opacity .20s ease!important;opacity:0!important;
    box-sizing:border-box!important;contain:layout paint!important
  }
  .nn-v19-mobile-search-sheet.is-open-v19{
    transform:translate3d(0,0,0)!important;opacity:1!important
  }
  .nn-v19-mobile-search-head{flex:0 0 auto!important}
  .nn-v19-mobile-search-body{
    display:flex!important;flex-direction:column!important;min-height:0!important;
    max-height:calc(var(--nn-v11111-vv-height,100dvh) - 84px)!important;overflow:hidden!important
  }
  .nn-v19-mobile-search-sheet .nn-shop-live-search-v18{display:flex!important;flex-direction:column!important;min-height:0!important}
  .nn-v19-mobile-search-sheet .nn-shop-search-form-v18{flex:0 0 auto!important}
  .nn-v19-mobile-search-sheet .nn-shop-search-results-v18{
    position:relative!important;left:auto!important;right:auto!important;top:auto!important;
    margin-top:8px!important;max-height:none!important;min-height:0!important;
    overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important
  }
  body.nn-v19-mobile-search-open .nn-mobile-bottom-nav-v183{
    transform:translate3d(0,115%,0)!important;pointer-events:none!important;
    transition:transform .2s ease!important
  }
  body.nn-v19-mobile-search-open{overscroll-behavior:none!important}
}

@media (max-width:390px){
  .nn-native-slide .nn-hero-grid,.nn-hero-static .nn-hero-grid,
  .nn-native-slide .nn-hero-art,.nn-hero-static .nn-hero-art,
  .nn-native-slide .nn-hero-copy,.nn-hero-static .nn-hero-copy{min-height:590px!important}
  .nn-native-slide .nn-hero-copy,.nn-hero-static .nn-hero-copy{padding-top:270px!important;padding-left:16px!important;padding-right:16px!important}
  .nn-native-slide .nn-hero-copy h1,.nn-hero-static .nn-hero-copy h1{font-size:35px!important}
  .nn-hero-buttons{gap:8px!important}
  .nn-hero-buttons .nn-btn{font-size:11.5px!important;padding-inline:8px!important}
}

@media (max-width:720px) and (prefers-reduced-motion:reduce){
  .nn-native-slider .nn-native-slide.is-active{animation:none!important}
  .nn-v19-mobile-search-sheet{transition:none!important}
}
@media (max-width:720px){
  .nn-v11111-overflow-offender{contain:layout paint!important}
}