/* ============================================================
   BOSCH PRO PARTNER NETWORK — MOBILE
   Responsive layer (max-width: 768px). Natural page scroll,
   sticky header + hamburger. No device frame.
   ============================================================ */

.m-app{
  min-height:100vh; background:var(--bg); color:var(--ink);
  font-family:var(--sans); position:relative;
}

/* ---------- Header ---------- */
.m-hdr{
  position:sticky; top:0; z-index:40;
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:12px 16px; display:flex; align-items:center; gap:12px;
}
.m-hdr .rainbow-strip{ position:absolute; top:0; left:0; right:0; height:4px; background-image:url('assets/rainbow-bar.png'); background-size:cover; }
.m-hdr .logo{ height:22px; }
.m-hdr-spacer{ flex:1; }
.m-hdr-pts{
  display:flex; align-items:center; gap:7px; background:var(--navy); color:#fff;
  padding:7px 12px; border-radius:999px; font-family:var(--num-font); font-size:13px; font-weight:700;
}
.m-hdr-pts .lbl{ font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; color:#9fc4e0; text-transform:uppercase; }
.m-iconbtn{
  width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:10px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
}
.m-iconbtn.plain{ border:none; background:transparent; }
.m-avatar{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-weight:600; font-size:13px; color:#fff; background:linear-gradient(135deg,var(--blue),var(--navy)); flex:none; }

/* ---------- Scroll area ---------- */
.m-pad{ padding:16px; }
.m-pad-b{ padding-bottom:40px; }

/* ---------- Bottom tab bar ---------- */
.m-tabs{
  flex:none; background:var(--surface); border-top:1px solid var(--line);
  display:flex; align-items:stretch; padding:8px 6px 26px;
}
.m-tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  background:none; border:none; padding:6px 2px; color:var(--faint); position:relative;
}
.m-tab .lbl{ font-size:10px; font-weight:600; letter-spacing:.01em; }
.m-tab.active{ color:var(--blue-700); }
.m-tab.up{ }
.m-tab .up-btn{
  width:50px; height:50px; border-radius:15px; background:var(--red); color:#fff;
  display:grid; place-items:center; margin-top:-18px; box-shadow:0 6px 16px rgba(237,0,7,.35);
  border:3px solid var(--surface);
}

/* ---------- Drawer ---------- */
.m-scrim{ position:fixed; inset:0; background:rgba(2,16,30,.5); backdrop-filter:blur(2px); z-index:80; animation:fade .2s ease; }
.m-drawer{
  position:fixed; top:0; right:0; bottom:0; width:84%; max-width:330px; background:var(--surface);
  z-index:81; box-shadow:-12px 0 40px rgba(16,33,47,.2); display:flex; flex-direction:column;
  animation:slidein .26s cubic-bezier(.2,.9,.3,1); 
}
@keyframes slidein{ from{ transform:translateX(100%) } to{ transform:none } }
.m-drawer-hd{ padding:16px 20px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; justify-content:space-between; }
.m-drawer a, .m-drawer button.m-navlink{
  display:flex; align-items:center; gap:14px; padding:16px 22px; font-size:16px; font-weight:600;
  color:var(--ink); border:none; background:none; width:100%; text-align:left; border-bottom:1px solid var(--line-soft);
}
.m-drawer a.active, .m-drawer button.m-navlink.active{ color:var(--blue-700); background:var(--surface-2); }
.m-drawer a .ic, .m-drawer button.m-navlink .ic{ color:var(--muted); }

/* ---------- Hero (mobile) ---------- */
.m-hero{ position:relative; background:var(--navy-900); color:#fff; overflow:hidden; padding:28px 16px 30px; }
.m-hero .tex{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.3; z-index:0; }
.m-hero::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(160deg,#001d3d 30%,rgba(0,48,95,.35)); }
.m-hero > *{ position:relative; z-index:2; }
.m-prodeals{ width:104px; height:auto; box-shadow:0 6px 18px rgba(0,0,0,.3); margin-bottom:18px; }

/* ---------- Section heads ---------- */
.m-sec{ padding:26px 16px; }
.m-sec-eyebrow{ font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:8px; }
.m-sec-title{ font-size:23px; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; line-height:1.08; color:var(--navy); }
.m-sec-title .accent{ color:var(--red); }
.m-sec-sub{ color:var(--muted); font-size:14px; margin-top:8px; line-height:1.5; }

/* ---------- Cards ---------- */
.m-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.m-card-pad{ padding:18px; }

/* ---------- Carousel (tiers) ---------- */
.m-carousel{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 16px 14px; -webkit-overflow-scrolling:touch; }
.m-carousel::-webkit-scrollbar{ height:0; }
.m-carousel > *{ scroll-snap-align:start; flex:none; width:78%; }
.m-dots{ display:flex; gap:6px; justify-content:center; padding:2px 0 4px; }
.m-dot{ width:7px; height:7px; border-radius:50%; background:var(--line); }
.m-dot.on{ background:var(--blue); width:20px; border-radius:4px; }

/* ---------- Full-screen modal (mobile) ---------- */
.m-modal{ position:fixed; inset:0; z-index:90; background:var(--surface); display:flex; flex-direction:column; animation:mslideup .3s cubic-bezier(.2,.9,.3,1); }
@keyframes mslideup{ from{ transform:translateY(100%) } to{ transform:none } }
.m-modal-hd{ flex:none; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line-soft); background:var(--surface); }
.m-modal-body{ flex:1; overflow-y:auto; }

/* ---------- Bottom sheet (filters) ---------- */
.m-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:90; background:var(--surface); border-radius:20px 20px 0 0; box-shadow:0 -12px 40px rgba(16,33,47,.25); animation:msheet .28s cubic-bezier(.2,.9,.3,1); max-height:80%; display:flex; flex-direction:column; }
@keyframes msheet{ from{ transform:translateY(100%) } to{ transform:none } }
.m-sheet-grip{ width:40px; height:4px; border-radius:3px; background:var(--line); margin:10px auto 4px; }

/* ---------- Sticky CTA bar ---------- */
.m-cta-bar{ position:sticky; bottom:0; background:var(--surface); border-top:1px solid var(--line); padding:12px 16px; z-index:5; }

/* ---------- Misc mobile helpers ---------- */
.m-statpill{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.m-row-card{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px; display:flex; align-items:center; gap:12px; }
.m-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.btn-touch{ min-height:48px; }