/* SecretToys v10 — bottom navigation visibility + centering only.
   This file intentionally does not touch product/gallery/header/slider layout. */
@media (max-width:991px){
  /* Use equal physical viewport insets instead of translateX centering. This is
     stable even if a product/gallery element has previously tried to scroll. */
  .vp-mobile-bottom-nav{
    position:fixed!important;
    left:max(8px,env(safe-area-inset-left))!important;
    right:max(8px,env(safe-area-inset-right))!important;
    width:auto!important;
    max-width:none!important;
    transform:none!important;
    margin:0!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    justify-content:center!important;
    align-items:center!important;
    box-sizing:border-box!important;
  }

  .vp-mobile-bottom-nav > a,
  .vp-mobile-bottom-nav > button{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    justify-self:stretch!important;
    align-self:stretch!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }

  /* V8 contains a high-specificity rule that makes the first/Home item
     #1f2937. On the current dark nav this makes Home look deleted. */
  .vp-mobile-bottom-nav > a:first-child:not(.is-active),
  .vp-mobile-bottom-nav > a:first-child:not(.is-active) small,
  .vp-mobile-bottom-nav > a:first-child:not(.is-active) .vp-mobile-nav-icon,
  .vp-mobile-bottom-nav > a:first-child:not(.is-active) .vp-mobile-nav-icon svg{
    color:var(--vp-mobile-nav-text,#f8fafc)!important;
    visibility:visible!important;
    opacity:1!important;
  }

  /* Preserve the configured active style when Home itself is active. */
  .vp-mobile-bottom-nav > a:first-child.is-active,
  .vp-mobile-bottom-nav > a:first-child.is-active .vp-mobile-nav-icon,
  .vp-mobile-bottom-nav > a:first-child.is-active .vp-mobile-nav-icon svg{
    color:var(--vp-mobile-nav-active-text,#ff9a45)!important;
    visibility:visible!important;
    opacity:1!important;
  }
  .vp-mobile-bottom-nav > a:first-child.is-active small{
    color:var(--vp-mobile-nav-text,#f8fafc)!important;
    visibility:visible!important;
    opacity:1!important;
  }

  .vp-mobile-bottom-nav > a:first-child .vp-mobile-nav-icon,
  .vp-mobile-bottom-nav > a:first-child .vp-mobile-nav-icon svg,
  .vp-mobile-bottom-nav > a:first-child small{
    display:flex!important;
  }
  .vp-mobile-bottom-nav > a:first-child small{
    display:block!important;
  }
}