/* Shared phone UI: applies equally in a browser and in the Android container. */
@media (max-width: 767px) {
  .buyer-body .menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .buyer-body .menu-grid > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    min-width: 0;
    padding: 8px 2px;
    line-height: 1.45;
    overflow-wrap: break-word;
  }
  .buyer-body .menu-grid > a > i { flex: 0 0 auto; margin: 0 auto; }
  .buyer-body .home-search { min-width: 0; }
  .buyer-body .home-search .hs-ico { flex: 0 0 auto; }
  .buyer-body .home-search .hs-ph { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .buyer-body .product-info-right { min-width: 0; }
  /* A 100% flex item plus a left margin used to exceed the viewport. */
  .buyer-body .detail-option-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px 10px; }
  .buyer-body .detail-option-row > :not(.option-label) { min-width: 0; }
  .buyer-body .detail-option-row > small { grid-column: 2; margin: 0; overflow-wrap: anywhere; }
  .buyer-body .detail-qty { flex-wrap: wrap; gap: 8px; }
  .buyer-body .detail-qty small { flex: 0 1 auto; margin: 0; }
  .buyer-body .product-info-right-title {
    max-width: 100%;
    font-size: 18px !important;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .buyer-body .detail-content-card { overflow-wrap: anywhere; }
  .buyer-body .detail-content-card img { max-width: 100%; height: auto; }
  .buyer-body .detail-page .detail-actions { gap: 8px; }
  .buyer-body .detail-page .detail-actions > .btn-plain,
  .buyer-body .detail-page .detail-actions > .btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    padding: 10px 6px;
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
  }
  .buyer-body .detail-page .detail-actions > .btn-plain > i { flex: 0 0 auto; }
  .buyer-body .support-page {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    max-width: 480px;
    margin: 0 auto;
    overflow: hidden;
    background: #f5f6f8;
  }
  .buyer-body .support-page > .topbar { flex: 0 0 auto; }
  .buyer-body .support-page .support-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .buyer-body .support-page .chat-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .buyer-body .support-page .cs-online { flex: 0 0 auto; }
  .buyer-body .support-page .chat-quick { flex: 0 0 auto; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  .buyer-body .support-page .chat-quick > span { flex: 0 0 auto; white-space: nowrap; }
  .buyer-body .support-page .chat-input { position: static; flex: 0 0 auto; align-items: center; gap: 8px; }
  .buyer-body .support-page .chat-input input { min-width: 0; width: 0; font-size: 16px; }
  .buyer-body .support-page .chat-input button { flex: 0 0 auto; min-height: 42px; }
}

/* Shared touch forms and overlays. Desktop layouts are intentionally unchanged. */
@media (max-width: 767px) {
  :is(.buyer-body,.seller-body) .kv { min-width: 0; gap: 12px; }
  :is(.buyer-body,.seller-body) .kv > span:first-child { min-width: 0; flex: 0 1 42%; overflow-wrap: anywhere; }
  :is(.buyer-body,.seller-body) .kv > span:last-child { min-width: 0; overflow-wrap: anywhere; }
  :is(.buyer-body,.seller-body) .kv:has(> input, > select, > textarea) { flex-wrap: wrap; align-items: flex-start; gap: 7px; }
  :is(.buyer-body,.seller-body) .kv:has(> input, > select, > textarea) > span:first-child { flex: 1 0 100%; font-size: 13px; }
  :is(.buyer-body,.seller-body) .kv > :is(input:not([type=checkbox]),select,textarea) { width: 100% !important; max-width: 100%; min-height: 44px; font-size: 16px; box-sizing: border-box; }
  :is(.buyer-body,.seller-body) .kv > textarea { min-height: 100px; }
  :is(.buyer-body,.seller-body) .modal-mask { padding: 16px 12px; overflow-y: auto; }
  :is(.buyer-body,.seller-body) .modal-box { max-width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; box-sizing: border-box; }
  :is(.buyer-body,.seller-body) .modal-box h3 { overflow-wrap: anywhere; }
  :is(.buyer-body,.seller-body) .topbar { gap: 10px; }
  :is(.buyer-body,.seller-body) .topbar h1 { min-width: 0; line-height: 1.4; }
  :is(.buyer-body,.seller-body) .chat-input { align-items: center; gap: 8px; }
  :is(.buyer-body,.seller-body) .chat-input input { min-width: 0; width: 0; font-size: 16px; }
  :is(.buyer-body,.seller-body) .chat-input button { flex: 0 0 auto; min-height: 42px; white-space: nowrap; }
  :is(.buyer-body,.seller-body) .page:has(.modal-mask,.add-mask) > .lang-switch,
  .seller-body .seller-main:has(.modal-mask,.add-mask) > .lang-switch { visibility: hidden; }
  .buyer-body .rating-picker { display: flex; flex-wrap: wrap; gap: 4px; }
  .buyer-body .rating-picker .btn-mini { min-width: 36px; min-height: 40px; padding: 6px; }
  .buyer-body .kv:has(> .rating-picker) { display: block; }
  .buyer-body .rating-picker { justify-content: space-between; margin-top: 10px; }
  :is(.buyer-body,.seller-body) .stat-grid { width: 100%; min-width: 0; grid-template-columns: repeat(3,minmax(0,1fr)); }
  :is(.buyer-body,.seller-body) .stat-grid > div { min-width: 0; }
  :is(.buyer-body,.seller-body) .stat-grid .num { font-size: clamp(14px,4vw,20px); line-height: 1.4; overflow-wrap: anywhere; }
  :is(.buyer-body,.seller-body) .stat-grid .lab { overflow-wrap: anywhere; line-height: 1.5; }
}