/* Universal Store Clean Child 5.2.0 - Mobile header and bottom navigation UX refresh
   Scope: mobile header + bottom navigation only. Does not touch product/checkout/gallery layout. */
:root{
  --usc52-mobile-header-h:72px;
  --usc52-bottom-nav-h:78px;
  --usc52-ease:cubic-bezier(.22,1,.36,1);
}

@media (max-width:940px){
  html,body{max-width:100%;overflow-x:hidden;}
  body.usg-theme{
    padding-bottom:calc(var(--usc52-bottom-nav-h) + 18px + env(safe-area-inset-bottom,0px))!important;
  }

  /* Mobile top header: always visible, polished, compact, and not hidden on scroll. */
  body.usg-theme .usg-mobile-header{
    display:block!important;
    position:sticky!important;
    top:0!important;
    right:0!important;
    left:0!important;
    z-index:99990!important;
    background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.88))!important;
    border-bottom:1px solid rgba(15,23,42,.08)!important;
    box-shadow:0 14px 34px rgba(15,23,42,.08)!important;
    backdrop-filter:saturate(155%) blur(18px)!important;
    -webkit-backdrop-filter:saturate(155%) blur(18px)!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
  }
  body.usg-theme .usg-mobile-header.is-hidden{
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
  }
  html[data-usg-theme="dark"] body.usg-theme .usg-mobile-header{
    background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(15,23,42,.88))!important;
    border-bottom-color:rgba(255,255,255,.10)!important;
  }
  body.usg-theme .usg-mobile-header__notice{
    min-height:26px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:5px 14px!important;
    font-size:11px!important;
    font-weight:850!important;
    color:color-mix(in srgb,var(--usg-primary) 78%,#0f172a)!important;
    background:linear-gradient(90deg,color-mix(in srgb,var(--usg-primary) 8%,transparent),color-mix(in srgb,var(--usg-accent) 7%,transparent))!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.usg-theme .usg-mobile-header__bar{
    min-height:58px!important;
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:8px!important;
    padding:8px 12px!important;
    width:100%!important;
    max-width:100%!important;
  }
  body.usg-theme .usg-mobile-brand{
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    text-decoration:none!important;
    color:var(--usg-text)!important;
    overflow:hidden!important;
  }
  body.usg-theme .usg-mobile-brand__logo{
    max-width:78px!important;
    max-height:42px!important;
    width:auto!important;
    height:auto!important;
    object-fit:contain!important;
    display:block!important;
    flex:0 0 auto!important;
    filter:drop-shadow(0 5px 10px rgba(15,23,42,.08));
  }
  body.usg-theme .usg-mobile-brand__mark{
    width:40px!important;
    height:40px!important;
    border-radius:16px!important;
    display:grid!important;
    place-items:center!important;
    color:#fff!important;
    background:linear-gradient(135deg,var(--usg-primary),var(--usg-accent))!important;
    font-weight:950!important;
    flex:0 0 auto!important;
    box-shadow:0 10px 22px color-mix(in srgb,var(--usg-primary) 24%,transparent)!important;
  }
  body.usg-theme .usg-mobile-brand__text{
    min-width:0!important;
    display:grid!important;
    gap:1px!important;
    line-height:1.25!important;
  }
  body.usg-theme .usg-mobile-brand__text strong{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:13px!important;
    font-weight:950!important;
    letter-spacing:-.01em!important;
  }
  body.usg-theme .usg-mobile-brand__text small{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:10.5px!important;
    font-weight:750!important;
    color:var(--usg-muted)!important;
  }
  body.usg-theme .usg-mobile-header__actions{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    flex:0 0 auto!important;
  }
  body.usg-theme .usg-icon-btn{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:16px!important;
    border:1px solid color-mix(in srgb,var(--usg-border) 70%,transparent)!important;
    background:rgba(255,255,255,.72)!important;
    color:var(--usg-text)!important;
    box-shadow:0 8px 20px rgba(15,23,42,.06)!important;
    transition:transform .14s var(--usc52-ease),background .14s ease,color .14s ease,box-shadow .14s ease!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  html[data-usg-theme="dark"] body.usg-theme .usg-icon-btn{
    background:rgba(255,255,255,.07)!important;
    border-color:rgba(255,255,255,.10)!important;
  }
  body.usg-theme .usg-icon-btn svg{width:21px!important;height:21px!important;display:block!important;}
  body.usg-theme .usg-icon-btn:active,
  body.usg-theme .usg-icon-btn.is-pressed{
    transform:scale(.94)!important;
    background:color-mix(in srgb,var(--usg-primary) 12%,var(--usg-surface))!important;
    color:var(--usg-primary)!important;
  }
  body.usg-theme .usg-icon-btn b{
    position:absolute!important;
    top:-4px!important;
    left:-4px!important;
    min-width:18px!important;
    height:18px!important;
    border-radius:999px!important;
    display:grid!important;
    place-items:center!important;
    background:#ef4444!important;
    color:#fff!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:950!important;
    box-shadow:0 6px 14px rgba(239,68,68,.25)!important;
  }

  /* Mobile bottom navigation: stable, centered, and readable. */
  body.usg-theme .usg-bottom-nav{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    position:fixed!important;
    right:10px!important;
    left:10px!important;
    bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
    width:auto!important;
    height:66px!important;
    max-width:560px!important;
    margin-inline:auto!important;
    z-index:99980!important;
    padding:6px!important;
    gap:3px!important;
    border-radius:24px!important;
    background:rgba(255,255,255,.94)!important;
    border:1px solid rgba(15,23,42,.10)!important;
    box-shadow:0 18px 48px rgba(15,23,42,.18)!important;
    backdrop-filter:saturate(160%) blur(18px)!important;
    -webkit-backdrop-filter:saturate(160%) blur(18px)!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    overflow:visible!important;
    pointer-events:auto!important;
  }
  html[data-usg-theme="dark"] body.usg-theme .usg-bottom-nav{
    background:rgba(15,23,42,.92)!important;
    border-color:rgba(255,255,255,.10)!important;
  }
  body.usg-theme.usg-form-focus .usg-bottom-nav{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  body.usg-theme .usg-bottom-nav__item{
    position:relative!important;
    min-width:0!important;
    min-height:52px!important;
    height:52px!important;
    display:grid!important;
    grid-template-rows:22px 1fr!important;
    align-items:center!important;
    justify-items:center!important;
    gap:2px!important;
    padding:6px 3px 5px!important;
    border-radius:18px!important;
    color:var(--usg-muted)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    text-decoration:none!important;
    font-size:10.5px!important;
    font-weight:850!important;
    line-height:1.1!important;
    -webkit-tap-highlight-color:transparent!important;
    transition:transform .14s var(--usc52-ease),background .14s ease,color .14s ease,box-shadow .14s ease!important;
  }
  body.usg-theme .usg-bottom-nav__item svg{
    width:21px!important;
    height:21px!important;
    display:block!important;
    fill:currentColor!important;
    stroke:currentColor!important;
    transition:transform .14s var(--usc52-ease)!important;
  }
  body.usg-theme .usg-bottom-nav__item span{
    display:block!important;
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.usg-theme .usg-bottom-nav__item.is-active:not(.usg-bottom-nav__item--search),
  body.usg-theme .usg-bottom-nav__item:hover:not(.usg-bottom-nav__item--search),
  body.usg-theme .usg-bottom-nav__item:focus-visible:not(.usg-bottom-nav__item--search){
    color:var(--usg-primary)!important;
    background:linear-gradient(135deg,color-mix(in srgb,var(--usg-primary) 12%,var(--usg-surface)),color-mix(in srgb,var(--usg-accent) 7%,var(--usg-surface)))!important;
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--usg-primary) 14%,transparent)!important;
  }
  body.usg-theme .usg-bottom-nav__item.is-active:not(.usg-bottom-nav__item--search)::before{
    content:""!important;
    position:absolute!important;
    top:4px!important;
    width:18px!important;
    height:3px!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,var(--usg-primary),var(--usg-accent))!important;
  }
  body.usg-theme .usg-bottom-nav__item:active,
  body.usg-theme .usg-bottom-nav__item.is-pressed{transform:scale(.94)!important;}
  body.usg-theme .usg-bottom-nav__item b{
    position:absolute!important;
    top:2px!important;
    left:12px!important;
    min-width:18px!important;
    height:18px!important;
    border-radius:999px!important;
    display:grid!important;
    place-items:center!important;
    background:#ef4444!important;
    color:#fff!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:950!important;
    border:2px solid #fff!important;
  }
  body.usg-theme .usg-bottom-nav__item--search{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    align-self:center!important;
    justify-self:center!important;
    margin:0!important;
    padding:0!important;
    grid-template-rows:1fr!important;
    border-radius:999px!important;
    background:color-mix(in srgb,var(--usg-primary) 7%,var(--usg-surface))!important;
    color:color-mix(in srgb,var(--usg-primary) 62%,var(--usg-muted))!important;
    border:1px solid color-mix(in srgb,var(--usg-primary) 12%,transparent)!important;
    box-shadow:none!important;
  }
  body.usg-theme .usg-bottom-nav__item--search span,
  body.usg-theme .usg-bottom-nav__item--search::before{
    display:none!important;
    content:none!important;
  }
  body.usg-theme .usg-bottom-nav__item--search svg{
    width:23px!important;
    height:23px!important;
  }
  body.usg-theme .usg-bottom-nav__item--search:hover,
  body.usg-theme .usg-bottom-nav__item--search:focus-visible,
  body.usg-theme .usg-bottom-nav__item--search.is-active{
    background:color-mix(in srgb,var(--usg-primary) 8%,var(--usg-surface))!important;
    color:color-mix(in srgb,var(--usg-primary) 66%,var(--usg-muted))!important;
    box-shadow:none!important;
    transform:none!important;
  }

  body.usg-theme .usg-mobile-buy-bar{
    bottom:calc(var(--usc52-bottom-nav-h) + 18px + env(safe-area-inset-bottom,0px))!important;
  }
}

@media (max-width:390px){
  body.usg-theme .usg-mobile-header__bar{grid-template-columns:40px minmax(0,1fr) auto!important;padding-inline:9px!important;}
  body.usg-theme .usg-mobile-brand__logo{max-width:64px!important;max-height:38px!important;}
  body.usg-theme .usg-mobile-brand__text small{font-size:10px!important;}
  body.usg-theme .usg-bottom-nav{right:7px!important;left:7px!important;height:64px!important;border-radius:22px!important;}
  body.usg-theme .usg-bottom-nav__item{font-size:10px!important;border-radius:16px!important;}
}

@media (min-width:941px){
  body.usg-theme .usg-mobile-header,
  body.usg-theme .usg-bottom-nav{display:none!important;}
}

@media (prefers-reduced-motion:reduce){
  body.usg-theme .usg-mobile-header,
  body.usg-theme .usg-mobile-header *,
  body.usg-theme .usg-bottom-nav,
  body.usg-theme .usg-bottom-nav *{transition:none!important;animation:none!important;}
}