/* ============================================================
   CPF responsive layer (phones / small tablets)
   brand.css already rescales down to 1023px but the page shell
   keeps fixed columns below that. These rules reflow the shell.
   Loaded from header.htm AFTER brand.css so it always wins.
   ============================================================ */

@media screen and (max-width: 900px) {
  /* --- shell -------------------------------------------------- */
  .m,
  .g-row,
  .mainbox,
  .navh,
  .head_m,
  .m-footer .footer {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box;
  }
  .m0 { min-width: 0 !important; }
  .m1l, .m2l, .m3l, .m1r, .m2r, .m3r,
  .m_l, .m_r, .m_l_1, .m_r_1 {
    width: auto !important;
    float: none !important;
    margin-right: 0 !important;
  }

  /* left category tree is unusable on a phone: hide, keep nav link */
  .siderMenu,
  .box260,
  .login_sider { display: none !important; }
  .box920r,
  .banner { width: 100% !important; margin-left: 0 !important; }

  /* --- top bar: keep only useful links ------------------------ */
  #m-topnav { height: auto; line-height: 30px; }
  #m-topnav .tnr { display: flex; flex-wrap: wrap; gap: 0 14px; float: none; }
  #m-topnav dd.h_city,
  #m-topnav dd.h_qrcode,
  #m-topnav dd.h_fav,
  #m-topnav dd.traderoom { display: none !important; }
  #m-topnav .cpf-tn { float: none; }

  /* --- header: logo row, search row --------------------------- */
  #header .bgfff {
    padding: 14px 0 12px;
    flex-wrap: wrap;
    align-items: center;
  }
  #header .logo {
    width: auto !important;
    flex: 1 1 auto;
  }
  #header .logo img { height: 30px; }
  #header .btnLink { display: none !important; }
  #header .m-search {
    order: 9;
    flex: 1 1 100%;
    width: 100%;
    margin: 12px 0 0 !important;
  }
  #search, #destoon_search { height: 42px; }
  #search .header_search { flex: 0 0 96px; height: 42px; }
  #search .text { height: 42px; line-height: 42px; padding-left: 108px; font-size: 14px; }
  #search .button { height: 42px; flex: 0 0 84px; width: 84px; font-size: 13px; }

  /* --- main nav: horizontal scroll instead of wrapping -------- */
  .m-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .m-nav .navh {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .m-nav .navh dt,
  .m-nav .navh dd { flex: 0 0 auto; float: none; }
  .m-nav .navh dd a { white-space: nowrap; padding: 0 12px; }

  /* --- content ------------------------------------------------ */
  img, video, iframe { max-width: 100% !important; }
  .content.c_b img,
  .cpf-rg-guides img { height: auto !important; }
  .content.c_b,
  .content.c_b p,
  .content.c_b li {
    font-size: 15px;
    line-height: 1.65;
    word-break: break-word;
  }
  table { max-width: 100%; }
  .cpf-spec-table,
  .tf { width: 100% !important; }
  .cpf-spec-table td { padding: 8px 10px; font-size: 13.5px; }
  .cpf-spec .title_trade { font-size: 20px; line-height: 1.32; }

  /* product gallery / ads keep their aspect ratio */
  .cpf-gallery-frame,
  #mid_div { width: 100% !important; height: auto !important; }
  .cpf-gallery-frame img#mid_pic { width: 100% !important; height: auto !important; }
  .cpf-gallery #thumbs,
  #thumbs { width: 100% !important; }
  #zoomer { display: none !important; }

  /* --- footer: stack ----------------------------------------- */
  .m-footer .footer { display: block; }
  .m-footer .foo_left { float: none !important; width: auto !important; margin-bottom: 16px; }
  .m-footer .footer > ul { display: flex; flex-wrap: wrap; gap: 18px 24px; }
  .m-footer .footer > ul > li { flex: 1 1 45%; }
  .footLinks { display: none; }
  .m-footer .foot { text-align: center; }
  .tool-menu { display: none; }
}

@media screen and (max-width: 560px) {
  .m, .g-row, .mainbox, .navh, .head_m, .m-footer .footer {
    padding-left: 11px !important;
    padding-right: 11px !important;
  }
  #m-topnav .tnr { font-size: 11.5px; }
  .cpf-spec .title_trade { font-size: 18px; }
  .cpf-cta { padding: 14px; }
  .cpf-cta-title { font-size: 15px; }
  .m-footer .footer > ul > li { flex: 1 1 100%; }
  .floor_sec_r ul { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}