/* ============================================================
   Mobile / H5 layer  —  loaded after each page's inline <style>
   Covers: mobile nav drawer, touch targets, iOS input zoom,
   category tab strip, footer stacking, product sticky buy bar.
   Desktop rendering is untouched (all rules are in media queries
   or hidden by default).
   ============================================================ */

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { -webkit-tap-highlight-color: transparent; }
a, button, input, select, textarea, label { touch-action: manipulation; }

/* ---------- hamburger ---------- */
.nav-toggle {
  display: none;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.22); border-radius: 10px;
  background: rgba(255,255,255,.10); padding: 0; cursor: pointer;
}
.nav-toggle .bars,
.nav-toggle .bars::before,
.nav-toggle .bars::after {
  display: block; width: 17px; height: 2px; border-radius: 2px;
  background: #fff; transition: transform .2s, opacity .2s, top .2s;
}
.nav-toggle .bars { position: relative; }
.nav-toggle .bars::before,
.nav-toggle .bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle .bars::before { top: -6px; }
.nav-toggle .bars::after { top: 6px; }
body.mnav-open .nav-toggle .bars { background: transparent; }
body.mnav-open .nav-toggle .bars::before { top: 0; transform: rotate(45deg); }
body.mnav-open .nav-toggle .bars::after { top: 0; transform: rotate(-45deg); }

/* ---------- drawer ---------- */
.mnav-mask {
  position: fixed; inset: 0; background: rgba(16,24,40,.44);
  opacity: 0; pointer-events: none; transition: opacity .22s; z-index: 78;
}
.mnav-mask.show { opacity: 1; pointer-events: auto; }

.mnav {
  position: fixed; top: 0; left: 0; height: 100%;
  width: min(86vw, 336px); max-width: 86vw;
  background: #fff; z-index: 79;
  transform: translateX(-100%);
  transition: transform .24s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  box-shadow: 8px 0 28px rgba(16,24,40,.16);
  visibility: hidden;
}
.mnav.show { transform: translateX(0); visibility: visible; }

.mnav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.mnav-head .brand { font-weight: 700; font-size: 16px; color: var(--brand); letter-spacing: -.3px; }
.mnav-close {
  width: 36px; height: 36px; border: 0; background: #f2f4f7; border-radius: 9px;
  font-size: 19px; line-height: 1; color: var(--ink-2); cursor: pointer;
}
.mnav-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; padding: 12px 16px 22px; }

.mnav-search { position: relative; margin-bottom: 14px; }
.mnav-search input {
  width: 100%; padding: 11px 46px 11px 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #f7f8fa; outline: none;
}
.mnav-search button {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: 8px;
  background: var(--brand-2); color: #fff; font-size: 14px; cursor: pointer;
}

.mnav-group { margin-bottom: 14px; }
.mnav-group h5 {
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 4px; padding-left: 2px;
}
.mnav-group a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 10px; border-radius: 9px;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
}
.mnav-group a:active { background: #f2f4f7; }
.mnav-group a[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }
.mnav-group a .n { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }

.mnav-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.mnav-actions a {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; border-radius: 10px; font-size: 14px; font-weight: 700;
}
.mnav-actions .a-primary { background: var(--brand-2); color: #fff; }
.mnav-actions .a-ghost { background: #fff; border: 1px solid var(--line); color: var(--ink-2); }

/* ---------- stack the header on small screens ---------- */
@media (max-width: 900px) {
  .nav { gap: 12px; }
  .nav-right { margin-left: auto; gap: 10px; }
  #navUser {
    max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: inline-flex; align-items: center; min-height: 40px;
  }
  .cart-btn { min-height: 40px; display: inline-flex; align-items: center; }
  /* iOS zooms the page when a focused field is under 16px */
  input, select, textarea { font-size: 16px !important; }
  .crumb a { display: inline-block; padding: 6px 0; }
  .foot-inner a { padding: 7px 0; }
  .hero-inner > * { min-width: 0; }
  .searchbox input { min-width: 0; }
}

@media (max-width: 780px) {
  .brand-row a { display: inline-block; padding: 4px 0; }
  .flag { font-size: 11px; }
  .block-head .more { display: inline-block; padding: 6px 0; }
  .card-title { padding: 2px 0; }
}

@media (max-width: 780px) {
  .nav-toggle { display: inline-flex; order: -1; }
  .nav { padding: 9px 16px; }
  .logo img { height: 44px; }
  .benefits-inner { font-size: 12px; padding: 8px 16px; }
}

@media (max-width: 420px) {
  .nav { padding: 8px 13px; gap: 9px; }
  .logo img { height: 40px; }
  .cart-btn { padding: 7px 11px; }
  .nav-right { gap: 8px; }
}

@media (max-width: 360px) {
  #navUser { display: none; }
}

/* ---------- category tab strip ---------- */
@media (max-width: 780px) {
  .cat-tabs {
    flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    margin: 16px -20px 0;
    padding: 4px 20px 10px;
    gap: 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .cat-tabs::-webkit-scrollbar { display: none; }
  .cat-tabs a { flex: 0 0 auto; padding: 8px 14px; font-size: 13px; }
}

/* ---------- list toolbar ---------- */
@media (max-width: 720px) {
  .toolbar { gap: 10px; padding: 14px 0 12px; }
  .toolbar .spacer { display: none; }
  .toolbar input { width: 100%; order: 1; }
  .toolbar select { width: 100%; order: 2; }
  .toolbar .count { order: 0; font-size: 13px; }
  .cat-hero h1 { font-size: 26px; }
  .cat-meta .pill { display: none; }
  .grid { gap: 14px; }
  .card-body { padding: 11px 11px 12px; }
  .card-cta { padding: 10px 0; }
}

/* ---------- footer ---------- */
@media (max-width: 600px) {
  .foot-inner { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .foot-inner > div:first-child { grid-column: 1 / -1; }
  .foot-inner > div:first-child p { max-width: 46ch; }
  .foot-bottom { flex-direction: column; gap: 6px; font-size: 11.5px; }
  footer.site { padding-top: 34px; }
}

/* ---------- product sticky buy bar ---------- */
.buybar { display: none; }

@media (max-width: 780px) {
  body.has-buybar { padding-bottom: 78px; }
  .buybar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    background: #fff; border-top: 1px solid var(--line);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 18px rgba(16,24,40,.10);
  }
  .bb-info { flex: 1 1 auto; min-width: 0; }
  .bb-price { font-size: 19px; font-weight: 700; letter-spacing: -.4px; line-height: 1.2; color: var(--ink); }
  .bb-price .bb-cur { font-size: 11.5px; font-weight: 600; color: var(--ink-3); margin-left: 3px; }
  .bb-note {
    font-size: 11.5px; color: var(--ink-3); margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .bb-add {
    flex: 0 0 auto; min-width: 128px;
    background: linear-gradient(to bottom, var(--action), var(--action-dark));
    color: var(--action-ink); border: 0; border-radius: var(--radius-pill);
    padding: 13px 16px; font-size: 14.5px; font-weight: 700; font-family: inherit;
  }
  .bb-add[disabled] { background: #d8dce4; color: #8b94a3; }
  body.has-buybar .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
}

/* cart drawer: bottom padding for the home indicator, keep header clear */
@media (max-width: 780px) {
  .drawer { width: 88vw; }
  .drawer-head { padding-top: calc(18px + env(safe-area-inset-top)); }
  .drawer-foot { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* home: category + product tiles as a 2-up grid instead of one giant column */
@media (max-width: 560px) {
  section.block { padding: 30px 20px; }
  .block-head { margin-bottom: 14px; gap: 8px; }
  .block-head h2 { font-size: 19px; }
  .block-head .more { font-size: 12.5px; }

  .cat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cat-card { padding: 12px 13px; gap: 4px; }
  .cat-card .ico { font-size: 18px; }
  .cat-card .nm { font-size: 13.5px; }
  .cat-card .ct { font-size: 11.5px; }

  .prod-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card-img { height: 108px; padding: 10px; }
  .card-img img { max-height: 84px; }
  .card-body { padding: 10px 11px 12px; gap: 5px; }
  .card-title { font-size: 13px; }
  .variant-hint { font-size: 11.5px; }
  .price-range { font-size: 14.5px; }
  .fee-note { display: none; }
  .card-cta { font-size: 12.5px; padding: 8px 0; }
  .stars, .rating { font-size: 11.5px; }

  .brand-row {
    flex-wrap: nowrap; justify-content: flex-start;
    gap: 22px; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .brand-row::-webkit-scrollbar { display: none; }
  .brand-row a { flex: 0 0 auto; }
}

@media (max-width: 420px) {
  .price-range { font-size: 13.5px; }
  .price-range small { font-size: 10.5px; margin-left: 2px; }
}

/* support quick links: 2 x 2 instead of a tall stack */
@media (max-width: 520px) {
  .quick { grid-template-columns: 1fr 1fr; gap: 10px; }
  .quick a { padding: 13px 14px; }
  .quick b { font-size: 13.5px; margin-bottom: 2px; }
  .quick span { font-size: 11.5px; }
}

/* data / duration plans carry a second line of copy -> two per row */
@media (max-width: 480px) {
  .denoms.vt-data,
  .denoms.vt-period { grid-template-columns: 1fr 1fr; }
}

/* cart / account line items: give the title the full width on phones */
@media (max-width: 480px) {
  .panel-pad { padding: 16px; }
  .line { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; }
  .line .thumb { width: 64px; height: 64px; grid-row: span 2; }
  .line .thumb img { max-width: 56px; max-height: 56px; }
  .line .right {
    grid-column: 2; flex-direction: row; align-items: center;
    justify-content: space-between; width: 100%;
  }
  .line .right .remove { padding: 6px 0; }
  .line .qty { height: 42px; }
  .line .qty button { width: 40px; }
  .confirm { padding: 26px 16px; }
  .orderbox { padding: 12px; }
}

/* ---------- misc ---------- */
@media (max-width: 420px) {
  .wrap { padding: 20px 16px 18px; }
  main { padding-left: 16px !important; padding-right: 16px !important; }
  .cat-tabs { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .page-head h1 { font-size: 24px; }
}

/* ---------- 下单成功页的四个胶囊：小屏两列，副文案截断 ---------- */
@media (max-width: 640px) {
  .done-acts { gap: 8px; }
  .done-btn {
    min-width: 0;
    flex: 1 1 calc(50% - 4px);
    padding: 8px 10px;
    gap: 8px;
  }
  .done-btn .di { width: 26px; height: 26px; }
  .done-btn .dt b { font-size: 12.5px; }
  .done-btn .dt small {
    font-size: 10.5px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}