/* One bottom navigation surface across Home, Orders, Support and About. */
.sgh-mobile-nav{
  position:fixed;
  z-index:50;
  right:0;
  bottom:0;
  left:0;
  padding:0 12px max(12px,env(safe-area-inset-bottom));
  pointer-events:none;
  font-family:Inter,system-ui,sans-serif;
}
.sgh-mobile-nav__inner{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:4px;
  width:100%;
  max-width:512px;
  min-height:68px;
  margin-inline:auto;
  padding:8px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:20px;
  background:rgba(24,16,39,.38);
  backdrop-filter:blur(20px) saturate(145%);
  -webkit-backdrop-filter:blur(20px) saturate(145%);
  box-shadow:0 10px 28px rgba(8,3,18,.18),inset 0 1px 0 rgba(255,255,255,.1);
  pointer-events:auto;
}
.sgh-mobile-nav a{
  box-sizing:border-box;
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-width:0;
  min-height:48px;
  padding:4px 2px;
  border-radius:12px;
  color:rgba(255,255,255,.72);
  font-size:10px;
  font-weight:500;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
}
.sgh-mobile-nav a .material-symbols-outlined{font-size:22px;line-height:1;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
.sgh-mobile-nav a[aria-current=page]{background:rgba(255,255,255,.1);color:#d8b4fe;font-weight:600}
.sgh-mobile-nav a[aria-current=page] .material-symbols-outlined{font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24}
.sgh-mobile-nav a:focus-visible{outline:2px solid #c3a6ed;outline-offset:2px}
html[data-theme=light] .sgh-mobile-nav__inner{background:rgba(255,255,255,.64);border-color:rgba(88,28,135,.16);box-shadow:0 10px 28px rgba(48,28,76,.1),inset 0 1px 0 rgba(255,255,255,.65)}
html[data-theme=light] .sgh-mobile-nav a{color:#4c405a}
html[data-theme=light] .sgh-mobile-nav a[aria-current=page]{background:rgba(113,72,164,.1);color:#704197}
@media(min-width:1024px){.sgh-mobile-nav{display:none}}
@media(prefers-reduced-transparency:reduce){.sgh-mobile-nav__inner{background:#211a2b;backdrop-filter:none;-webkit-backdrop-filter:none}html[data-theme=light] .sgh-mobile-nav__inner{background:#fff}}
@supports not (backdrop-filter:blur(1px)){.sgh-mobile-nav__inner{background:#211a2b}html[data-theme=light] .sgh-mobile-nav__inner{background:#fff}}
