/* ==========================================================
   MOBILE-ONLY COMPACT HEADER (desktop ≥768px NOT affected)
   ========================================================== */
@media (max-width: 767px){

  .nav{
    padding-top:0 !important;
  }

  /* Header becomes a wrapping flexbox instead of stacked grid */
  .nav .header-wrap{
    display:flex !important;
    flex-wrap:wrap;
    align-items:center;
    gap:.5rem !important;
    padding:.5rem .6rem !important;
  }

  /* Unwrap the buttons column so each <li> can be placed freely */
  .nav .header-wrap > .colg-7,
  .nav .header-wrap .action-buttons{
    display:contents;
  }

  /* ---------- ROW 1 : logo left ---------- */
  .nav .header-wrap > .colg-2{
    order:1;
    flex:0 0 auto;
  }
  .nav .header-wrap .colg-2 .logo img{
    height:38px;
    width:auto;
  }

  /* ---------- ROW 1 : cart/bell/profile pushed right ---------- */
  .nav .action-buttons > li.sobg{
    order:2;
    margin-left:auto;
    flex:0 0 auto;
    align-items:center;
    gap:.5rem;
    padding-left:.4rem !important;
  }
  .nav .action-buttons > li.sobg .btn-sm{
    padding:.3rem .4rem;
  }
  .nav .action-buttons .profile-img{
    width:26px;
    height:26px;
  }

  /* ---------- ROW 2 : search full width ---------- */
  .nav .header-wrap > .colg-3{
    order:3;
    flex:0 0 100%;
  }
  .nav .search-form input[type="search"]{
    font-size:.82rem;
    padding:.5rem .7rem;
  }

  /* ---------- ROW 3 : action buttons in ONE line ---------- */
  .nav .action-buttons > li{
    order:4;
    flex:1 1 0;
    min-width:0;
  }
  .nav .action-buttons > li:not(.sobg) > a,
  .nav .action-buttons > li:not(.sobg) > button{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.3rem;
    padding:.42rem .3rem;
    font-size:.72rem;
    white-space:nowrap;
  }
  /* ==========================================================
   MOBILE-ONLY : pin profile dropdown below header (top-right)
   ========================================================== */


  .box_on-click.profile_box{
    position: fixed;                 /* JS below sets exact top/left */
    width: 260px;
    max-width: calc(100vw - 16px);
    max-height: 70vh;
    overflow-y: auto;
    z-index: 99999;
    transform: none !important;      /* kill center-screen transform */
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
  }
  
  .nav .search-form input[type="search"]{
    
    padding: .7rem .9rem;
  }
  /* !important needed because these icons have inline font-size */
  .nav .search-form .search-icon,
  .nav .search-form .fa-qrcode{
    font-size: 1.15rem !important;
  }

  /* ---- bigger action buttons (home / +product / recharge / payment) ---- */
  .nav .action-buttons > li:not(.sobg) > a,
  .nav .action-buttons > li:not(.sobg) > button{
    padding: .55rem .4rem;
    font-size: .8rem;
  }
  .nav .action-buttons > li:not(.sobg) > a i,
  .nav .action-buttons > li:not(.sobg) > button i{
    font-size: 1.0rem;
  }
}

/* Very small phones: hide labels, icons only (optional – delete if not wanted) */
@media (max-width: 400px){
  .nav .action-buttons > li:not(.sobg) span{
    display:none;
  }
}