.sf-app-nav{
  position:fixed;
  left:0;
  right:0;
  z-index:1001;
  padding:0 14px calc(14px + env(safe-area-inset-bottom));
  pointer-events:none;
}

.sf-app-nav--bottom{
  bottom:0;
}

.sf-app-nav--top{
  top:0;
  padding:14px 14px 0;
}

.sf-app-nav__inner{
  max-width:640px;
  margin:0 auto;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0, 1fr);
  gap:8px;
  padding:10px;
  border-radius:24px;
  border:1px solid rgba(148, 163, 184, 0.16);
  background:rgba(5, 10, 20, 0.88);
  box-shadow:0 24px 50px rgba(2, 6, 23, 0.34);
  backdrop-filter:blur(18px);
  pointer-events:auto;
}

.sf-app-nav--shadow-soft .sf-app-nav__inner{
  box-shadow:0 18px 36px rgba(2, 6, 23, 0.24);
}

.sf-app-nav--shadow-medium .sf-app-nav__inner{
  box-shadow:0 24px 50px rgba(2, 6, 23, 0.34);
}

.sf-app-nav--shadow-strong .sf-app-nav__inner{
  box-shadow:0 28px 70px rgba(2, 6, 23, 0.42);
}

.sf-app-nav__item{
  min-height:62px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 8px;
  border:none;
  border-radius:18px;
  background:transparent;
  color:rgba(226, 232, 240, 0.82);
  text-decoration:none;
  transition:transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.sf-app-nav__item:hover,
.sf-app-nav__item:focus-visible{
  transform:translateY(-2px);
  color:#f8fafc;
}

.sf-app-nav__item.is-active{
  color:#ffffff;
}

.sf-app-nav__icon{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  transition:background-color .18s ease, box-shadow .18s ease;
}

.sf-app-nav__icon svg{
  width:22px;
  height:22px;
}

.sf-app-nav__label{
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.03em;
}

.sf-app-nav.no-labels .sf-app-nav__item{
  min-height:54px;
}

.sf-app-nav--outline .sf-app-nav__item.is-active{
  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.sf-app-nav--filled .sf-app-nav__item.is-active{
  background:rgba(255, 255, 255, 0.1);
}

.sf-app-nav--filled .sf-app-nav__item.is-active .sf-app-nav__icon{
  background:rgba(255, 255, 255, 0.16);
}

.sf-app-nav--rounded .sf-app-nav__item.is-active .sf-app-nav__icon{
  border-radius:999px;
}

.sf-app-nav--rounded .sf-app-nav__item:hover .sf-app-nav__icon,
.sf-app-nav--rounded .sf-app-nav__item:focus-visible .sf-app-nav__icon{
  background:rgba(255, 255, 255, 0.08);
}

body.sf-has-app-nav-bottom{
  padding-bottom:118px;
}

body.sf-has-app-nav-bottom.sf-has-sticky-cart{
  padding-bottom:212px;
}

body.sf-has-app-nav-top{
  padding-top:104px;
}

@media (max-width: 767px){
  .sf-app-nav{
    padding-inline:10px;
  }

  .sf-app-nav__inner{
    gap:6px;
    padding:8px;
    border-radius:22px;
  }

  .sf-app-nav__item{
    min-height:58px;
    padding:8px 6px;
  }

  .sf-app-nav__icon{
    width:38px;
    height:38px;
  }

  .sf-app-nav__label{
    font-size:.72rem;
  }
}