/* JP 2_1_5 roller blinds BS5 v1 - B-zone only minimal compatibility patch.
   Frozen: accepted desktop navbar/footer; accepted mobile shell; JP B DOM/text/href/img src; all image files.
   Reference: accepted JP shell + Chinese BS5 same-name page geometry + already accepted JP B-component rules. */

/* ---------- Common B card/image/link compatibility ---------- */
body.jp-bs5-2-1-5-roller-page > nav ~ .container .thumbnail,
body.jp-bs5-2-1-5-roller-page > nav ~ .back-gray .thumbnail {
  border:0 !important;
  border-color:transparent !important;
  box-shadow:none !important;
  outline:0 !important;
}
body.jp-bs5-2-1-5-roller-page > nav ~ .container img,
body.jp-bs5-2-1-5-roller-page > nav ~ .back-gray img {
  max-width:100% !important;
  height:auto !important;
}
body.jp-bs5-2-1-5-roller-page > nav ~ .container .more a,
body.jp-bs5-2-1-5-roller-page > nav ~ .back-gray .more a,
body.jp-bs5-2-1-5-roller-page > nav ~ .container .more a:hover,
body.jp-bs5-2-1-5-roller-page > nav ~ .back-gray .more a:hover,
body.jp-bs5-2-1-5-roller-page > nav ~ .container .more a:focus,
body.jp-bs5-2-1-5-roller-page > nav ~ .back-gray .more a:focus {
  text-decoration:none !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}
body.jp-bs5-2-1-5-roller-page {
  --jp-roller-more-icon-size:1.5em;
  --jp-roller-more-icon-gap:0.25em;
}
body.jp-bs5-2-1-5-roller-page > nav ~ .container .more .glyphicon-menu-right,
body.jp-bs5-2-1-5-roller-page > nav ~ .back-gray .more .glyphicon-menu-right {
  display:inline-block !important;
  font-size:var(--jp-roller-more-icon-size) !important;
  margin-left:var(--jp-roller-more-icon-gap) !important;
}

/* ---------- B1: original 1680x379 main visual ---------- */
body.jp-bs5-2-1-5-roller-page > nav + .container-fluid {
  width:100% !important;
  max-width:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
  overflow:hidden !important;
  text-align:center !important;
}
body.jp-bs5-2-1-5-roller-page > nav + .container-fluid > .row,
body.jp-bs5-2-1-5-roller-page > nav + .container-fluid .row {
  --bs-gutter-x:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
body.jp-bs5-2-1-5-roller-page > nav + .container-fluid .col-xs-12,
body.jp-bs5-2-1-5-roller-page > nav + .container-fluid .col-sm-12 {
  width:100% !important;
  max-width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
body.jp-bs5-2-1-5-roller-page > nav + .container-fluid img[src="img/2_1_5_01_roller_blinds.jpg"] {
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 auto !important;
  object-fit:initial !important;
}

/* ---------- B2 row 1 + row 2: preserve BS3 desktop 50/50, mobile stack ---------- */
body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container,
body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container {
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:stretch !important;
}
body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container img[src="img/2_1_5_02_roller_blinds.jpg"],
body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container img[src="img/2_1_5_03_roller_blinds.jpg"] {
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 auto !important;
}
@media (min-width:768px) {
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container > .col-sm-6,
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container > .col-sm-6 {
    float:none !important;
    width:50% !important;
    max-width:50% !important;
    flex:0 0 50% !important;
  }
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container > .col-sm-6 > .thumbnail,
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container > .col-sm-6 > .thumbnail {
    height:100% !important;
  }
}
@media (max-width:767.98px) {
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container,
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container {
    display:block !important;
  }
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container > .col-xs-12,
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container > .col-xs-12,
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container > .col-sm-6,
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container > .col-sm-6 {
    float:none !important;
    width:100% !important;
    max-width:100% !important;
  }
}

/* ---------- B4 gray information band: preserve JP source 8/4 desktop split ---------- */
body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container + .back-gray,
body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container + .back-gray > .container,
body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container + .back-gray .thumbnail {
  background:#f2f2f2 !important;
}
body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container + .back-gray {
  padding-top:1px !important;
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}
body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container + .back-gray > .container {
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:stretch !important;
}
body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container + .back-gray .thumbnail {
  margin-top:0 !important;
  margin-bottom:0 !important;
  height:100% !important;
}
@media (min-width:768px) {
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container + .back-gray > .container > .col-sm-8 {
    float:none !important; width:66.66666667% !important; max-width:66.66666667% !important; flex:0 0 66.66666667% !important;
  }
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container + .back-gray > .container > .col-sm-4 {
    float:none !important; width:33.33333333% !important; max-width:33.33333333% !important; flex:0 0 33.33333333% !important;
  }
}
@media (max-width:767.98px) {
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container + .back-gray > .container {
    display:block !important;
  }
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container + .back-gray > .container > .col-xs-12,
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container + .back-gray > .container > .col-sm-8,
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container + .back-gray > .container > .col-sm-4 {
    float:none !important; width:100% !important; max-width:100% !important;
  }
}

/* ---------- B3: original 1680x560 wide visual, natural ratio ---------- */
body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container + .back-gray + .container-fluid {
  width:100% !important;
  max-width:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
  overflow:hidden !important;
  text-align:center !important;
}
body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container + .back-gray + .container-fluid > .row,
body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container + .back-gray + .container-fluid .row {
  --bs-gutter-x:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container + .back-gray + .container-fluid .col-xs-12,
body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container + .back-gray + .container-fluid .col-sm-12 {
  width:100% !important;
  max-width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
body.jp-bs5-2-1-5-roller-page img[src="img/2_1_5_04_roller_blinds.jpg"] {
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 auto !important;
  object-fit:initial !important;
}

/* ---------- B5 shade section: restore BS3 50/50 float geometry ---------- */
body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container + .back-gray + .container-fluid + .container {
  margin-top:0 !important;
}
body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container + .back-gray + .container-fluid + .container > .col-sm-12 > .thumbnail {
  display:flow-root !important;
  margin-bottom:0 !important;
}
body.jp-bs5-2-1-5-roller-page img[src="img/2_1_3_02_shade.jpg"],
body.jp-bs5-2-1-5-roller-page img[src="img/2_1_3_03_shade.jpg"] {
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
}
@media (min-width:768px) {
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container + .back-gray + .container-fluid + .container > .col-sm-12 > .thumbnail > .col-sm-6 {
    float:left !important;
    width:50% !important;
    max-width:50% !important;
  }
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container + .back-gray + .container-fluid + .container > .col-sm-12 > .thumbnail > .col-sm-12 {
    clear:both !important;
    float:none !important;
    width:100% !important;
    max-width:100% !important;
  }
}
@media (max-width:767.98px) {
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container + .back-gray + .container-fluid + .container > .col-sm-12 > .thumbnail > .col-xs-12,
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container + .back-gray + .container-fluid + .container > .col-sm-12 > .thumbnail > .col-sm-6,
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid + .container + .container + .back-gray + .container-fluid + .container > .col-sm-12 > .thumbnail > .col-sm-12 {
    float:none !important;
    width:100% !important;
    max-width:100% !important;
  }
}

/* ---------- Mobile B1 accepted project behavior: 100% x 400px, swipe, recenter ---------- */
@media (max-width:767.98px) {
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid {
    width:100% !important;
    max-width:100% !important;
    height:400px !important;
    padding:0 !important;
    margin:0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    touch-action:pan-x pan-y;
  }
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid::-webkit-scrollbar {display:none;width:0;height:0;}
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid > .row,
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid > .row > .col-xs-12,
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid > .row > .col-sm-12,
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid > .row > .col-xs-12 > .row,
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid > .row > .col-sm-12 > .row {
    width:max-content !important;
    min-width:100% !important;
    max-width:none !important;
    height:400px !important;
    min-height:400px !important;
    margin:0 !important;
    padding:0 !important;
    flex-wrap:nowrap !important;
  }
  body.jp-bs5-2-1-5-roller-page > nav + .container-fluid img[src="img/2_1_5_01_roller_blinds.jpg"] {
    display:block !important;
    width:auto !important;
    min-width:100vw !important;
    max-width:none !important;
    height:400px !important;
    min-height:400px !important;
    object-fit:cover !important;
    object-position:center center !important;
    margin:0 !important;
    padding:0 !important;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    user-select:none;
    -webkit-user-drag:none;
  }
}