/* ============================================================
   ALPHA JO — MOBILE HEADER FIX
   2026-10-07

   Mobile only:
   - Hide duplicate top Wishlist / Cart buttons.
   - Hide the legacy hamburger/menu button.
   - Keep EN/Arabic language button beside the search.
   - Make all categories fit across the screen.
   - Shrink the blue/orange delivery banner.
   - Keep the fixed bottom navigation unchanged.
   ============================================================ */

@media (max-width: 760px){

  /* ---------- Compact top row ---------- */
  .header-inner.alpha-header-layout{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:5px 7px 3px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 58px!important;
    grid-template-areas:
      "left brand"
      "categories categories"!important;
    gap:3px 6px!important;
    align-items:center!important;
  }

  .alpha-header-left{
    grid-area:left!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"search actions"!important;
    align-items:center!important;
    gap:6px!important;
  }

  .alpha-header-left .search{
    grid-area:search!important;
    width:100%!important;
    height:40px!important;
    min-height:40px!important;
    margin:0!important;
    border-width:2px!important;
  }

  .alpha-header-left .search input{
    min-width:0!important;
    padding:0 12px!important;
    font-size:11.5px!important;
  }

  .alpha-header-left .search button{
    min-width:48px!important;
    height:100%!important;
    padding:0 9px!important;
    font-size:9.5px!important;
  }

  /* Only language remains in the top actions on mobile. */
  .alpha-header-left .header-actions{
    grid-area:actions!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:40px!important;
    height:40px!important;
    gap:0!important;
    margin:0!important;
  }

  .alpha-header-left #favoritesBtn,
  .alpha-header-left #cartBtn,
  .alpha-header-left .menu-btn{
    display:none!important;
  }

  .alpha-header-left .language-btn{
    display:grid!important;
    place-items:center!important;
    width:43px!important;
    min-width:43px!important;
    height:38px!important;
    min-height:38px!important;
    padding:0 7px!important;
    border-radius:999px!important;
    font-size:10px!important;
    font-weight:900!important;
  }

  /* ---------- Smaller logo ---------- */
  .alpha-header-brand{
    grid-area:brand!important;
    width:58px!important;
    min-width:58px!important;
    height:52px!important;
    min-height:52px!important;
    margin:0!important;
    padding:0!important;
  }

  .alpha-header-brand img{
    width:auto!important;
    max-width:54px!important;
    height:auto!important;
    max-height:50px!important;
    object-fit:contain!important;
  }

  /* ---------- Fit ALL category buttons on-screen ---------- */
  .categories-bar.alpha-header-categories{
    grid-area:categories!important;
    width:100%!important;
    height:65px!important;
    min-height:65px!important;
    padding:2px 1px 3px!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:repeat(var(--alpha-cat-count,6),minmax(0,1fr))!important;
    align-items:start!important;
    justify-items:center!important;
    gap:2px!important;
    overflow:hidden!important;
    direction:rtl!important;
    scroll-snap-type:none!important;
  }

  html[dir="ltr"] .categories-bar.alpha-header-categories{
    direction:ltr!important;
  }

  .categories-bar .alpha-cat-circle{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:62px!important;
    min-height:62px!important;
    padding:0!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    overflow:visible!important;
    scroll-snap-align:none!important;
  }

  .alpha-cat-photo{
    box-sizing:border-box!important;
    width:min(var(--alpha-cat-photo,44px),calc(100% - 5px))!important;
    height:min(var(--alpha-cat-photo,44px),calc(100vw / var(--alpha-cat-count,6) - 10px))!important;
    max-width:44px!important;
    max-height:44px!important;
    min-width:28px!important;
    min-height:28px!important;
    flex:0 0 auto!important;
    padding:2px!important;
  }

  .alpha-cat-label{
    box-sizing:border-box!important;
    width:auto!important;
    max-width:100%!important;
    min-height:18px!important;
    margin-top:-2px!important;
    padding:2px 3px!important;
    border-radius:8px!important;
    font-size:clamp(6.4px,1.9vw,8px)!important;
    line-height:1.06!important;
    font-weight:900!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  /* ---------- Smaller delivery/reward banner ---------- */
  .reward-progress{
    height:33px!important;
    min-height:33px!important;
    padding:0 4px!important;
    gap:4px!important;
  }

  .rp-stats{
    padding:2px 6px!important;
    gap:4px!important;
  }

  .rp-stat{
    gap:2px!important;
    font-size:8.5px!important;
  }

  .rp-stat b{
    font-size:9.5px!important;
  }

  .rp-icon{
    font-size:9.5px!important;
  }

  .rp-cur{
    font-size:7px!important;
  }

  .rp-message{
    min-width:0!important;
    padding:0 1px!important;
    font-size:8.5px!important;
    line-height:1.1!important;
  }

  .rp-savings{
    padding:2px 6px!important;
    gap:2px!important;
    font-size:8.5px!important;
  }

  .rp-savings b{
    font-size:9.5px!important;
  }

  .rp-savings .rp-icon{
    font-size:9.5px!important;
  }

  .rp-savings-label{
    display:none!important;
  }

  /* Bottom nav is the only cart/wishlist navigation on mobile. */
  .alpha-mobile-nav{
    display:grid!important;
  }
}

@media (max-width: 390px){
  .header-inner.alpha-header-layout{
    grid-template-columns:minmax(0,1fr) 54px!important;
    padding-inline:5px!important;
  }

  .alpha-header-brand{
    width:54px!important;
    min-width:54px!important;
  }

  .alpha-header-brand img{
    max-width:50px!important;
    max-height:47px!important;
  }

  .alpha-header-left .language-btn{
    width:39px!important;
    min-width:39px!important;
    height:36px!important;
    min-height:36px!important;
  }

  .categories-bar.alpha-header-categories{
    height:62px!important;
    min-height:62px!important;
    gap:1px!important;
  }

  .categories-bar .alpha-cat-circle{
    height:59px!important;
    min-height:59px!important;
  }

  .alpha-cat-photo{
    max-width:41px!important;
    max-height:41px!important;
  }

  .alpha-cat-label{
    font-size:clamp(6px,1.8vw,7.5px)!important;
    padding-inline:2px!important;
  }

  .reward-progress{
    height:31px!important;
    min-height:31px!important;
  }

  .rp-message{
    font-size:8px!important;
  }
}