/* Product families use the original six category photographs and full-width carousel. */
.jj-site.group-products #main-content { overflow: hidden; }
.jj-site .products-explorer { padding: 50px 0 24px; overflow: hidden; }
.jj-site .products-series-carousel { position: relative; width: calc(100% - 74px); max-width: 1368px; margin: 0 auto; }
.jj-site .products-series-window { position: relative; }
.jj-site .products-series-window::before,.jj-site .products-series-window::after { content: ''; position: absolute; top: 0; bottom: 0; width: 100vw; background: rgba(255,255,255,.8); z-index: 3; pointer-events: none; }
.jj-site .products-series-window::before { right: 100%; }
.jj-site .products-series-window::after { left: 100%; }
.jj-site .products-series-track { display: flex; margin: 0 -10px; padding: 0; list-style: none; }
.jj-site .products-series-slide { flex: 0 0 25%; min-width: 0; padding: 0 10px; }
.jj-site .products-series-card { position: relative; display: block; color: #333; isolation: isolate; transition: box-shadow .25s; }
.jj-site .products-series-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(60deg,#f79533,#f37055,#ef4e7b,#a166ab,#5073b8,#1098ad,#07b39b,#6fba82); background-size: 300% 300%; animation: products-gradient 3s ease alternate infinite; opacity: 0; transition: opacity .2s; }
@keyframes products-gradient { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.jj-site .products-series-card figure { margin: 0; overflow: hidden; background: #f4f4f4; }
.jj-site .products-series-card img { display: block; width: 100%; height: auto; aspect-ratio: 335 / 380; object-fit: cover; transition: transform .25s; }
.jj-site .products-series-card.is-dark { color: #fff; }
.jj-site .products-series-copy { position: absolute; left: 30px; right: 24px; bottom: 30px; line-height: 1.2; }
.jj-site .products-series-copy strong,.jj-site .products-series-copy>span { display: block; font-size: 30px; }
.jj-site .products-series-copy strong { font-weight: 700; }
.jj-site .products-series-copy>span { font-weight: 300; }
.jj-site .products-series-slide.is-active .products-series-card,.jj-site .products-series-card:is(:hover,:focus-visible) { padding: 8px; box-shadow: 4px 6px 20px #0003; }
.jj-site .products-series-slide.is-active .products-series-card::before,.jj-site .products-series-card:is(:hover,:focus-visible)::before { opacity: 1; }
.jj-site .products-series-slide.is-active .products-series-card img,.jj-site .products-series-card:is(:hover,:focus-visible) img { transform: scale(1.2); }
.jj-site .products-series-slide.is-active .products-series-card figure,.jj-site .products-series-card:is(:hover,:focus-visible) figure { margin: -8px; clip-path: inset(8px); }
.jj-site .products-series-prev,.jj-site .products-series-next { position: absolute; z-index: 4; top: 50%; width: 53px; height: 53px; margin-top: -26.5px; display: grid; place-items: center; border: 0; border-radius: 50%; padding: 0; color: #fff; background: #29b231; cursor: pointer; }
.jj-site .products-series-prev { left: -26.5px; }
.jj-site .products-series-next { right: -26.5px; }
.jj-site .products-series-prev span,.jj-site .products-series-next span { width: 12px; height: 12px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); margin-left: -5px; }
.jj-site .products-series-prev span { transform: rotate(-135deg); margin-left: 5px; }
.jj-site .products-series-prev:hover,.jj-site .products-series-next:hover { background: #23992a; }
.jj-site .products-series-prev[hidden],.jj-site .products-series-next[hidden] { display: none; }
.jj-site .products-series-carousel.is-ready .products-series-track { will-change: transform; touch-action: pan-y pinch-zoom; cursor: grab; user-select: none; -webkit-user-select: none; }
.jj-site .products-series-carousel.is-ready .products-series-card { cursor: inherit; }
.jj-site .products-series-carousel.is-dragging .products-series-track { cursor: grabbing; }
.jj-site .products-series-carousel.is-ready .products-series-card img { -webkit-user-drag: none; }
.jj-site .products-page-content { width: calc(100% - 40px); max-width: 1400px; padding: 76px 0 100px; min-height: 400px; }
.jj-site .products-page-content:has(.products-series-detail) { padding-top: 36px; }
.jj-site .products-content-heading { text-align: center; margin: 0 0 40px; }
.jj-site .products-content-heading h2 { font-family: 'JJ Sans',sans-serif; font-size: 45px; font-weight: 700; line-height: 1.35; margin: 0; overflow-wrap: anywhere; }
.jj-site .products-content-heading small { display: block; font-size: 20px; font-weight: 300; margin-top: 6px; }
.jj-site .products-series-grid { list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px 20px; padding: 0; margin: 0; }
.jj-site .products-series-grid>li[hidden],.jj-site .products-model-grid>li[hidden] { display: none; }
.jj-site .products-new-additions { margin-bottom: 40px; }
.jj-site .products-series-item { display: block; }
.jj-site .products-series-item figure { position: relative; aspect-ratio: 100 / 79; overflow: hidden; margin: 0; background: #f4f4f4; transition: box-shadow .2s; }
.jj-site .products-series-item figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.jj-site .products-series-item h3 { margin: 15px 0 0; font-size: 20px; font-weight: 700; line-height: 1.45; transition: color .2s; }
.jj-site .products-series-item h3 small { font-size: 20px; font-weight: 300; }
.jj-site .products-series-item:is(:hover,:focus-visible) figure { box-shadow: 4px 6px 20px #0003; }
.jj-site .products-series-item:is(:hover,:focus-visible) figure img { transform: scale(1.2); }
.jj-site .products-series-item:is(:hover,:focus-visible) h3 { color: #62a602; }
.jj-site .products-detail-image { max-width: 600px; margin: 0 auto 40px; text-align: center; }
.jj-site .products-detail-image img { max-width: 100%; }
.jj-site .products-reference-intro { margin-bottom: 100px; }
.jj-site .products-reference-intro h3 { font-size: 45px; line-height: 1.5; font-weight: 700; text-align: center; margin: 0; }
.jj-site .products-reference-intro h3 small { display: block; font-size: 20px; line-height: 1.5; font-weight: 300; }
.jj-site .products-reference-intro p { margin: 10px 0 0; text-align: center; font-size: 20px; line-height: 1.8; font-weight: 400; }
.jj-site .products-model-browser { scroll-margin-top: 80px; }
.jj-site .products-model-browser .search-form { position: relative; width: 190px; height: 38px; border: 1px solid #ddd; }
.jj-site .products-model-browser .search-form input { width: 100%; min-width: 0; height: 36px; padding: 0 35px 0 10px; border: 0; font-size: 14px; }
.jj-site .products-model-browser .search-form button { position: absolute; top: 0; right: 0; width: 36px; height: 36px; min-width: 0; padding: 0; border: 0; background: transparent url('original/_skin/img/common/ico_search_btn.png') center / 20px no-repeat; }
.jj-site .products-model-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px 20px; }
.jj-site .products-model-card { display: block; }
.jj-site .products-model-card figure { position: relative; aspect-ratio: 100 / 79; margin: 0; overflow: hidden; background: #f4f4f4; }
.jj-site .products-model-card figure img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.jj-site .products-model-preview { position: absolute; inset: 0; display: block; }
.jj-site .products-model-card h3 { margin: 15px 0 0; font-size: 20px; line-height: 1.45; }
.jj-site .products-model-card h3 a { color: inherit; }
.jj-site .products-model-card:is(:hover,:focus-within) figure { box-shadow: 4px 6px 20px #0003; }
.jj-site .products-model-card:is(:hover,:focus-within) figure img { transform: scale(1.2); }
.jj-site .products-model-card:is(:hover,:focus-within) h3 { color: #62a602; }
.jj-site .products-model-actions { position: absolute; z-index: 1; right: 0; bottom: 0; display: flex; justify-content: flex-end; max-width: 100%; gap: 1px; }
.jj-site .products-model-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 40px; padding: 9px 13px; background: #111; color: #fff; font-size: 14px; line-height: 1.25; text-align: center; transition: background-color .15s ease; }
.jj-site .products-model-actions .products-model-download { background: #365e70; }
.jj-site .products-model-view::before { content: ''; flex: 0 0 18px; height: 20px; background: url('original/_skin/img/sub/ico_pdf.png') center / contain no-repeat; }
.jj-site .products-model-actions a:is(:hover,:focus-visible) { background-color: #087ca8; }
.jj-site .products-model-actions a:focus-visible { outline: 2px solid #aee008; outline-offset: -3px; }
.jj-site .products-model-pagination button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: white; color: #555; font: inherit; font-size: 14px; cursor: pointer; }
.jj-site .products-model-pagination button[aria-current="page"] { background: #262626; color: white; }
.jj-site .products-model-pagination button:disabled { opacity: .3; cursor: default; }
@media(max-width:991px) { .jj-site .products-series-slide { flex-basis: 33.333333%; } .jj-site .products-series-copy { left: 20px; bottom: 20px; } .jj-site .products-series-copy strong,.jj-site .products-series-copy>span { font-size: 25px; } }
@media(max-width:767px) {
  .jj-site .products-explorer { padding-top: 30px; }
  .jj-site .products-series-slide { flex-basis: 50%; }
  .jj-site .products-series-carousel { width: calc(100% - 52px); }
  .jj-site .products-series-prev,.jj-site .products-series-next { width: 42px; height: 42px; margin-top: -21px; }
  .jj-site .products-series-prev { left: -21px; } .jj-site .products-series-next { right: -21px; }
  .jj-site .products-page-content { padding-top: 40px; padding-bottom: 65px; }
  .jj-site .products-content-heading h2 { font-size: 30px; }
  .jj-site .products-reference-intro { margin-bottom: 45px; }
  .jj-site .products-reference-intro h3 { font-size: 30px; }
  .jj-site .products-reference-intro p { font-size: 16px; }
  .jj-site .products-series-grid,.jj-site .products-model-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 16px; }
  .jj-site .products-series-item h3,.jj-site .products-series-item h3 small,.jj-site .products-model-card h3 { font-size: 16px; }
}
@media(max-width:575px) {
  .jj-site .products-series-slide { flex-basis: 100%; }
  .jj-site .products-series-carousel { width: calc(100% - 92px); }
  .jj-site .products-series-copy strong,.jj-site .products-series-copy>span { font-size: 28px; }
  .jj-site .products-series-grid,.jj-site .products-model-grid { grid-template-columns: 1fr; }
  .jj-site .products-content-heading h2 { font-size: 25px; }
  .jj-site .products-model-pagination { gap: 5px; }
  .jj-site .products-model-pagination button { width: 36px; height: 36px; }
}
@media(prefers-reduced-motion:reduce) { .jj-site .products-series-track,.jj-site .products-series-card,.jj-site .products-series-card img,.jj-site .products-series-item figure img,.jj-site .products-model-card figure img,.jj-site .products-model-actions a { transition: none!important; } .jj-site .products-series-card::before { animation: none; } }
