/* JP 2_2_1 temperature tape BS5 v2
   Purpose: make JP B-zone desktop/mobile geometry follow the user-approved Chinese BS5 standard page,
   while preserving the JP B-zone DOM, text, hrefs, img src and all already-frozen shell/mobile behaviors.
   Load AFTER jp_2_2_1_temperature_tape_bs5_v1.css. */

/* --------------------------------------------------------------------------
   B2-1 product guide row: match Chinese standard
   - desktop: content-width buttons, 150px gaps, group begins 50px from row edge
   - mobile: full-width stacked buttons, centered
   -------------------------------------------------------------------------- */
@media (min-width:768px){
  body.jp-bs5-2-2-1-temperature-tape-page > a[name="a1"] + .container > .col-xs-12.col-sm-12:first-child{
    clear:both !important;
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    column-gap:150px !important;
    row-gap:0 !important;
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
  }
  body.jp-bs5-2-2-1-temperature-tape-page > a[name="a1"] + .container > .col-xs-12.col-sm-12:first-child > .thumbnail:first-child{
    flex:0 0 100% !important;
    width:100% !important;
    max-width:100% !important;
    margin:40px 0 10px 0 !important;
  }
  body.jp-bs5-2-2-1-temperature-tape-page > a[name="a1"] + .container > .col-xs-12.col-sm-12:first-child > .col-sm-1{
    display:none !important;
  }
  body.jp-bs5-2-2-1-temperature-tape-page > a[name="a1"] + .container > .col-xs-12.col-sm-12:first-child > .col-sm-3{
    float:none !important;
    width:auto !important;
    max-width:none !important;
    flex:0 0 auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  /* Chinese row has margin -15 + padding-left 50; the JP frozen DOM has no row wrapper.
     35px here + the existing 15px col wrapper padding reproduces the same 50px start. */
  body.jp-bs5-2-2-1-temperature-tape-page > a[name="a1"] + .container > .col-xs-12.col-sm-12:first-child > .col-sm-3:nth-child(3){
    margin-left:35px !important;
  }
  body.jp-bs5-2-2-1-temperature-tape-page > a[name="a1"] + .container > .col-xs-12.col-sm-12:first-child > .col-sm-3 .thumbnail{
    margin-bottom:0 !important;
  }
  body.jp-bs5-2-2-1-temperature-tape-page > a[name="a1"] + .container > .col-xs-12.col-sm-12:first-child > .col-sm-3 .text-center{
    text-align:left !important;
    transform:none !important;
    margin:0 !important;
  }
  body.jp-bs5-2-2-1-temperature-tape-page > a[name="a1"] + .container > .col-xs-12.col-sm-12:first-child .btn{
    white-space:normal !important;
    max-width:100% !important;
    font-size:18px !important;
  }
}
@media (max-width:767.98px){
  body.jp-bs5-2-2-1-temperature-tape-page > a[name="a1"] + .container > .col-xs-12.col-sm-12:first-child{
    clear:both !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
  }
  body.jp-bs5-2-2-1-temperature-tape-page > a[name="a1"] + .container > .col-xs-12.col-sm-12:first-child > .thumbnail:first-child{
    margin:40px 0 10px 0 !important;
  }
  body.jp-bs5-2-2-1-temperature-tape-page > a[name="a1"] + .container > .col-xs-12.col-sm-12:first-child > .col-sm-1{
    display:none !important;
  }
  body.jp-bs5-2-2-1-temperature-tape-page > a[name="a1"] + .container > .col-xs-12.col-sm-12:first-child > .col-sm-3{
    float:none !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  body.jp-bs5-2-2-1-temperature-tape-page > a[name="a1"] + .container > .col-xs-12.col-sm-12:first-child > .col-sm-3 .text-center{
    text-align:center !important;
    transform:none !important;
  }
  body.jp-bs5-2-2-1-temperature-tape-page > a[name="a1"] + .container > .col-xs-12.col-sm-12:first-child .btn{
    white-space:normal !important;
    max-width:100% !important;
    font-size:18px !important;
  }
}

/* --------------------------------------------------------------------------
   B2-2 electrical-insulation section: Chinese 50/50 row geometry.
   JP DOM stays frozen, so edge paddings reproduce the Chinese .row -15px geometry.
   -------------------------------------------------------------------------- */
body.jp-bs5-2-2-1-temperature-tape-page > a[name="a1"] + .container > .col-xs-12.col-sm-12:nth-child(2){
  clear:both !important;
  width:100% !important;
  max-width:100% !important;
  flex:0 0 100% !important;
}
body.jp-bs5-2-2-1-temperature-tape-page > a[name="a1"] + .container > .col-xs-12.col-sm-12:nth-child(2) > .thumbnail{
  margin:40px 0 10px 0 !important;
}
body.jp-bs5-2-2-1-temperature-tape-page > a[name="a1"] + .container > .col-xs-12.col-sm-6:nth-child(3),
body.jp-bs5-2-2-1-temperature-tape-page > a[name="a1"] + .container > .col-xs-12.col-sm-6:nth-child(4){
  float:none !important;
  width:50% !important;
  max-width:50% !important;
  flex:0 0 50% !important;
}
@media (min-width:768px){
  body.jp-bs5-2-2-1-temperature-tape-page > a[name="a1"] + .container > .col-xs-12.col-sm-6:nth-child(3){
    padding-left:0 !important;
    padding-right:15px !important;
  }
  body.jp-bs5-2-2-1-temperature-tape-page > a[name="a1"] + .container > .col-xs-12.col-sm-6:nth-child(4){
    padding-left:15px !important;
    padding-right:0 !important;
  }
}
body.jp-bs5-2-2-1-temperature-tape-page img[src="img/2_2_1_02_temperature_tape.jpg"],
body.jp-bs5-2-2-1-temperature-tape-page img[src="img/2_2_1_03_temperature_tape.jpg"]{
  display:block !important;
  max-width:100% !important;
  height:auto !important;
}
@media (max-width:767.98px){
  body.jp-bs5-2-2-1-temperature-tape-page > a[name="a1"] + .container > .col-xs-12.col-sm-6:nth-child(3),
  body.jp-bs5-2-2-1-temperature-tape-page > a[name="a1"] + .container > .col-xs-12.col-sm-6:nth-child(4){
    float:none !important;
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
    padding-left:15px !important;
    padding-right:15px !important;
  }
}

/* --------------------------------------------------------------------------
   B3 gray zone: Chinese final standard = 50/50 stretch row + full-width gray PNG.
   -------------------------------------------------------------------------- */
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray,
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray > .container,
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray > .container > .col-xs-12,
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray > .container .thumbnail,
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray > .container h2,
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray > .container p,
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray > .container .more,
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray > .container .more a,
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray > .container img{
  background:#f2f2f2 !important;
}
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
  overflow:hidden !important;
}
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray > .container{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:stretch !important;
}
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray > .container > .col-xs-12.col-sm-6{
  float:none !important;
  width:50% !important;
  max-width:50% !important;
  flex:0 0 50% !important;
}
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray > .container > .col-xs-12.col-sm-12{
  float:none !important;
  width:100% !important;
  max-width:100% !important;
  flex:0 0 100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray > .container > .col-xs-12.col-sm-6 > .thumbnail{
  height:100% !important;
}
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray > .container > .col-xs-12.col-sm-12 > .thumbnail{
  margin-bottom:0 !important;
}
@media (min-width:768px){
  body.jp-bs5-2-2-1-temperature-tape-page > .back-gray > .container > .col-xs-12.col-sm-6:first-child{
    padding-left:0 !important;
    padding-right:15px !important;
  }
  body.jp-bs5-2-2-1-temperature-tape-page > .back-gray > .container > .col-xs-12.col-sm-6:nth-child(2){
    padding-left:15px !important;
    padding-right:0 !important;
  }
}
body.jp-bs5-2-2-1-temperature-tape-page img[src="img/2_2_1_04_temperature_tape.png"]{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  margin-left:auto !important;
  margin-right:auto !important;
  object-fit:initial !important;
}
@media (max-width:767.98px){
  body.jp-bs5-2-2-1-temperature-tape-page > .back-gray > .container{
    display:block !important;
  }
  body.jp-bs5-2-2-1-temperature-tape-page > .back-gray > .container > .col-xs-12.col-sm-6,
  body.jp-bs5-2-2-1-temperature-tape-page > .back-gray > .container > .col-xs-12.col-sm-12{
    float:none !important;
    width:100% !important;
    max-width:100% !important;
    padding-left:15px !important;
    padding-right:15px !important;
  }
}

/* JP source uses H2 at B3/B4 where the Chinese standard uses H1.
   Match the Chinese H1 visual metrics without changing the frozen JP DOM/text. */
@media (min-width:801px){
  body.jp-bs5-2-2-1-temperature-tape-page > .back-gray > .container > .col-sm-6:first-child h2,
  body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container > .col-sm-12:first-child h2{
    font-family:"微軟正黑體", "新細明體", Arial !important;
    font-size:40px !important;
    text-transform:none !important;
    letter-spacing:1px !important;
    word-spacing:0 !important;
    font-weight:normal !important;
    font-style:normal !important;
    color:#000 !important;
    line-height:0 !important;
    vertical-align:sub !important;
  }
}
@media (max-width:800px){
  body.jp-bs5-2-2-1-temperature-tape-page > .back-gray > .container > .col-sm-6:first-child h2,
  body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container > .col-sm-12:first-child h2{
    font-family:"微軟正黑體", "新細明體", Arial !important;
    font-size:20px !important;
    text-transform:capitalize !important;
    letter-spacing:2px !important;
    text-indent:2px !important;
    word-spacing:1px !important;
    font-weight:bold !important;
    font-style:normal !important;
    text-decoration:none !important;
    color:#000 !important;
    line-height:20px !important;
  }
}

/* --------------------------------------------------------------------------
   B4 high-temperature tape section: Chinese 50/50 row and title rhythm.
   -------------------------------------------------------------------------- */
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:flex-start !important;
}
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container > .col-xs-12.col-sm-12:first-child{
  clear:both !important;
  width:100% !important;
  max-width:100% !important;
  flex:0 0 100% !important;
}
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container > .col-xs-12.col-sm-12:first-child > .thumbnail{
  margin:40px 0 10px 0 !important;
}
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container > .col-xs-12.col-sm-6{
  float:none !important;
  width:50% !important;
  max-width:50% !important;
  flex:0 0 50% !important;
}
@media (min-width:768px){
  body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container > .col-xs-12.col-sm-6:nth-child(2){
    padding-left:0 !important;
    padding-right:15px !important;
  }
  body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container > .col-xs-12.col-sm-6:nth-child(3){
    padding-left:15px !important;
    padding-right:0 !important;
  }
}
body.jp-bs5-2-2-1-temperature-tape-page img[src="img/2_2_1_04-1_temperature_tape.jpg"],
body.jp-bs5-2-2-1-temperature-tape-page img[src="img/2_2_1_04-2_temperature_tape.jpg"]{
  display:block !important;
  max-width:100% !important;
  height:auto !important;
}
/* Chinese standard uses a normal paragraph for the B4-L image note; match its typography only. */
@media (min-width:801px){
  body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container > .col-sm-6:nth-child(2) h5{
    font-family:"微軟正黑體", "新細明體", Arial !important;
    font-size:20px !important;
    font-weight:normal !important;
    line-height:1.42857143 !important;
    margin-top:0 !important;
    margin-bottom:1rem !important;
  }
}
@media (max-width:800px){
  body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container > .col-sm-6:nth-child(2) h5{
    font-family:"微軟正黑體", "新細明體", Arial !important;
    font-size:16px !important;
    font-weight:normal !important;
    line-height:1.42857143 !important;
    margin-top:0 !important;
    margin-bottom:1rem !important;
  }
}
@media (max-width:767.98px){
  body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container{
    display:block !important;
  }
  body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container > .col-xs-12.col-sm-6{
    float:none !important;
    width:100% !important;
    max-width:100% !important;
    padding-left:15px !important;
    padding-right:15px !important;
  }
}

/* --------------------------------------------------------------------------
   B5 dual image section: match Chinese final no-gap BS3-faithful merge rule.
   Desktop: left image natural width floats right, right image natural width floats left.
   Mobile: full-width stacked images.
   -------------------------------------------------------------------------- */
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container + .container-fluid,
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container + .container-fluid > .row,
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container + .container-fluid > .row > .col-xs-12,
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container + .container-fluid > .row > .col-sm-12,
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container + .container-fluid > .row > .col-sm-12 > .row,
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container + .container-fluid .col-sm-6,
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container + .container-fluid .col-sm-6 > .row{
  --bs-gutter-x:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  line-height:0 !important;
  font-size:0 !important;
}
body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container + .container-fluid{
  overflow:hidden !important;
}
body.jp-bs5-2-2-1-temperature-tape-page img[src="img/2_2_1_05_temperature_tape.jpg"],
body.jp-bs5-2-2-1-temperature-tape-page img[src="img/2_2_1_06_temperature_tape.jpg"]{
  display:block !important;
  border:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:initial !important;
}
@media (min-width:768px){
  body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container + .container-fluid > .row > .col-sm-12 > .row{
    display:block !important;
    clear:both !important;
  }
  body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container + .container-fluid > .row > .col-sm-12 > .row::before,
  body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container + .container-fluid > .row > .col-sm-12 > .row::after{
    content:" " !important;
    display:table !important;
  }
  body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container + .container-fluid > .row > .col-sm-12 > .row::after{
    clear:both !important;
  }
  body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container + .container-fluid .col-xs-12.col-sm-6{
    float:left !important;
    width:50% !important;
    max-width:50% !important;
    flex:0 0 auto !important;
  }
  body.jp-bs5-2-2-1-temperature-tape-page img[src="img/2_2_1_05_temperature_tape.jpg"]{
    float:right !important;
    width:auto !important;
    max-width:100% !important;
  }
  body.jp-bs5-2-2-1-temperature-tape-page img[src="img/2_2_1_06_temperature_tape.jpg"]{
    float:left !important;
    width:auto !important;
    max-width:100% !important;
  }
}
@media (max-width:767.98px){
  body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container + .container-fluid > .row > .col-sm-12 > .row{
    display:block !important;
    clear:both !important;
  }
  body.jp-bs5-2-2-1-temperature-tape-page > .back-gray + .container + .container-fluid .col-xs-12.col-sm-6{
    float:none !important;
    width:100% !important;
    max-width:100% !important;
  }
  body.jp-bs5-2-2-1-temperature-tape-page img[src="img/2_2_1_05_temperature_tape.jpg"],
  body.jp-bs5-2-2-1-temperature-tape-page img[src="img/2_2_1_06_temperature_tape.jpg"]{
    float:none !important;
    width:100% !important;
    max-width:100% !important;
  }
}