/* JEM.cabeleireiros — HOTFIX ONLY: mobile navigation overlay.
   Scope intentionally limited to the site header/nav at <=1180px. */
@media (max-width:1180px){
  html:has(#mainNav.open),
  body:has(#mainNav.open){
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }

  /* Opaque viewport shield: guarantees that no page section/photo/text can bleed through. */
  body:has(#mainNav.open)::before{
    content:"";
    position:fixed;
    inset:0;
    width:100vw;
    height:100dvh;
    background:#1C1B19;
    opacity:1;
    z-index:2147483000;
    pointer-events:auto;
  }

  /* Keep header controls above the shield; remove backdrop-filter containing-block side effects. */
  body:has(#mainNav.open) .site-header{
    z-index:2147483001 !important;
    background:transparent !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    box-shadow:none !important;
  }

  #mainNav.main-nav{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    inset:0 !important;
    width:100vw !important;
    max-width:none !important;
    height:100dvh !important;
    min-height:100dvh !important;
    margin:0 !important;
    padding:104px clamp(26px,7vw,44px) max(36px, env(safe-area-inset-bottom)) !important;
    background:#1C1B19 !important;
    background-image:none !important;
    opacity:1 !important;
    box-shadow:none !important;
    border:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:clamp(14px,2.05vh,21px) !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    transform:translate3d(100%,0,0) !important;
    visibility:hidden !important;
    pointer-events:none !important;
    z-index:2147483002 !important;
    transition:transform .32s cubic-bezier(.4,0,.2,1), visibility 0s linear .32s !important;
  }

  #mainNav.main-nav.open{
    transform:translate3d(0,0,0) !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transition:transform .32s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s !important;
  }

  #mainNav.main-nav a{
    display:block !important;
    position:relative !important;
    width:auto !important;
    max-width:calc(100vw - 84px) !important;
    margin:0 !important;
    padding:2px 0 !important;
    color:#F0ECE5 !important;
    font-family:var(--f-editorial) !important;
    font-size:clamp(1.72rem,6.6vw,2.24rem) !important;
    font-weight:400 !important;
    line-height:1.08 !important;
    letter-spacing:.01em !important;
    text-transform:none !important;
    white-space:normal !important;
    opacity:1 !important;
  }

  #mainNav.main-nav a::after{display:none !important;}

  .site-header .wrap > a,
  .site-header .nav-cta,
  .site-header .nav-toggle{
    position:relative !important;
    z-index:2147483003 !important;
  }

  .site-header .nav-toggle{
    display:block !important;
    flex:0 0 40px !important;
  }
}

@media (max-width:760px){
  #mainNav.main-nav{
    padding:92px 28px max(32px, env(safe-area-inset-bottom)) !important;
    gap:clamp(13px,1.9vh,18px) !important;
  }
  #mainNav.main-nav a{
    font-size:clamp(1.62rem,7.1vw,2.02rem) !important;
  }
}

@media (max-height:690px) and (max-width:1180px){
  #mainNav.main-nav{
    padding-top:82px !important;
    gap:11px !important;
  }
  #mainNav.main-nav a{
    font-size:clamp(1.42rem,5.8vw,1.82rem) !important;
    line-height:1.04 !important;
  }
}