/* ==========================================================================
   chinaevexport.net — WAP business styles
   Mobile experience layer on top of the existing app.css breakpoints.
   Every rule is scoped to @media(max-width:768px) — desktop is untouched.
   Consumes tokens from wap/tokens.css via var(), never hardcodes values.

   !important is used ONLY where the target value is set either as an inline
   style="" attribute on the element (about/contact/cross/howto/blog/
   used_evs/market's .hero-in), or inside a page-local <style> block that is
   emitted in the document body AFTER this stylesheet's <link> (home_full.php's
   .blk/.statement/.form .fg/.stats/.logowall/.mk) — in both cases normal-
   specificity rules here cannot reliably win the cascade.
   ========================================================================== */
@media(max-width:768px){

  /* ---------- nav: backdrop + larger tap targets on top of app.css's
     existing slide-down panel (app.css:565 @media(max-width:720px)) ---------- */
  body.nav-open::after{
    content:"";position:fixed;inset:0;z-index:49;
    background:rgba(8,20,30,.42);backdrop-filter:blur(2px);
  }
  .nav{z-index:51}
  .nav-toggle{min-width:var(--wap-tap-min);min-height:var(--wap-tap-min)}
  .nav>a,.has-drop>a{min-height:var(--wap-tap-min);display:flex;align-items:center}

  /* ---------- sticky bottom CTA bar ---------- */
  .wap-stickybar{
    position:fixed;left:0;right:0;bottom:0;z-index:55;
    display:flex;gap:10px;padding:10px var(--wap-gutter);
    padding-bottom:calc(10px + var(--wap-safe-b));
    background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(14px);
    border-top:1px solid var(--border);box-shadow:0 -8px 24px -12px rgba(15,23,42,.18);
  }
  .wap-stickybar .btn{flex:1;justify-content:center;min-height:var(--wap-tap-min);font-size:14.5px}
  /* content must clear the fixed bar so nothing sits underneath it */
  body{padding-bottom:calc(var(--wap-stickybar-h) + var(--wap-safe-b))}
  /* the stickybar replaces the floating round WA button on mobile */
  .wa-float{display:none}

  /* ---------- touch targets ---------- */
  .btn{min-height:var(--wap-tap-min)}
  input,select,textarea,.btn{border-radius:12px}

  /* ---------- hero sections: about/contact/cross/howto/blog/used_evs/market
     all render <div class="hero-in" style="padding:...">; inline styles beat
     any non-!important external rule, so every page keeps its own desktop
     padding (up to 78px top) on mobile unless forced here. Unify to one
     tight mobile rhythm across all of them. ---------- */
  .hero-in{padding:34px 0 28px!important}
  .hero .eyebrow{margin-bottom:8px}
  .hero h1{line-height:1.18}

  /* ---------- spec / compare tables: force single-column stacked cards
     a bit earlier than app.css's own 700/820px breakpoints, and tighten
     the rhythm between rows ---------- */
  .specgrid,.xgrid,.vp,.steps,.spec{grid-template-columns:1fr!important;gap:10px}
  .specgrid>*,.xgrid>*{border-bottom:1px solid var(--border);padding-bottom:10px}
  .c2-adv-grid{grid-template-columns:1fr!important}
  .dtrust{grid-template-columns:1fr!important}

  /* ---------- plain data tables with no scroll wrapper of their own:
     .tbl-scroll is added around the 2 tables that genuinely risk column
     squeeze (market.php best-value table, compare.php spec table) —
     mirrors the existing .mkt-tblwrap/.c2-cmp-scroll pattern already used
     elsewhere on the site. ---------- */
  .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
    margin:0 calc(var(--wap-gutter) * -1);padding:0 var(--wap-gutter)}
  .tbl-scroll .tbl{min-width:600px}

  /* ---------- typography rhythm ---------- */
  h1{font-size:clamp(24px,7vw,30px)}
  h2{font-size:clamp(20px,6vw,25px)}
  .sec,.sec-lg{padding:40px 0}
  .wrap{padding:0 var(--wap-gutter)}

  /* ---------- forms ---------- */
  input,select,textarea{padding:13px 14px}
  label{display:block;margin-bottom:6px;font-size:14px}

  /* ---------- home_full.php: its visual system lives in a page-local
     <style> block, not app.css, and is emitted after this stylesheet's
     <link> — override with !important or these rules silently lose. ---------- */
  .blk{padding:44px 0!important}
  .statement{padding:52px 0!important}
  .form .fg{grid-template-columns:1fr!important;gap:14px!important}
  .stats{gap:22px!important;row-gap:16px!important}
  .st-proof{gap:10px!important}
  .logowall{grid-template-columns:repeat(3,1fr)!important;gap:14px!important}
  .mk{grid-template-columns:1fr!important}
}

@media(max-width:380px){
  .wap-stickybar .btn{font-size:13px;padding:11px 10px}
  .logowall{grid-template-columns:repeat(2,1fr)!important}
}