.mobile-bottom-nav{display:none}
.mobile-bottom-nav[hidden]{display:none!important}

@media(max-width:720px){
  body[data-mobile-view]{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  body[data-mobile-view] .menu-toggle,
  body[data-mobile-view] #mobile-nav{display:none!important}
  body[data-mobile-view] #home,
  body[data-mobile-view] #solutions,
  body[data-mobile-view] .brand-intro,
  body[data-mobile-view] #lighting,
  body[data-mobile-view] #smart,
  body[data-mobile-view] #showroom,
  body[data-mobile-view] #service,
  body[data-mobile-view] #contact,
  body[data-mobile-view] .site-footer{display:none}
  body[data-mobile-view="home"] #home,
  body[data-mobile-view="home"] #solutions,
  body[data-mobile-view="home"] .brand-intro,
  body[data-mobile-view="lighting"] #solutions,
  body[data-mobile-view="lighting"] #lighting,
  body[data-mobile-view="smart"] #solutions,
  body[data-mobile-view="smart"] #smart,
  body[data-mobile-view="showroom"] #showroom,
  body[data-mobile-view="showroom"] #service,
  body[data-mobile-view="contact"] #contact,
  body[data-mobile-view="contact"] .site-footer{display:block}
  body[data-mobile-view="home"] .brand-intro{border-bottom:0}
  body[data-mobile-view="showroom"] #service{padding-block:46px 56px}

  body[data-mobile-view] .mobile-bottom-nav:not([hidden]){
    position:fixed;
    z-index:60;
    inset:auto 0 0;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    min-height:calc(70px + env(safe-area-inset-bottom,0px));
    padding:5px max(10px,env(safe-area-inset-right,0px)) calc(5px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));
    border-top:1px solid #d8d9d1;
    background:#f6f4effa;
    box-shadow:0 -4px 20px #292c2908;
    backdrop-filter:blur(12px)
  }
  .mobile-bottom-nav>a{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-height:59px;
    padding:5px 4px;
    border-radius:6px;
    color:var(--muted);
    font-size:12px;
    line-height:1.2;
    -webkit-tap-highlight-color:transparent
  }
  .mobile-bottom-nav svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .mobile-bottom-nav>a[aria-current="page"]{color:#9b661e;background:#ee981e0e}
  .mobile-bottom-nav>a:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
  body[data-mobile-view] .toast{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
}