/* V34 — Mobile storefront/header stabilization */
@media (max-width:700px){
  html,body{max-width:100%;overflow-x:hidden}
  body{padding-bottom:76px}
  .container{width:calc(100% - 24px)!important;max-width:100%!important;margin-inline:auto!important}

  /* top strip */
  .topline{overflow:hidden}
  .topline .container{min-height:36px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;white-space:nowrap!important;font-size:10px!important}
  .topline .container span:nth-child(2){display:none!important}
  .topline .container span,.topline .container a{min-width:0;overflow:hidden;text-overflow:ellipsis}

  /* header row: logo right / actions left, search full width below */
  .tw-header{width:100%;overflow:visible!important}
  .tw-head{
    width:calc(100% - 24px)!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"logo actions" "search search"!important;
    align-items:center!important;
    column-gap:12px!important;
    row-gap:12px!important;
    padding:12px 0 14px!important;
    min-height:0!important;
  }
  .tw-logo{
    grid-area:logo!important;
    justify-self:end!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    overflow:hidden!important;
  }
  .tw-logo img{
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:min(190px,100%)!important;
    max-height:54px!important;
    object-fit:contain!important;
    object-position:right center!important;
  }
  .tw-actions{
    grid-area:actions!important;
    justify-self:start!important;
    margin:0!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:4px!important;
    direction:rtl!important;
  }
  .tw-action,.tw-wishlist{
    display:grid!important;
    place-items:center!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    padding:0!important;
    border-radius:10px!important;
  }
  .tw-action-copy{display:none!important}
  .tw-action-icon,.tw-action .desktop-cart-svg{
    width:26px!important;height:26px!important;flex:0 0 26px!important
  }
  .tw-action-icon svg,.tw-action .desktop-cart-svg svg{width:26px!important;height:26px!important}
  .tw-action .desktop-cart-svg i{top:-7px!important;right:-7px!important}

  .tw-search{
    grid-area:search!important;
    width:100%!important;
    min-width:0!important;
    height:50px!important;
    margin:0!important;
    border-radius:10px!important;
    overflow:visible!important;
  }
  .tw-search input{
    width:100%!important;
    min-width:0!important;
    height:48px!important;
    padding:0 42px 0 10px!important;
    font-size:13px!important;
  }
  .tw-search button{height:48px!important;min-width:76px!important;padding:0 18px!important;font-size:14px!important}
  .tw-search-icon{right:14px!important;width:20px!important;height:20px!important}

  /* live search stays attached to field; no screen-floating box */
  .search-suggestions{
    position:absolute!important;
    top:calc(100% + 6px)!important;
    right:0!important;
    left:0!important;
    width:100%!important;
    max-height:60vh!important;
    border-radius:10px!important;
  }
  .search-suggestions>a:not(.search-all-results){
    grid-template-columns:48px minmax(0,1fr) 72px!important;
    gap:8px!important;
    min-height:64px!important;
    padding:7px!important;
  }
  .search-thumb{width:46px!important;height:46px!important}
  .search-copy b{font-size:10.5px!important}
  .search-copy small{font-size:7.8px!important}
  .search-price{font-size:10.5px!important}

  /* horizontal category strip */
  .tw-category-nav{width:100%!important;overflow:hidden!important}
  .tw-category-nav>.container{
    width:100%!important;
    max-width:100%!important;
    height:50px!important;
    padding-inline:12px!important;
    margin:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    gap:0!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .tw-category-nav>.container::-webkit-scrollbar{display:none}
  .tw-category-nav .nav-category-item,.tw-category-nav .nav-category-root{height:50px!important;flex:0 0 auto!important}
  .tw-category-nav .nav-category-root{padding:0 12px!important;font-size:12px!important;white-space:nowrap!important}
  .tw-category-nav .nav-category-dropdown{display:none!important}

  /* main mobile banner: use mobile file at its natural 750x900 ratio */
  .cms-hero.hero-image-slider{
    width:calc(100% - 24px)!important;
    height:auto!important;
    min-height:0!important;
    margin:12px auto 22px!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:12px!important;
    aspect-ratio:auto!important;
  }
  .cms-hero .cms-slide{height:auto!important;min-height:0!important;position:relative!important;inset:auto!important}
  .cms-hero .cms-slide:not(.active){display:none!important}
  .cms-hero .cms-slide.active{display:block!important}
  .cms-hero .hero-banner-link,.cms-hero picture{display:block!important;width:100%!important;height:auto!important}
  .cms-hero img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center!important;
    border-radius:12px!important;
  }
  .slider-dots{bottom:8px!important}

  /* keep content centered and clear of bottom navigation */
  main{width:100%!important;overflow:hidden!important}
  .category-section,.products-section,.middle-banners{max-width:100%!important}
  .float{display:none!important}
  .mobile-bottom-nav{z-index:9998!important}
}

@media (max-width:420px){
  .tw-head{column-gap:8px!important}
  .tw-logo img{max-width:160px!important;max-height:48px!important}
  .tw-action,.tw-wishlist{width:34px!important;height:34px!important;min-width:34px!important}
  .tw-action-icon,.tw-action .desktop-cart-svg{width:23px!important;height:23px!important;flex-basis:23px!important}
  .tw-action-icon svg,.tw-action .desktop-cart-svg svg{width:23px!important;height:23px!important}
  .tw-category-nav .nav-category-root{padding:0 10px!important;font-size:11.5px!important}
}