/* ===== Phone only (<= 767px) ===== */
@media (max-width: 767px) {
  :root { --navh:56px; --navbg:#131921; --subbg:#1e2a38; --accent:#ff9900; }

  /* Page offset for fixed nav + subnav */
  body { padding-top: calc(56px + 10px + 48px) !important; background:#f5f5f5; }

  /* ========== TOP NAVBAR (use existing markup) ========== */
  .navbar{
    position:fixed; top:0; left:0; right:0; z-index:1000;
    background:var(--navbg) !important; color:#fff;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
    display:block;
  }
  .navbar .nav-left{
    min-height:var(--navh);
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:8px 12px;
  }
  .navbar .logo{ font-size:22px; font-weight:800; color:#fff; text-decoration:none; }
  .navbar .deliver{ display:inline-flex; align-items:center; gap:6px; color:#fff; }
  .navbar .nav-right{ position:absolute; right:10px; top:10px; }
  .navbar .cart, .navbar .nav-right div{
    display:inline-flex; align-items:center; gap:6px; color:#fff;
    background:#0f1620; border-radius:999px; padding:6px 10px; font-weight:700;
  }

  /* Search row (existing .nav-search) */
  .nav-search{
    display:grid !important; grid-template-columns: 84px 1fr 46px; gap:8px;
    padding:8px 12px 10px; background:#0f1620;
    margin:0 !important;
  }
  .nav-search select{
    width:100%; appearance:none;
    border:1px solid #223; border-radius:8px;
    background:#0b1119; color:#ddd; padding:10px 8px;
  }
  .nav-search input{
    border:1px solid #223; border-radius:8px; padding:10px 12px; background:#fff; color:#111;
  }
  .nav-search button{
    border:none; border-radius:8px; background:var(--accent);
    display:flex; align-items:center; justify-content:center; font-size:16px;
  }

  /* ========== SUB NAVBAR (only "All") ========== */
  .sub-navbar{
    position:fixed; top:calc(var(--navh) + 10px); left:0; right:0; z-index:999;
    background:#1e2a38; color:#e8eef6;
    display:flex; align-items:center; gap:10px; padding:10px 12px;
    border-top:1px solid #223; border-bottom:1px solid #223;
  }
  .sub-navbar .all-btn{
    font-weight:800; font-size:18px; color:#e8eef6; cursor:pointer;
  }
  /* hide all category links on phone; keep only All button */
  .sub-navbar a{ display:none !important; }

  /* optional hamburger look for the icon inside .all-btn */
  .sub-navbar .fa-bars{ 
    background:#c0c4cb66; color:#333; padding:6px; border-radius:8px; margin-right:8px;
    width: 20px; text-align:center;
  }

  /* Slider spacing fix on phones to avoid overlay */
  .slider{ margin-top: 8px; }
}