/* HiTop Mobile Bottom Navigation V1 — approved visual. Mobile only. */
@media only screen and (max-width:991px){
  body{padding-bottom:calc(82px + env(safe-area-inset-bottom))!important}

  .hitop-mobile-bottom{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    position:fixed!important;
    z-index:10020!important;
    left:50%!important;
    right:auto!important;
    bottom:0!important;
    width:min(100%,430px)!important;
    height:72px!important;
    padding:5px 6px calc(5px + env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    background:rgba(255,255,255,.98)!important;
    border:1px solid #e3ebf1!important;
    border-bottom:0!important;
    border-radius:18px 18px 0 0!important;
    box-shadow:0 -7px 24px rgba(20,61,91,.12)!important;
    box-sizing:content-box!important;
    overflow:visible!important;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px)
  }

  .hitop-mobile-bottom>a,
  .hitop-mobile-bottom>button{
    position:relative!important;
    min-width:0!important;
    height:62px!important;
    margin:0!important;
    padding:6px 2px 4px!important;
    border:0!important;
    border-radius:12px!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#536f82!important;
    text-decoration:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    font:600 11px/13px Arial,Helvetica,sans-serif!important;
    text-transform:none!important;
    -webkit-tap-highlight-color:transparent!important;
    transition:color .16s ease,background .16s ease,transform .12s ease!important;
    overflow:visible!important
  }
  .hitop-mobile-bottom>a:active,
  .hitop-mobile-bottom>button:active{transform:scale(.96)!important}

  .hitop-mobile-bottom>a>i,
  .hitop-mobile-bottom>button>i{
    position:relative!important;
    z-index:2!important;
    width:28px!important;
    height:27px!important;
    margin:0!important;
    color:#46667b!important;
    font-size:24px!important;
    line-height:27px!important;
    text-align:center!important;
    transition:color .16s ease!important
  }
  .hitop-mobile-bottom>a>span:not(.hitop-mobile-nav-badge),
  .hitop-mobile-bottom>button>span:not(.hitop-mobile-nav-badge){
    position:relative!important;
    z-index:2!important;
    display:block!important;
    margin:0!important;
    color:inherit!important;
    font:600 11px/13px Arial,Helvetica,sans-serif!important;
    white-space:nowrap!important
  }

  /* Search is the permanent central primary action from the approved visual. */
  .hitop-mobile-bottom>.hitop-mobile-search-focus{
    padding-top:0!important;
    overflow:visible!important
  }
  .hitop-mobile-bottom>.hitop-mobile-search-focus>i{
    width:52px!important;
    height:52px!important;
    margin-top:-24px!important;
    margin-bottom:0!important;
    border:5px solid #fff!important;
    border-radius:50%!important;
    background:#58778d!important;
    box-shadow:0 5px 14px rgba(24,82,121,.22)!important;
    color:#fff!important;
    font-size:22px!important;
    line-height:42px!important;
    box-sizing:border-box!important
  }
  .hitop-mobile-bottom>.hitop-mobile-search-focus>span:not(.hitop-mobile-nav-badge){margin-top:-1px!important}

  /* Active section: blue icon/text + discreet dot, no large blue rectangle. */
  .hitop-mobile-bottom>.is-active{color:#087fc0!important;background:transparent!important}
  .hitop-mobile-bottom>.is-active>i{color:#087fc0!important}
  .hitop-mobile-bottom>.is-active:after{
    content:''!important;
    position:absolute!important;
    left:50%!important;
    bottom:1px!important;
    width:6px!important;
    height:6px!important;
    margin-left:-3px!important;
    border-radius:50%!important;
    background:#087fc0!important
  }
  .hitop-mobile-bottom>.hitop-mobile-search-focus.is-active>i{
    background:#078bd0!important;
    color:#fff!important;
    box-shadow:0 6px 16px rgba(0,126,193,.30)!important
  }
  .hitop-mobile-bottom>.hitop-mobile-search-focus.is-active:after{bottom:1px!important}

  /* Product page: category is the contextual active destination. */
  body.hitop-route-product-product .hitop-mobile-bottom>.hitop-mobile-menu-open{color:#087fc0!important}
  body.hitop-route-product-product .hitop-mobile-bottom>.hitop-mobile-menu-open>i{color:#087fc0!important}

  .hitop-mobile-nav-badge{
    position:absolute!important;
    z-index:5!important;
    top:1px!important;
    left:calc(50% + 8px)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:18px!important;
    height:18px!important;
    padding:0 4px!important;
    border:2px solid #fff!important;
    border-radius:10px!important;
    background:#0b82d0!important;
    color:#fff!important;
    font:700 10px/14px Arial,Helvetica,sans-serif!important;
    box-sizing:border-box!important
  }
  .hitop-mobile-bottom>a:nth-last-child(2) .hitop-mobile-nav-badge{background:#ef3151!important}

  /* Give the final page content room to scroll fully above the fixed navigation. */
  #content-wrapper,.centralbox,#content{scroll-margin-bottom:95px!important}
}

@media only screen and (max-width:359px){
  .hitop-mobile-bottom>a,.hitop-mobile-bottom>button{font-size:10px!important}
  .hitop-mobile-bottom>a>span:not(.hitop-mobile-nav-badge),
  .hitop-mobile-bottom>button>span:not(.hitop-mobile-nav-badge){font-size:10px!important}
}

@media only screen and (min-width:992px){
  .hitop-mobile-nav-badge{display:none!important}
}

/* v2 — HiTop branded search action. CSS-only; no template/JS changes. */
@media only screen and (max-width:991px){
  .hitop-mobile-bottom>.hitop-mobile-search-focus>i,
  .hitop-mobile-bottom>.hitop-mobile-search-focus.is-active>i{
    background-color:#f7bf18!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23fff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='29' cy='28' r='17'/%3E%3Cpath d='M41 40L54 53'/%3E%3Cpath d='M9 29h10l4-8 6 17 5-12 4 7h8'/%3E%3C/g%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:38px 38px!important;
    color:transparent!important;
    font-size:0!important;
    line-height:42px!important;
    box-shadow:0 6px 16px rgba(247,191,24,.32)!important;
  }
  .hitop-mobile-bottom>.hitop-mobile-search-focus>i:before{content:''!important}
}

/* V3 — WCAG AA contrast fixes. Visual hierarchy preserved. */
@media only screen and (max-width:991px){
  .hitop-mobile-bottom>.is-active,
  .hitop-mobile-bottom>.is-active>span:not(.hitop-mobile-nav-badge),
  .hitop-mobile-bottom>.is-active>i,
  body.hitop-route-product-product .hitop-mobile-bottom>.hitop-mobile-menu-open,
  body.hitop-route-product-product .hitop-mobile-bottom>.hitop-mobile-menu-open>span:not(.hitop-mobile-nav-badge),
  body.hitop-route-product-product .hitop-mobile-bottom>.hitop-mobile-menu-open>i{color:#066fa8!important}
  .hitop-mobile-bottom>.is-active:after{background:#066fa8!important}
}