/* Local preview: depth and interaction. No continuous animation. */
.jp-depth{--jp-shadow:0 3px 8px rgba(22,24,27,.05),0 14px 32px rgba(22,24,27,.09);--jp-raised:0 8px 18px rgba(22,24,27,.08),0 22px 44px rgba(22,24,27,.15)}
.jp-depth .ab-category,.jp-depth .ab-product,.jp-depth .jp-review{box-shadow:var(--jp-shadow);transition:box-shadow .22s ease,transform .22s ease}
.jp-depth .ab-scene{box-shadow:0 6px 12px rgba(14,25,32,.10),0 18px 34px rgba(14,25,32,.16);transition:box-shadow .25s ease,transform .25s ease;isolation:isolate}
.jp-depth .ab-scene>img{transition:transform .5s ease,filter .35s ease}
.jp-depth .jp-promo{box-shadow:0 8px 18px rgba(22,24,27,.07),0 20px 40px rgba(22,24,27,.12),inset 0 1px 0 rgba(255,255,255,.22)}
.jp-depth .jp-button{box-shadow:0 3px 7px rgba(22,24,27,.12),inset 0 1px 0 rgba(255,255,255,.16);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.jp-depth :is(a,button,input,select):focus-visible{outline:3px solid #B84A00;outline-offset:4px}
.jp-depth .ab-category:focus-visible,.jp-depth .ab-product:focus-within,.jp-depth .ab-scene:focus-visible{box-shadow:var(--jp-raised)}
.jp-depth .jp-button:active{transform:translateY(1px);box-shadow:0 1px 3px rgba(22,24,27,.15)}
@media(hover:hover) and (pointer:fine){
.jp-depth .ab-category:hover,.jp-depth .ab-product:hover{transform:translateY(-4px);box-shadow:var(--jp-raised)}
.jp-depth .ab-scene:hover{transform:translateY(-3px);box-shadow:var(--jp-raised)}
.jp-depth .ab-scene:hover>img{transform:scale(1.035);filter:brightness(.9)}
.jp-depth .jp-button:hover{transform:translateY(-2px);box-shadow:0 7px 15px rgba(22,24,27,.2);filter:brightness(1.04)}
.jp-depth .jp-button:active{transform:translateY(1px)}
}
@media(prefers-reduced-motion:reduce){
.jp-depth .ab-category,.jp-depth .ab-product,.jp-depth .jp-review,.jp-depth .ab-scene,.jp-depth .ab-scene>img,.jp-depth .jp-button{transition:none;transform:none}
.jp-depth .ab-category:hover,.jp-depth .ab-product:hover,.jp-depth .ab-scene:hover,.jp-depth .ab-scene:hover>img,.jp-depth .jp-button:hover,.jp-depth .jp-button:active{transform:none}
}

/* Background trial: warm base, quiet category glow, cool application band. */
.jp-depth .jp-background-categories{background:#EEF0F2}
.jp-depth .jp-background-applications{background:#EAF0EE;border-top:1px solid rgba(14,92,99,.06);border-bottom:1px solid rgba(14,92,99,.06)}


.jp-depth .jp-background-categories .ab-category:focus-visible{outline-color:#FF6A00}
@media(hover:hover) and (pointer:fine){.jp-depth .jp-background-categories .ab-category:hover{box-shadow:0 0 0 1px #FF6A00,0 8px 18px rgba(22,24,27,.08),0 22px 44px rgba(22,24,27,.15)}}

/* Decorative technical drawing: local SVG and CSS only. */
.jp-depth .jp-background-categories,.jp-depth .jp-technical-products{position:relative;isolation:isolate}
.jp-depth .jp-background-categories>section,.jp-depth .jp-technical-products>section{position:relative;z-index:1}
.jp-depth .jp-background-categories::before,.jp-depth .jp-technical-products::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(67,86,104,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(67,86,104,.10) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.5) 12%,rgba(0,0,0,.1) 28%,rgba(0,0,0,.1) 72%,rgba(0,0,0,.5) 88%,#000 100%)}
.jp-depth .jp-technical-products::before{opacity:.5}
.jp-depth .jp-background-categories::after{content:"";position:absolute;right:12px;top:24px;bottom:24px;width:clamp(80px,calc((100% - 1352px)/2),200px);background:url('../img/japro-ab/technical-tie.svg') center/contain no-repeat;opacity:.24;pointer-events:none;z-index:0}
@media(max-width:1500px){.jp-depth .jp-background-categories::after{display:none}}
@media(max-width:767px){.jp-depth .jp-background-categories::before,.jp-depth .jp-technical-products::before{opacity:.35;background-size:40px 40px}}


/* Additional catalog sketches, confined to outer desktop margins. */
.jp-depth .jp-technical-lower{position:relative;isolation:isolate}
.jp-depth .jp-technical-lower>section{position:relative;z-index:1}
.jp-depth .jp-margin-sketch{position:absolute;display:block;width:clamp(80px,calc((100% - 1352px)/2),200px);height:300px;pointer-events:none;z-index:0;opacity:.24;background-position:center;background-size:contain;background-repeat:no-repeat}
.jp-depth .jp-sketch-steel{left:12px;top:110px;background-image:url('../img/japro-ab/technical-steel.svg')}
.jp-depth .jp-sketch-mount{left:12px;top:90px;background-image:url('../img/japro-ab/technical-mount.svg');opacity:.20}
.jp-depth .jp-sketch-label{right:12px;bottom:8px;background-image:url('../img/japro-ab/technical-label.svg');opacity:.22}
.jp-depth .jp-sketch-connector{left:12px;top:10px;background-image:url('../img/japro-ab/technical-connector.svg');opacity:.22}
@media(max-width:1500px){.jp-depth .jp-margin-sketch{display:none}}


/* Native theme integration of the approved October 7 A+B design. */
#index #japro-home{background:#f3f2ee;color:#16181b}
#japro-home .jp-ab{font-family:Lexend,sans-serif;color:#16181b;text-align:left;line-height:1.55}
#japro-home .jp-ab h2{line-height:1.2;text-transform:none}
#japro-home .jp-ab a:hover{text-decoration:none}
#japro-home .jp-ab .ab-category{align-items:stretch}
#japro-home .jp-ab .ab-category img{mix-blend-mode:normal}
#japro-home .jp-ab .ab-category p{font-size:15px}
#japro-home .jp-ab .ab-scene img{max-width:none}
#japro-home .jp-ab .ab-products{max-width:1280px;margin:auto;padding:72px 24px 0}
#japro-home .ab-heading{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}
#japro-home .ab-heading h2{font-size:36px;font-weight:600;letter-spacing:-.8px;margin:6px 0 0}
#japro-home .ab-eyebrow{font-size:13px;letter-spacing:1.5px;color:#b84a00;text-transform:uppercase;margin:0}
#japro-home .ab-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
#japro-home .ab-product{display:flex;flex-direction:column;background:#fff;border:1px solid #e6e4df;border-radius:14px;overflow:hidden}
#japro-home .ab-product-photo{display:block;position:relative;aspect-ratio:4/3;background:#fff}
#japro-home .ab-product-photo img{width:100%;height:100%;object-fit:contain}
#japro-home .ab-product-photo>span{position:absolute;top:12px;left:12px;padding:4px 8px;border-radius:4px;background:#ffc43d;color:#16181b;font-size:12px;font-weight:600}
#japro-home .ab-product-copy{display:flex;flex-direction:column;gap:12px;flex:1;padding:18px}
#japro-home .ab-product-width{display:flex;align-items:center;gap:10px;min-height:30px}
#japro-home .ab-product-width i{flex:1;border-radius:0 99px 99px 0;background:#16181b repeating-linear-gradient(90deg,#ffffff4d 0 2px,transparent 2px 6px)}
#japro-home .ab-product-width span{font-size:13px;white-space:nowrap}
#japro-home .ab-product h3{font-size:16px;font-weight:500;line-height:1.4;margin:0}
#japro-home .ab-product-copy>p{font-size:12px;color:#55595f;margin:0}
#japro-home .ab-product-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
#japro-home .ab-product-bottom strong{font-size:22px;font-weight:600;color:#16181b}
#japro-home .ab-product-bottom del{display:block;font-size:12px;color:#676767}
#japro-home .ab-choose{display:inline-flex;align-items:center;justify-content:center;background:#16181b;color:white;padding:12px;border-radius:8px;font-size:13px;font-weight:600;min-height:44px}
#japro-home .ab-price-note{font-size:12px;color:#55595f;margin:16px 0 0}
#index #japro-home #japro-hero{background:linear-gradient(90deg,#0e0f11d1 0%,#0e0f1180 45%,#0e0f1100 80%),url('../img/japro-ab/hero.webp') 70% 50%/cover no-repeat}
#index #japro-home #japro-hero .jp2-hero-layout{max-width:1280px;padding:104px 24px 112px;gap:40px;grid-template-columns:1.05fr 1fr}
#index #japro-home #japro-hero .jp2-lead{color:#e6e8ea;font-size:16px}
#index #japro-home #japro-hero .jp2-finder{background:#fff;border-radius:16px;box-shadow:0 18px 46px #0003;padding:28px}
#index #japro-home #japro-hero .jp2-finder-title{font-size:22px}
#index #japro-home #japro-hero .jp2-button{font-size:14px;min-height:50px}
#index #japro-home #japro-hero .jp2-outline{border-color:#ffffff80}
#index #japro-home #japro-hero .jp2-widths label>span{display:flex;flex-direction:column;justify-content:end;align-items:center;gap:6px;min-height:78px;padding:8px 4px}
#index #japro-home #japro-hero .ab-width-bar{display:block;width:70%;flex:none;border-radius:2px;background:#16181b repeating-linear-gradient(90deg,#ffffff47 0 2px,transparent 2px 5px)}
#index #japro-home #japro-hero .jp2-widths input:checked+span .ab-width-bar{background-color:#ff6a00}
/* White native navigation from the approved design; native handlers remain active. */
#header,#header .header-top,#header .header-top-inner{background:#fff;color:#16181b}
#header .header-top-inner{border-top:1px solid #eeece8;border-bottom:1px solid #e6e4df}
#header .jp-primary-menu a{color:#3a3d43}
#header .jp-primary-menu a:hover,#header .jp-primary-menu a.is-current{color:#16181b}
#header .jp-header-b2b{border-color:#16181b;color:#16181b}
#header .jp-header-b2b:hover{background:#f3f2ee}
#header #searchbox{border:2px solid #16181b;border-radius:8px}
#header #search_query_top{height:42px;min-height:42px}
#header #searchbox .search-icon-btn{background:#16181b!important;color:#fff!important;height:42px}
#header #searchbox .submit-text{color:#fff;line-height:42px}
#header .user-icon{filter:brightness(.15)}
#header .shopping-cart{background:#16181b;color:#fff}
#header.fixed,#header.fixed .header-top,#header.fixed .header-top-inner{background:#fff!important}
#header .menu-icon .cat-title:before,#header .menu-icon .cat-title:after{color:#16181b}
#header .header-top .mobile-menu .cat-title{color:#16181b}
@media(min-width:1200px){#header>.header-nav>.container,#header .header-top>.container,#header .header-top-inner>.container{max-width:1280px;width:100%;padding-left:24px;padding-right:24px}#header .jp-primary-menu{gap:15px}#header .jp-primary-menu a{font-size:12px}#header .jp-primary-menu [data-jp-category="all"]{display:none}}
#index #cztestimonialcmsblock.jp4-reviews>.container{max-width:1280px;width:100%;padding-left:24px;padding-right:24px}
@media(max-width:1100px){#japro-home .ab-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#japro-home .jp-ab .ab-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}#japro-home .jp-ab .ab-scene:first-child{grid-column:span 2!important}#index #japro-home #japro-hero .jp2-hero-layout{padding-top:60px;padding-bottom:60px;gap:28px}}
@media(max-width:767px){#index #japro-home #japro-hero .jp2-hero-layout{display:grid;grid-template-columns:1fr;padding:40px 20px}#index #japro-home #japro-hero .jp2-finder{padding:22px 18px}#japro-home .jp-ab>section,#japro-home .jp-ab>div>section{padding:38px 20px!important}#japro-home .jp-ab h2{font-size:27px!important}#japro-home .jp-ab .ab-grid{grid-template-columns:1fr!important;grid-auto-rows:auto!important}#japro-home .jp-ab .ab-scene{grid-column:auto!important;grid-row:auto!important;min-height:250px}#japro-home .jp-ab .ab-scene:first-child{grid-column:auto!important;min-height:330px}#japro-home .jp-ab .ab-category{grid-row:auto!important}#japro-home .ab-widths>div{padding:28px 20px!important}#japro-home .ab-widths a>span{flex-basis:100%!important}#japro-home .ab-widths a>span:nth-child(2){flex-basis:100%!important}#japro-home .ab-company>div>div{flex-basis:100%!important;min-width:0!important}#japro-home .ab-company>div>div:last-child{padding:28px!important}#japro-home .jp-promo{padding:26px!important;min-width:0}#japro-home .jp-ab .ab-products{padding:38px 20px 0!important}#japro-home .ab-product-bottom{align-items:stretch;flex-direction:column}#index #cztestimonialcmsblock.jp4-reviews>.container{padding:0 20px}}
@media(max-width:430px){#japro-home .ab-product-grid{grid-template-columns:1fr}#japro-home .ab-product-photo{aspect-ratio:4/3}#japro-home .jp-ab .ab-category:not(:first-child){padding:18px!important;gap:12px!important}#japro-home .jp-ab .ab-category:not(:first-child)>div:last-child{flex-basis:95px!important}}
@media(min-width:1101px){#japro-home .jp-ab .ab-category:not(:first-child)>div:last-child{flex-basis:96px!important}#japro-home .jp-ab .ab-category:not(:first-child){gap:12px!important;padding:18px!important}}
@media(max-width:991px){#header .shopping-cart{background:#16181b!important}#header .title-horizontalmenu-mobile .menu-title:before{color:#16181b!important}#header.fixed .title-horizontalmenu-mobile .menu-title:before{color:#16181b!important}#header .title-horizontalmenu-mobile .menu-title{border-color:#666}}
#japro-home .jp-ab h2{color:inherit}
#japro-home .ab-product-bottom{display:grid;grid-template-columns:1fr;gap:10px}
#japro-home .ab-product-bottom .ab-choose{justify-self:stretch}
@media(min-width:1200px){#footer .footer-container>.container,#footer .footer-after>.container{max-width:1280px;width:100%;padding-left:24px;padding-right:24px}}

/* Stable option area: invisible inactive content still determines intrinsic height. */
#index #japro-home #japro-hero .jp2-option-area{display:grid;min-width:0}
#index #japro-home #japro-hero .jp2-dimensions,#index #japro-home #japro-hero .jp2-option-area>.jp2-steel-info{grid-area:1/1;min-width:0}
#index #japro-home #japro-hero .jp2-option-area #jp2-width-field[hidden],#index #japro-home #japro-hero .jp2-option-area #jp2-length-field[hidden],#index #japro-home #japro-hero .jp2-option-area #jp2-steel-info[hidden]{display:block!important;visibility:hidden;pointer-events:none}
#index #japro-home #japro-hero .jp2-finder{box-shadow:0 8px 18px #00000012,0 26px 64px #00000040,inset 0 1px 0 #fff;border-color:#ffffffd9}
#index #japro-home #japro-hero .jp2-choices input+span{transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
@media(hover:hover) and (pointer:fine){
 #index #japro-home #japro-hero .jp2-choices label:hover input:not(:checked)+span{background:#fff4e8;border-color:#e5a066;box-shadow:0 0 0 2px #ff710012}
 #index #japro-home #japro-hero .jp2-choices label:hover input:checked+span{background:#26221e;border-color:#ed9952;box-shadow:0 0 0 2px #ff710020}
}
@media(max-width:1100px){#index #japro-home #japro-hero .jp2-submit{min-height:68px}}
@media(prefers-reduced-motion:reduce){#index #japro-home #japro-hero .jp2-choices input+span{transition:none}}

/* Reserve room for the account control instead of stretching desktop search. */
@media(min-width:992px){
 #header .header-top-right{gap:32px}
 #header .header-top-right .user-info{flex:0 0 48px;min-width:48px}
 #header .header-top-right .user-info-title{width:48px;min-width:48px;justify-content:center}
}

/* Tighter applications introduction, keeping its full explanatory text. */
@media(min-width:768px){
 #japro-home .jp-background-applications>section{padding-top:40px!important}
 #japro-home .jp-background-applications>section>div:first-child{align-items:center!important}
}
@media(min-width:1200px){
 #japro-home .jp-background-applications>section>div:first-child>p{max-width:480px!important}
}

/* Feedback for previously static homepage navigation controls. */
#japro-home .jp-background-categories>section>div:last-child>a,
#japro-home .ab-widths a,
#japro-home .jp-promo a:not(.jp-button),
#header .user-info-title,#header .shopping-cart{transition:background-color .18s ease,box-shadow .18s ease,border-color .18s ease}
@media(hover:hover) and (pointer:fine){
 #japro-home .jp-background-categories>section>div:last-child>a:hover{background:#fff4e8!important;border-color:#d98b4a!important;color:#16181b;box-shadow:0 0 0 2px #ff710012}
 #japro-home .ab-widths a:hover{background:#ffffff0f;box-shadow:inset 3px 0 #ff8b30}
 #japro-home .jp-promo a:not(.jp-button):hover{background:#ffffff14;box-shadow:inset 3px 0 #ffb56d}
 #header .user-info-title:hover{background:#fff4e8;box-shadow:0 0 0 2px #ed995255;border-radius:6px}
 #header .shopping-cart:hover{background:#32373c!important;box-shadow:0 0 0 2px #ed995255}
}
#japro-home .jp-background-categories>section>div:last-child>a:focus-visible{background:#fff4e8!important;border-color:#d98b4a!important}
#japro-home .ab-widths a:focus-visible,#japro-home .jp-promo a:not(.jp-button):focus-visible{background:#ffffff14}
@media(prefers-reduced-motion:reduce){
 #japro-home .jp-background-categories>section>div:last-child>a,
 #japro-home .ab-widths a,#japro-home .jp-promo a:not(.jp-button),
 #header .user-info-title,#header .shopping-cart{transition:none}
}

/* Warm gold feedback for the top contact links. */
#header .header-nav :is(#contact-link a,.jp-mobile-phone){transition:color .18s ease}
@media(hover:hover) and (pointer:fine){
 #header .header-nav :is(#contact-link a,.jp-mobile-phone):hover{color:#ffb83d!important}
}
#header .header-nav :is(#contact-link a,.jp-mobile-phone):focus-visible{color:#ffb83d!important}
@media(prefers-reduced-motion:reduce){#header .header-nav :is(#contact-link a,.jp-mobile-phone){transition:none}}


/* Approved Manrope typography. */

body, #header, #footer, #japro-home, #japro-home .jp-ab,
#header :is(a,button,input,span), #footer :is(a,p,h3,li,span),
#japro-home :is(h1,h2,h3,p,a,button,label,legend,select,option,strong,span,div){font-family:'Manrope',sans-serif!important}
#japro-home :is(h1,h2,h3){font-weight:700!important}
#japro-home p{font-weight:400}
#header :is(button,.jp-header-b2b,.jp-primary-menu a),#japro-home :is(button,.jp-button,.jp2-button){font-weight:600!important}
#japro-home .ab-product-bottom strong{font-weight:700;font-variant-numeric:tabular-nums}
#header .material-icons,#footer .material-icons{font-family:"Material Icons"!important}
#header .fa,#footer .fa{font-family:FontAwesome!important}
body :is(h1,h2,h3,h4,p,a,button,input,label,select,option,th,td,li,dt,dd){font-family:'Manrope',sans-serif}