/**
 * Product detail (*1.html) — tablet & mobile overrides
 * Shared header/footer/nav/breadcrumb: responsive-tablet/mobile.css
 */

/* ==========================================================================
   Tablet (768px – 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) and (min-width: 768px) {
  #czYgEgX,
  #document > .auto-margin > .czYgEgX,
  #cNkHR2u,
  #document > .auto-margin > .cNkHR2u,
  #chAGnBB,
  #cZeuJ1o,
  #cl6svR7 {
    padding-left: 3% !important;
    padding-right: 3% !important;
    box-sizing: border-box;
  }

  #c7diaAn,
  .c7diaAnCrumbsData {
    width: 100% !important;
    text-align: left !important;
    overflow: visible !important;
  }

  #c7diaAn .CrumbsBox {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    white-space: normal !important;
  }

  .CrumbsBox .c7diaAnFont,
  .CrumbsBox .currentPosFont {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  #cjh8kGu > .tabListParent .equalWidthTab .tabBtn,
  #cjh8kGu > .tabListParent .average-tab .tabBtn {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  #cjh8kGu > .tabListParent .tabList .tabBtn .btnTxt {
    font-size: 1.4rem !important;
    padding-top: 1.4rem !important;
    padding-bottom: 1.4rem !important;
  }

  /* Gallery | info stay side-by-side on tablet */
  .row_line .cvovshzrow_col,
  .row_line .cEeDaCXrow_col {
    width: 50% !important;
    box-sizing: border-box;
  }

  #cvovshz,
  #cEeDaCX {
    padding-left: 1% !important;
    padding-right: 1% !important;
  }

  .cgM45TOA,
  .cgM45TOA .pagepointA {
    font-size: 2.4rem !important;
  }

  .cv49vDEA,
  .cv49vDEA .pagepointA {
    font-size: 1.6rem !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .cCUIhP5A,
  .ci2grHUA,
  .cEaWmSWA,
  .cOR4HdOA,
  .cMgHaNZA,
  .ca1RCVqA,
  .cgxwfmOA {
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: 2.4rem !important;
  }

  .cnUz5K1A {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #czlvA0O .czlvA0OLi,
  #cmHck6y .cmHck6yLi {
    width: calc(100% / 2 - 0.1px) !important;
  }

  #cdpi4Rn .cdpi4RnLi,
  #cD1AjYW .cD1AjYWLi {
    width: calc(100% / 2 - 0.1px) !important;
  }

  #czlvA0O,
  #cdpi4Rn,
  #cmHck6y,
  #cD1AjYW {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Related products slider → wrap grid on tablet too */
  #cmHck6y .bx-wrapper {
    max-width: 100% !important;
  }

  #cmHck6y .bx-viewport {
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
  }

  #cmHck6y ul.bxslider,
  #cmHck6y ul.proList,
  #cmHck6y .listBxSlider {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    left: 0 !important;
    transform: none !important;
  }

  #cmHck6y .bx-clone {
    display: none !important;
  }

  #cmHck6y .cmHck6yLi,
  #cmHck6y li.listBox {
    width: 50% !important;
    max-width: 50% !important;
    float: none !important;
  }

  #cmHck6y .bx-controls,
  #cmHck6y .bx-controls-direction {
    display: none !important;
  }

  /* Form: half-width fields → full width on tablet */
  #ckE8FtG {
    margin: 3rem 0 !important;
  }

  #ckE8FtG .ckE8FtGcL,
  .ckE8FtGcL {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #c0Xj9z9,
  .c0Xj9z9A {
    max-width: 100% !important;
    width: 100% !important;
  }

  .custom_carousel .tools li {
    width: 64px !important;
    height: 48px !important;
  }
}

/* ==========================================================================
   Mobile (≤767px)
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* ---- Outer shells: kill 10–15% / calc paddings ---- */
  #czYgEgX,
  #document > .auto-margin > .czYgEgX,
  #cNkHR2u,
  #document > .auto-margin > .cNkHR2u {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* ---- Breadcrumb：允许换行，完整显示 ---- */
  #c7diaAn,
  .c7diaAnCrumbsData {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0.8rem 3% !important;
    text-align: left !important;
    box-sizing: border-box;
    overflow: visible !important;
  }

  #c7diaAn .CrumbsBox {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    gap: 0.2rem;
  }

  .c7diaAnFont,
  .c7diaAnFont a,
  #c7diaAn .currentPosFont,
  #c7diaAn .currentPosFont a {
    font-size: 1.3rem !important;
    white-space: normal !important;
    max-width: 100% !important;
    word-break: break-word !important;
  }

  #c7diaAn .CrumbsBox .currentPosFont,
  #c7diaAn .CrumbsBox .c7diaAnFont {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0.4rem !important;
    overflow: visible !important;
  }

  /* ---- Category tabs → chips ---- */
  #cNkHR2u {
    padding: 1.6rem 0 0.4rem !important;
    overflow: hidden;
  }

  #cjh8kGu {
    margin: 0 !important;
  }

  #cjh8kGu.leftTabbox,
  #cjh8kGu.customTabBox,
  #cjh8kGu .tabListParent {
    display: block !important;
    width: 100% !important;
  }

  #cjh8kGu > .tabListParent .tabList,
  #cjh8kGu > .tabListParent .tabLeftList,
  #cjh8kGu > .tabListParent .equalWidthTab {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 0.8rem;
    padding: 0 3% 1.2rem !important;
    box-sizing: border-box;
  }

  #cjh8kGu > .tabListParent .equalWidthTab .tabBtn,
  #cjh8kGu > .tabListParent .average-tab .tabBtn,
  #cjh8kGu > .tabListParent .tabLeftList .tabBtn,
  #cjh8kGu > .tabListParent .tabList .tabBtn {
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    background: #fff !important;
    border: 1px solid #003879 !important;
    border-radius: 999px !important;
    box-sizing: border-box;
  }

  #cjh8kGu > .tabListParent .tabList .tabBtn .btn,
  #cjh8kGu > .tabListParent .tabList .tabBtn .tabLinkBtn {
    display: block !important;
    padding: 0 !important;
  }

  #cjh8kGu > .tabListParent .tabList .tabBtn .btnTxt {
    display: block !important;
    font-size: 1.3rem !important;
    color: #003879 !important;
    padding: 0.7rem 1.2rem !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
  }

  #cjh8kGu > .tabListParent .tabList .selected {
    background: #003879 !important;
    border-color: #003879 !important;
  }

  #cjh8kGu > .tabListParent .tabList .selected .btnTxt {
    color: #fff !important;
  }

  #cjh8kGu .tabLeftBody,
  #cjh8kGu .tabCon,
  #cjh8kGu.customTabBox .tabLeftBody .tabCon .boxCont {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 3% !important;
    box-sizing: border-box;
  }

  /* ---- Gallery + product info stack ---- */
  #chAGnBB,
  #cZeuJ1o {
    padding: 0 3% !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  .row_line .cvovshzrow_col,
  .row_line .cEeDaCXrow_col,
  #cvovshz,
  #cEeDaCX {
    width: 100% !important;
    float: none !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 0 1.6rem 0 !important;
    box-sizing: border-box;
  }

  .custom_carousel,
  .zoomSliderBox,
  .zoomSlider,
  .goodsDetail,
  .detailCon,
  #cvovshz .ImghidCont,
  #cvovshz .Imgbox,
  #cvovshz img {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #cvovshz .Imgbox img,
  .custom_carousel img,
  .zoomSliderBox img {
    height: auto !important;
    display: block !important;
  }

  .view,
  .action_wrapper,
  .custom_carousel .viewport {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Carousel thumbs + arrows */
  .custom_carousel .tools {
    padding: 6px !important;
    width: 100% !important;
    box-sizing: border-box;
    overflow: hidden;
  }

  .custom_carousel .tools ul {
    gap: 6px !important;
  }

  .custom_carousel .tools li {
    width: 52px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
  }

  .custom_carousel .action_wrapper .action {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 22px !important;
  }

  /* Product title + contacts on white canvas */
  .cgM45TOA,
  .cgM45TOA .pagepointA,
  .cgM45TOA .textLineP {
    font-size: 2.2rem !important;
    line-height: 1.35 !important;
    margin: 0 0 1rem 0 !important;
    color: #333 !important;
  }

  .cv49vDEA,
  .cv49vDEA .pagepointA {
    font-size: 1.5rem !important;
    margin: 1rem 0 1.6rem 0 !important;
    color: #666 !important;
  }

  .cwl9tUjA,
  .cbRXvk6A,
  .cpZIeEgA {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 0 0.8rem 0 !important;
    font-size: 1.5rem !important;
    box-sizing: border-box;
    color: #333 !important;
  }

  .cwl9tUjTextBox,
  .cbRXvk6TextBox,
  .cpZIeEgTextBox {
    padding: 1rem 1.2rem !important;
  }

  .cwl9tUjTe,
  .cbRXvk6Te,
  .cpZIeEgTe,
  .cwl9tUjTe .btnText,
  .cbRXvk6Te .btnText,
  .cpZIeEgTe .btnText,
  .cwl9tUjA .pagepointA,
  .cbRXvk6A .pagepointA,
  .cpZIeEgA .pagepointA {
    white-space: normal !important;
    max-width: 100% !important;
    word-break: break-word !important;
    color: #333 !important;
  }

  /* ---- Section title bars ---- */
  .cCUIhP5A,
  .ci2grHUA,
  .cEaWmSWA,
  .cOR4HdOA,
  .cMgHaNZA,
  .ca1RCVqA,
  .cgxwfmOA {
    margin: 2rem 0 1rem 0 !important;
    padding: 0.6rem 3% !important;
    font-size: 2rem !important;
    line-height: 1.4 !important;
    box-sizing: border-box;
  }

  .cnUz5K1A,
  .enlarge_detailed_info {
    margin: 1rem 0 2rem 0 !important;
    padding: 0 3% !important;
    font-size: 1.45rem !important;
    line-height: 1.7 !important;
    box-sizing: border-box;
    overflow-x: auto;
  }

  .enlarge_detailed_info img,
  .cnUz5K1A img,
  .detailConImg {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 1rem auto !important;
  }

  .enlarge_detailed_info table {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ---- FAQ rows: kill asymmetric calc paddings ---- */
  #cl6svR7 {
    padding: 0 3% 2rem !important;
    box-sizing: border-box;
  }

  #c67jrpu,
  #c1lS4Fy,
  #cI7stFi,
  #cXdoiFZ,
  #curH5gD,
  #cV7KIF6,
  .c67jrpu,
  .c1lS4Fy,
  .cI7stFi,
  .cXdoiFZ,
  .curH5gD,
  .cV7KIF6 {
    margin: 0 0 1.2rem 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  #cl6svR7 .row_line {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    margin: 0 0 1.2rem 0 !important;
  }

  #cl6svR7 .row_line > .rowcol:first-child {
    width: 40px !important;
    flex: 0 0 40px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #cl6svR7 .row_line > .rowcol:last-child {
    width: auto !important;
    flex: 1 1 auto !important;
    padding: 0 0 0 0.8rem !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  #cl6svR7 .btn3,
  #cl6svR7 .btnIcon {
    margin: 0 !important;
  }

  .cfjItuPA,
  .cfjItuPA .pagepointA,
  .cNk2GlHA,
  .cNk2GlHA .pagepointA {
    font-size: 1.5rem !important;
    line-height: 1.55 !important;
  }

  /* ---- Image / video / factory grids ---- */
  #czlvA0O,
  #cdpi4Rn,
  #cD1AjYW {
    margin: 1.2rem 0 !important;
    padding: 0 2% !important;
    box-sizing: border-box;
  }

  /* Testimonials：手机端 2 列（勿强制 width:100%，否则会盖掉 slidesPerView） */
  #czlvA0O,
  #czlvA0O .swiperMulticolumnBox,
  #czlvA0O .swiper-container,
  .swiperMulticolumnBoxczlvA0O {
    width: 100% !important;
    overflow: hidden !important;
  }

  #czlvA0O .czlvA0OLi,
  #czlvA0O .swiper-slide {
    max-width: 100% !important;
    margin-bottom: 0 !important;
    box-sizing: border-box;
  }

  #czlvA0O .czlvA0OLi .listBoxHref {
    margin: 0 0.3rem !important;
  }

  #cdpi4Rn .cdpi4RnLi,
  #cD1AjYW .cD1AjYWLi {
    width: 50% !important;
    margin-bottom: 1.2rem !important;
    box-sizing: border-box;
  }

  #cdpi4Rn .cdpi4RnLi .listBoxHref,
  #cD1AjYW .cD1AjYWLi .listBoxHref {
    margin: 0 0.4rem !important;
  }

  #czlvA0O .Imgbox {
    padding-top: 60% !important;
  }

  #cdpi4Rn .Imgbox,
  #cD1AjYW .Imgbox {
    padding-top: 75% !important;
  }

  #czlvA0O .slidesPerViewBtn,
  #cdpi4Rn .slidesPerViewBtn {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    margin-top: -18px !important;
  }

  /*
   * Related products (#cmHck6y) uses bxSlider: ul is thousands of px wide,
   * viewport height locks to one slide, and bx-clone duplicates fill the list.
   * Collapse to a real 2-col grid on mobile.
   */
  #cmHck6y,
  #cmHck6y.scrollListPro {
    margin: 1.2rem 0 !important;
    padding: 0 2% !important;
    overflow: hidden !important;
    box-sizing: border-box;
  }

  #cmHck6y .bx-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  #cmHck6y .bx-viewport {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  #cmHck6y ul.bxslider,
  #cmHck6y ul.proList,
  #cmHck6y .listBxSlider {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
  }

  #cmHck6y .bx-clone {
    display: none !important;
  }

  #cmHck6y .cmHck6yLi,
  #cmHck6y li.listBox {
    width: 50% !important;
    max-width: 50% !important;
    float: none !important;
    position: relative !important;
    left: auto !important;
    margin: 0 0 1.2rem 0 !important;
    box-sizing: border-box;
  }

  #cmHck6y .cmHck6yLi .listBoxHref {
    margin: 0 0.4rem !important;
    display: block !important;
  }

  #cmHck6y .Imgbox {
    padding-top: 75% !important;
  }

  #cmHck6y .bx-controls,
  #cmHck6y .bx-controls-direction,
  #cmHck6y .slidesPerViewBtn,
  #cmHck6y .swiper-button-prev,
  #cmHck6y .swiper-button-next {
    display: none !important;
  }

  /* Spec tables: allow horizontal swipe when columns are dense */
  .tableParentAuto,
  .enlarge_detailed_info .tableParentAuto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }

  /* ---- Inquire form: full-width fields ---- */
  #ckE8FtG {
    margin: 1.6rem 3% !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #ckE8FtG .inquiryFormBox,
  #ckE8FtG .epc_row_1,
  #ckE8FtG .fIn,
  #ckE8FtG .fRi,
  #ckE8FtG .ckE8FtGcL,
  .ckE8FtGcL {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  #ckE8FtG .fRi > input,
  #ckE8FtG .fRi > textarea,
  #ckE8FtG .fRi .form_Select,
  #ckE8FtG .fRi .select-input input,
  .ckE8FtGcL .fRi > input,
  .ckE8FtGcL .fRi > textarea {
    border-radius: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #ckE8FtG .fRi > input,
  #ckE8FtG .fRi .form_Select,
  #ckE8FtG .fRi .select-input input,
  .ckE8FtGcL .fRi > input,
  .ckE8FtGcL .fRi .form_Select,
  .ckE8FtGcL .fRi .select-input input {
    height: 48px !important;
  }

  #c0Xj9z9,
  .c0Xj9z9A,
  #ckE8FtG .formBtnButton {
    max-width: 100% !important;
    width: 100% !important;
    margin: 1rem 0 0 0 !important;
    box-sizing: border-box;
  }

  .c0Xj9z9TextBox {
    padding: 1.2rem 1.6rem !important;
  }
}