/* =====================================================================
   Ager — mobile header + slide-in menu + FAB social buttons
   (assets/mobile.css)

   IMPORTANT: everything that changes the look lives inside
   @media (max-width:700px). Above 700px (desktop / Windows) the only rules
   in this file are the "display:none" lines directly below, which hide the
   new mobile-only elements, so the desktop layout stays exactly as it was.
   ===================================================================== */

/* mobile-only elements: invisible on desktop */
.m-burger,
.m-drawer-head,
.m-backdrop{display:none;}

@media(max-width:700px){

  /* ---------- top bar: [☰][👤]  ·  logo (centered)  ·  [🛍] ---------- */
  header{
    background:#fff;
    -webkit-backdrop-filter:none;backdrop-filter:none;   /* keeps the slide-in menu positioned to the screen, not the header */
  }
  header .wrap.nav{
    position:relative;
    display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;
    gap:12px 0;height:auto;padding:14px 14px 12px;
  }
  header .nav-right{display:contents;}

  /* hamburger (right) */
  header .m-burger{
    order:1;display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;padding:0;background:none;color:var(--text);
  }
  header .m-burger svg{width:30px;height:30px;}

  /* account = plain user icon, right next to the hamburger (works for both the logged-out pill and the logged-in icon) */
  header .nav-right > :first-child{
    order:2;width:44px;height:44px;min-width:0;padding:0;margin:0;
    border:0;border-radius:0;box-shadow:none;overflow:hidden;
    font-size:0;line-height:0;color:transparent;
    background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%2314181f' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='20' cy='13' r='7.5'/%3E%3Cpath d='M5 36c1.5-8 7.5-12 15-12s13.5 4 15 12'/%3E%3C/svg%3E") center/32px 32px no-repeat;
  }
  header .nav-right > :first-child svg{display:none;}

  /* cart (left): rounded grey square + orange counter */
  header .cart-hover-wrap{order:3;margin-inline-start:auto;}
  header .cart-hover-wrap .icon-btn{
    width:50px;height:50px;border:0;border-radius:16px;
    background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23ffe3d0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='14' width='26' height='20' rx='7'/%3E%3Cpath d='M14 14v-1a6 6 0 0 1 12 0v1'/%3E%3Cpath d='M15.5 23v.01M24.5 23v.01' stroke-width='3'/%3E%3C/svg%3E") center/34px 34px no-repeat;
  }
  header .cart-hover-wrap .icon-btn svg{display:none;}
  header .cart-count{
    top:-9px;left:-7px;right:auto;
    width:auto;min-width:24px;height:24px;padding:0 6px;border-radius:999px;
    background:#1c1b2b;color:#fff;font-size:13px;font-weight:700;line-height:1;
  }
  header .cart-preview{display:none;}   /* hover preview makes no sense on touch */

  /* logo: exactly centered between the two sides */
  header .nav .header-logo{
    position:absolute;top:14px;left:0;right:0;margin:0 auto;
    width:max-content;height:52px;z-index:1;
    display:flex;align-items:center;justify-content:center;
  }
  header .nav .header-logo img{height:44px;width:auto;}

  /* search bar (second row) */
  header .header-search{
    order:4;flex:1 0 100%;height:50px;padding:0 16px;gap:12px;
    border:0;border-radius:16px;background:var(--surface-2);color:var(--muted);
  }
  header .header-search svg{width:26px;height:26px;color:var(--text);stroke-width:1.6;}
  header .header-search span{font-size:0;}
  header .header-search span::after{content:"کلید واژه مورد نظر ...";font-size:14.5px;color:#8a8f98;}

  /* ---------- slide-in menu (from the right) ---------- */
  header .m-backdrop{
    display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2;
    background:rgba(6,8,11,.55);
    opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;
  }
  header .m-backdrop.m-open{opacity:1;visibility:visible;transition:opacity .3s ease;}

  header .nav-sub{
    position:fixed;top:0;right:0;bottom:0;z-index:3;
    width:min(86vw,340px);border:0;background:#fff;
    box-shadow:-16px 0 40px rgba(20,24,31,.22);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    transform:translateX(105%);visibility:hidden;
    transition:transform .3s ease,visibility 0s linear .3s;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  header .nav-sub.m-open{transform:none;visibility:visible;transition:transform .3s ease;}

  header .m-drawer-head{
    display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:2;background:#fff;border-bottom:1px solid var(--line);
    padding:12px 18px;padding-top:calc(12px + env(safe-area-inset-top,0px));
  }
  header .m-drawer-head img{height:40px;width:auto;}
  header .m-close{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;border-radius:12px;background:var(--surface-2);color:var(--text);padding:0;
  }
  header .m-close svg{width:18px;height:18px;}

  header .nav-sub .wrap{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    max-width:none;padding:4px 0 24px;position:static;
  }
  header .nav-links{display:contents;}   /* links become direct rows so the category list can sit right under its button */
  header .nav-links > a{
    order:3;display:flex;align-items:center;gap:14px;flex-shrink:0;
    height:auto;padding:15px 20px;border-bottom:1px solid var(--line);
    font-size:15.5px;font-weight:600;color:var(--text);
  }
  header .nav-links > a::after{display:none;}
  header .nav-links > a svg{width:22px;height:22px;}
  header .nav-links > a.nav-cta{order:1;padding:15px 20px;}
  header .nav-cta .nc-chevron{margin-inline-start:auto;width:16px;height:16px;}

  /* category accordion (re-uses the existing mega-menu logic) */
  header .mega-menu{
    order:2;position:static;display:none;
    left:auto;right:auto;max-height:none;overflow:visible;margin:0;padding:0;border-radius:0;
  }
  header .mega-menu.open{display:block;}
  header .mm-l1{
    width:auto;margin:0;padding:6px 10px 10px;border:0;border-radius:0;box-shadow:none;
    background:#f7f8fa;border-bottom:1px solid var(--line);
  }
  header .mm-link{padding:12px 10px;font-size:14.5px;}

  html.m-menu-open{overflow:hidden;}
  html.m-menu-open header{z-index:120;}
  html.m-menu-open .fab{display:none;}
}