/* ─────────────────────────────────────────────────────────────────────
   Zuma mobile chrome — header, drawer, bottom nav, home sections.
   Everything is scoped to <=860px so the desktop layout is untouched.
   Served as a separate file so desktop never parses it.
   ───────────────────────────────────────────────────────────────────── */
.zm-head,.zm-bottom,.zm-drawer,.zm-scrim{display:none}

@media (max-width:860px){

/* Hide the desktop chrome on phones.
   The footer goes too: every link in it is already in the drawer or the
   bottom nav, and on a phone it is 600px of scrolling that repeats the
   navigation the user just passed. Its content also duplicates the market
   list, which the /markets page owns.
   #back-top is removed because it sits exactly where the bottom nav is. */
.country-bar,.site-header,.mobile-nav,.site-footer,#back-top{display:none!important}
.page-body{padding-top:var(--zm-head,60px)!important}
body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}

/* ── Header ────────────────────────────────────────────────────────── */
.zm-head{display:flex;position:fixed;top:0;left:0;right:0;z-index:1000;height:60px;
  align-items:center;justify-content:space-between;gap:12px;
  padding:0 14px;padding-top:env(safe-area-inset-top);
  background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.zm-logo{display:flex;align-items:center;gap:9px;min-width:0}
.zm-logo img{width:34px;height:34px;border-radius:9px;flex-shrink:0}
.zm-logo span{font-weight:800;letter-spacing:.1em;font-size:1.05rem;color:var(--ink)}
.zm-head-right{display:flex;align-items:center;gap:4px}
.zm-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;color:var(--ink);cursor:pointer;border-radius:12px}
.zm-icon:active{background:var(--bg)}

/* ── Drawer ────────────────────────────────────────────────────────── */
.zm-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1200;
  opacity:0;transition:opacity .25s}
.zm-scrim.on{opacity:1}
.zm-scrim[hidden]{display:none!important}
.zm-drawer{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;
  width:min(87vw,340px);z-index:1201;background:#fff;box-shadow:-8px 0 40px rgba(0,0,0,.24);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  padding-top:env(safe-area-inset-top)}
.zm-drawer.on{transform:translateX(0)}
.zm-drawer[hidden]{display:none!important}
.zm-drawer-head{display:flex;align-items:center;gap:11px;padding:16px 16px 14px;border-bottom:1px solid var(--line)}
.zm-drawer-head img{width:42px;height:42px;border-radius:11px}
.zm-drawer-head strong{display:block;font-size:1rem;letter-spacing:.08em}
.zm-drawer-head small{display:block;font-size:.72rem;color:var(--ink-3)}
.zm-close{margin-left:auto;background:none;border:0;font-size:1.9rem;line-height:1;
  color:var(--ink-3);cursor:pointer;width:44px;height:44px}
.zm-drawer-body{flex:1;overflow-y:auto;padding:14px 12px calc(24px + env(safe-area-inset-bottom));
  overscroll-behavior:contain}
.zm-auth{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:18px}
.zm-btn{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:12px;
  font-weight:700;font-size:.92rem}
.zm-btn-primary{background:var(--primary);color:#fff}
.zm-btn-ghost{background:var(--primary-light);color:var(--primary-dark)}
.zm-d-primary{display:flex;align-items:center;gap:11px;padding:12px;border-radius:13px;
  background:var(--primary-light);margin-bottom:14px}
.zm-avatar{width:42px;height:42px;border-radius:50%;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0}
.zm-d-primary strong{display:block;font-size:.94rem;color:var(--ink)}
.zm-d-primary small{display:block;font-size:.76rem;color:var(--primary-dark)}
.zm-d-group{margin-top:16px}
.zm-d-group h3,.zm-social h3{font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);padding:0 10px;margin-bottom:6px;font-family:'Plus Jakarta Sans',sans-serif}
.zm-d-link{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 10px;
  border-radius:11px;font-weight:600;font-size:.94rem;color:var(--ink-2)}
.zm-d-link:active{background:var(--bg)}
.zm-social{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.zm-social-row{display:flex;gap:9px;flex-wrap:wrap;padding:0 10px}
.zm-social-row a{width:40px;height:40px;border-radius:50%;color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:.95rem}
.zm-logout{margin-top:18px;padding:0 10px}
.zm-logout button{width:100%;min-height:46px;border-radius:12px;border:1.5px solid var(--line);
  background:none;color:var(--red);font-weight:700;font-size:.92rem;cursor:pointer}
.zm-credit{text-align:center;font-size:.72rem;color:var(--ink-3);margin-top:20px}

/* ── Bottom navigation ─────────────────────────────────────────────── */
.zm-bottom{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1000;
  align-items:flex-end;justify-content:space-around;
  height:calc(64px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--primary);box-shadow:0 -3px 22px rgba(0,0,0,.16)}
.zm-b-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;height:64px;color:rgba(255,255,255,.72);font-size:.66rem;font-weight:600;min-width:0}
.zm-b-item.on{color:#fff}
.zm-b-ico{display:flex;align-items:center;justify-content:center}
.zm-b-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* Home: raised, larger and in Google green so it reads as the anchor. */
.zm-b-home{flex:0 0 auto;position:relative}
.zm-b-home .zm-b-ico{width:58px;height:58px;border-radius:50%;background:var(--green);color:#fff;
  margin-top:-24px;box-shadow:0 6px 18px rgba(52,168,83,.45);border:4px solid var(--primary)}
.zm-b-home .zm-b-ico svg{width:26px;height:26px}
.zm-b-home .zm-b-label{color:#fff;font-weight:700;margin-top:1px}
.zm-b-home.on .zm-b-ico{background:#2E9648}

/* Landscape phones: a 64px bar plus a raised button eats a 360px viewport. */
@media (orientation:landscape) and (max-height:520px){
  .zh-slide{flex-basis:56vw;min-height:150px}
  .zh-slide h3{font-size:1.1rem}
  .zm-bottom{height:calc(52px + env(safe-area-inset-bottom))}
  .zm-b-item{height:52px;font-size:.6rem}
  .zm-b-home .zm-b-ico{width:46px;height:46px;margin-top:-16px}
  .zm-b-home .zm-b-ico svg{width:21px;height:21px}
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
}

/* ── Mobile home sections ──────────────────────────────────────────── */
.zh-hero{padding-top:10px}
.zh-slider{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 14px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-behavior:smooth}
.zh-slider::-webkit-scrollbar{display:none}
/* Photo slides. The image is the background; a bottom gradient tinted with the
   module colour keeps white text readable over any photograph. */
.zh-slide{flex:0 0 86vw;scroll-snap-align:center;border-radius:18px;overflow:hidden;
  position:relative;min-height:210px;display:flex;align-items:flex-end;background:var(--bg2)}
.zh-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zh-slide::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.78) 100%)}
.zh-slide-body{position:relative;z-index:1;padding:20px;width:100%}
.zh-slide h3{font-size:1.3rem;margin:0 0 5px;color:#fff;line-height:1.2;
  text-shadow:0 1px 12px rgba(0,0,0,.5)}
.zh-slide p{font-size:.85rem;color:rgba(255,255,255,.93);margin:0 0 13px;
  text-shadow:0 1px 8px rgba(0,0,0,.5)}
.zh-cta{display:inline-flex;align-items:center;background:#fff;color:var(--ink);
  padding:10px 19px;border-radius:999px;font-weight:700;font-size:.85rem;min-height:42px}
.zh-dots{display:flex;gap:6px;justify-content:center;padding:10px 0 2px}
.zh-dots i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:width .25s,background .25s}
.zh-dots i.on{width:20px;background:var(--primary)}

.zh-sec{padding:22px 14px 6px}
.zh-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:13px}
.zh-sec-head h2{font-size:1.15rem;margin:0}
.zh-sec-head a{font-size:.82rem;font-weight:700;color:var(--primary);white-space:nowrap}

/* Three-column service grid — every module reachable in two taps. */
.zh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.zh-tile{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 6px;
  background:var(--card);border:1px solid var(--line);border-radius:15px;text-align:center;min-height:96px}
.zh-tile:active{transform:scale(.97)}
.zh-tile .zh-t-ico{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;
  justify-content:center;font-size:1.35rem;flex-shrink:0}
.zh-tile span{font-size:.7rem;font-weight:700;color:var(--ink-2);line-height:1.25}
@media (max-width:340px){.zh-grid{gap:8px}.zh-tile span{font-size:.65rem}}

.zh-vendors{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:2px 14px 14px;margin:0 -14px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  scroll-behavior:smooth}
.zh-vendors::-webkit-scrollbar{display:none}
.zh-vendor{flex:0 0 min(215px,72vw);scroll-snap-align:start;background:var(--card);
  border:1px solid var(--line);border-radius:15px;padding:15px}
.zh-v-top{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.zh-v-logo{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:1rem;flex-shrink:0}
.zh-vendor strong{display:block;font-size:.87rem;line-height:1.25}
.zh-vendor small{display:block;font-size:.72rem;color:var(--ink-3)}
.zh-vendor p{font-size:.79rem;color:var(--ink-2);margin:0 0 8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.zh-v-meta{font-size:.74rem;color:var(--ink-3);display:flex;align-items:center;gap:5px}
.zh-v-meta .zh-badge{margin-left:auto}
.zh-sec-last{padding-bottom:28px}
.zh-badge{background:#E6F4EA;color:#137333;font-size:.62rem;font-weight:800;
  padding:2px 7px;border-radius:999px;white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .zm-drawer,.zm-scrim,.zh-dots i{transition:none}
}
} /* end max-width:860px */