/* Preview storefront mobile navigation; original links and handlers remain authoritative. */
@media (max-width:901px) {
  body[data-uii-shell] { --uii-mobile-nav-height:calc(82px + env(safe-area-inset-bottom,0px)); }
  html body[data-uii-shell] :is(.uii-bottom-nav,.vault-mobile-bottom-nav) {
    position:fixed; inset:auto auto calc(10px + env(safe-area-inset-bottom,0px)) 50%;
    z-index:40; display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important;
    box-sizing:border-box; width:min(360px,calc(100% - 24px)); height:64px;
    padding:4px; border:1px solid #dce5f3; border-radius:999px;
    background:rgba(255,255,255,.96); box-shadow:0 8px 28px #18355a24;
    transform:translateX(-50%); overflow:visible;
    transition:width .3s cubic-bezier(.2,.8,.2,1),height .3s cubic-bezier(.2,.8,.2,1),background-color .2s;
  }
  html body[data-uii-shell] :is(.uii-bottom-nav,.vault-mobile-bottom-nav)[data-v50-minimized] {
    width:min(240px,calc(100% - 24px)); height:52px;
  }
  html body[data-uii-shell] :is(.uii-bottom-nav,.vault-mobile-bottom-nav)::before {
    content:''; position:absolute; left:8px; top:4px; bottom:4px;
    width:calc((100% - 8px)/4 - 8px); border-radius:999px; background:#eaf0ff;
    opacity:0; pointer-events:none; z-index:0;
    transform:translateX(calc(var(--v50-index,0) * (100% + 8px)));
    transition:transform .38s cubic-bezier(.2,.8,.2,1),width .3s cubic-bezier(.2,.8,.2,1),opacity .12s;
  }
  html body[data-uii-shell] :is(.uii-bottom-nav,.vault-mobile-bottom-nav)[data-v50-ready]::before {opacity:1}
  html body[data-uii-shell] :is(.uii-bottom-link,.vault-mobile-bottom-link) {
    position:relative; z-index:1; min-width:0; min-height:44px; padding:0 1px;
    border-radius:999px; background:transparent; gap:3px; transition:color .2s;
  }
  html body[data-uii-shell] :is(.uii-bottom-nav,.vault-mobile-bottom-nav)[data-v50-ready] :is(.uii-bottom-link,.vault-mobile-bottom-link).is-active {background:transparent}
  html body[data-uii-shell] :is(.uii-bottom-label,.vault-mobile-bottom-label) {
    max-height:18px; opacity:1; transform:translateY(0); overflow:hidden;
    transition:max-height .25s ease,opacity .18s ease,transform .25s ease;
  }
  html body[data-uii-shell] :is(.uii-bottom-nav,.vault-mobile-bottom-nav)[data-v50-minimized] :is(.uii-bottom-label,.vault-mobile-bottom-label) {
    max-height:0; opacity:0; transform:translateY(4px);
  }
  html body[data-uii-shell] :is(.uii-bottom-icon,.vault-mobile-bottom-icon)>svg {transition:transform .25s ease}
  html body[data-uii-shell] :is(.uii-bottom-link,.vault-mobile-bottom-link):active :is(.uii-bottom-icon,.vault-mobile-bottom-icon)>svg {transform:scale(.9)}
  html[data-theme=dark] body[data-uii-shell] :is(.uii-bottom-nav,.vault-mobile-bottom-nav) {background:rgba(23,34,54,.97);border-color:#364862}
  html[data-theme=dark] body[data-uii-shell] :is(.uii-bottom-nav,.vault-mobile-bottom-nav)::before {background:#2d4269}
  body[data-uii-shell] .vault-product-mobile-bar {bottom:var(--uii-mobile-nav-height)!important}
  body[data-uii-catalog] #v35-cart-message:not([hidden]) {bottom:calc(90px + env(safe-area-inset-bottom,0px))}

  html body[data-uii-shell] :is(.uii-mobile-menu-panel:not([hidden]),#vault-mobile-more-menu) {
    transform-origin:top right; animation:v50-menu-in .22s cubic-bezier(.2,.8,.2,1) both;
    border-radius:13px; box-shadow:0 14px 32px #142b4b26;
    background:rgba(255,255,255,.96); backdrop-filter:blur(18px) saturate(1.3);
  }
  html[data-theme=dark] body[data-uii-shell] :is(.uii-mobile-menu-panel:not([hidden]),#vault-mobile-more-menu) {background:rgba(23,34,54,.97)}
  html body[data-uii-shell] :is(.uii-mobile-menu-panel,#vault-mobile-more-menu) :is(a,button) {
    border-radius:8px; transition:background-color .15s ease,color .15s ease;
  }
  html body[data-uii-shell] :is(.uii-mobile-menu-panel,#vault-mobile-more-menu) :is(a,button):is(:hover,:focus-visible,[data-v50-current]) {background:#eaf0ff;color:#315fe0}
  html[data-theme=dark] body[data-uii-shell] :is(.uii-mobile-menu-panel,#vault-mobile-more-menu) :is(a,button):is(:hover,:focus-visible,[data-v50-current]) {background:#2d4269;color:#d0ddff}
  html body[data-uii-shell] .v50-menu-ghost {position:fixed!important;inset:auto!important;z-index:100!important;margin:0!important;pointer-events:none!important;animation:v50-menu-out .16s ease-in both!important}
}
@keyframes v50-menu-in {from{opacity:0;transform:translateY(-7px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes v50-menu-out {from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-7px) scale(.96)}}
@media (prefers-reduced-motion:reduce) {
  html body[data-uii-shell] :is(.uii-bottom-nav,.vault-mobile-bottom-nav),
  html body[data-uii-shell] :is(.uii-bottom-nav,.vault-mobile-bottom-nav)::before,
  html body[data-uii-shell] :is(.uii-bottom-label,.vault-mobile-bottom-label),
  html body[data-uii-shell] :is(.uii-bottom-icon,.vault-mobile-bottom-icon)>svg {transition:none!important}
  html body[data-uii-shell] :is(.uii-mobile-menu-panel,#vault-mobile-more-menu,.v50-menu-ghost) {animation:none!important}
}