/* FINAL MOBILE STOREFRONT REPAIR */
@media(max-width:820px){
  html,body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  #siteHeaderMount,
  #siteHeaderMount>.sticky{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  #siteHeaderMount .announce{
    height:24px!important;
    min-height:24px!important;
  }
  #siteHeaderMount .announceTrack{
    font-size:8px!important;
    letter-spacing:.08em!important;
    gap:16px!important;
  }

  /* Header becomes two compact rows: brand/actions, then category navigation. */
  #siteHeaderMount .nav{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:0!important;
    padding:6px 8px 7px!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:58px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:7px!important;
    row-gap:5px!important;
    align-items:center!important;
  }
  #siteHeaderMount .brand{
    grid-column:1!important;
    grid-row:1!important;
    width:58px!important;
    height:54px!important;
    min-width:0!important;
    min-height:0!important;
    overflow:visible!important;
    justify-content:center!important;
  }
  #siteHeaderMount .brand img,
  #siteHeaderMount #headerBrandImg{
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
    max-width:52px!important;
    max-height:52px!important;
    object-fit:contain!important;
    transform:none!important;
    margin:0!important;
  }

  #siteHeaderMount .navActions{
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:4px!important;
    padding:0!important;
    flex-wrap:nowrap!important;
    overflow:visible!important;
  }
  #siteHeaderMount .navActions>*{
    min-width:0!important;
    max-width:none!important;
    flex:0 1 auto!important;
  }
  #siteHeaderMount .langToggle{
    width:34px!important;
    min-width:34px!important;
    height:31px!important;
    padding:0!important;
    font-size:10px!important;
  }
  #siteHeaderMount .navActions .pill,
  #siteHeaderMount .navActions .adminConsoleTop,
  #siteHeaderMount .navActions #accountBtn{
    min-width:0!important;
    height:31px!important;
    padding:5px 7px!important;
    font-size:9px!important;
    line-height:1!important;
    border-radius:999px!important;
    white-space:nowrap!important;
  }
  #siteHeaderMount .navActions #cartBtn{
    min-width:0!important;
    height:31px!important;
    padding:5px 8px!important;
    font-size:9px!important;
    white-space:nowrap!important;
  }

  #siteHeaderMount .navLinks{
    grid-column:1/-1!important;
    grid-row:2!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:row!important;
    justify-content:flex-start!important;
    align-items:center!important;
    gap:5px!important;
    padding:1px 0 2px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    white-space:nowrap!important;
  }
  #siteHeaderMount .navLinks::-webkit-scrollbar{display:none!important}
  #siteHeaderMount .navRow{
    display:contents!important;
  }
  #siteHeaderMount .navLinks a,
  #siteHeaderMount .navLinks button{
    flex:0 0 auto!important;
    min-width:0!important;
    padding:6px 8px!important;
    font-size:9px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
  }

  /* Home content must fit the phone width; large hero logo no longer drives layout wider. */
  main,#app,.hero,.heroCopy,.heroBrand,.deptGrid,.categoryGrid,.grid{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .hero{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:18px 12px!important;
    overflow:hidden!important;
  }
  .heroCopy{
    padding:0!important;
  }
  .heroCopy h1{
    font-size:clamp(29px,9vw,42px)!important;
    line-height:1.02!important;
    overflow-wrap:anywhere!important;
  }
  .heroCopy p{
    font-size:13px!important;
    line-height:1.45!important;
  }
  .heroBrand{
    width:100%!important;
    height:230px!important;
    min-height:0!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
  }
  .heroBrand img,
  .hero img{
    width:min(220px,68vw)!important;
    height:min(220px,68vw)!important;
    max-width:220px!important;
    max-height:220px!important;
    object-fit:contain!important;
    transform:none!important;
    left:auto!important;
    right:auto!important;
  }

  .benefitRibbon{
    width:calc(100% - 16px)!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    grid-template-columns:1fr!important;
  }

  /* Prevent any card/content from forcing viewport width. */
  .card,.product,.panel,.dept,.categoryHead,.v37Checkout,.v37Box,
  .accountShell,.profileCompactPanel,.accountOrderFull,.siteFooter,.footerWrap{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  img,video,canvas,svg{max-width:100%}
}

@media(max-width:430px){
  #siteHeaderMount .nav{
    grid-template-columns:48px minmax(0,1fr)!important;
    padding:5px 6px 6px!important;
  }
  #siteHeaderMount .brand{width:48px!important;height:46px!important}
  #siteHeaderMount .brand img,
  #siteHeaderMount #headerBrandImg{
    width:44px!important;height:44px!important;min-width:44px!important;max-width:44px!important
  }
  #siteHeaderMount .navActions{gap:3px!important}
  #siteHeaderMount .langToggle{width:29px!important;min-width:29px!important;height:29px!important;font-size:9px!important}
  #siteHeaderMount .navActions .pill,
  #siteHeaderMount .navActions .adminConsoleTop,
  #siteHeaderMount .navActions #accountBtn,
  #siteHeaderMount .navActions #cartBtn{
    height:29px!important;
    padding:4px 6px!important;
    font-size:8.5px!important;
  }
  #siteHeaderMount .navLinks a,
  #siteHeaderMount .navLinks button{
    padding:5px 7px!important;
    font-size:8.5px!important;
  }
  .hero{padding:14px 10px!important}
  .heroBrand{height:190px!important}
  .heroBrand img,.hero img{
    width:min(185px,62vw)!important;
    height:min(185px,62vw)!important;
  }
}