
/* Guest-only photographic background for the left sidebar. */
#header:has(#desktop-header-container.lp-guest-sidebar) {
 background-color:#111!important;
 background-image:linear-gradient(rgba(0,0,0,.32),rgba(0,0,0,.32)),url('../img/lisparts-guest-sidebar-v1.png')!important;
 background-size:cover!important;
 background-position:center center!important;
 background-repeat:no-repeat!important;
}

/* Staging guest login presentation. */
body:has(.lp-guest-sidebar) .top-menu #ps-shoppingcart-wrapper,body:has(.lp-guest-sidebar) .top-menu #currency_selector,body:has(.lp-guest-sidebar) .top-menu #user_info,body:has(.lp-guest-sidebar) .top-menu .menu-left,body:has(.lp-guest-sidebar) .top-menu br{display:none!important;}
body:has(.lp-guest-sidebar) .top-menu{height:64px!important;min-height:64px;background:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18)),url('../img/lisparts-guest-topbar-v1.png') center top/cover no-repeat!important;box-shadow:none!important;padding:0 30px!important;}
body:has(.lp-guest-sidebar) .top-menu .menu-right{margin-left:auto;display:flex;height:64px;align-items:center;}
body:has(.lp-guest-sidebar) #language_selector .expand-more{padding:12px 16px;background:rgba(0,0,0,.22);border-radius:6px;}
.lp-login-sidebar-copy{text-align:left;color:#fff;margin:36px 18px 0;font-size:15px;line-height:1.5;}
.lp-login-sidebar-copy .lp-sidebar-kicker{font-size:11px;letter-spacing:4px;margin-bottom:30px;}
.lp-login-sidebar-copy .lp-sidebar-kicker:after{content:'';display:block;width:42px;height:3px;background:#ffcc00;margin-top:12px;}
.lp-login-sidebar-copy h2{font-size:28px!important;line-height:1.25!important;color:#fff;margin:0 0 32px;font-weight:700;}
.lp-login-sidebar-copy h2 span{color:#ffcc00;}
.lp-login-sidebar-copy ul{list-style:none;padding:0;margin:0;display:grid;gap:26px;}
.lp-login-sidebar-copy li{display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:center;}
.lp-login-sidebar-copy i{color:#ffcc00;font-size:31px;}
#authentication #main{background:#fff;padding:34px 42px!important;border:1px solid #edf0f4;border-radius:14px!important;box-shadow:0 16px 50px rgba(30,40,60,.06);max-width:1100px;margin:0 auto;}
#authentication #inner-wrapper{background:#f6f8fb;min-height:100vh;padding-top:94px!important;padding-bottom:35px!important;}
#authentication .page-header{border:0!important;margin-bottom:16px!important;}
#authentication .page-header:after,#authentication .page-header h1:after{display:none!important;}
#authentication .page-header h1{border:0!important;margin:0!important;padding:0!important;}
.lp-login-eyebrow{display:block;font-size:11px;letter-spacing:4px;color:#5c6573;margin-bottom:18px;}
.lp-login-eyebrow:after{content:'';display:block;background:#ffca00;width:82px;height:3px;margin-top:13px;}
.lp-login-title{display:block;font-size:30px;line-height:1.2;color:#111;font-weight:700;}
.lp-login-intro{font-size:16px;line-height:1.6;color:#667080;margin-bottom:24px;}
#authentication #login-form .form-group{display:block;margin:0 0 20px!important;}
#authentication #login-form .col-form-label{display:block;width:100%;max-width:100%;padding:0 0 8px;font-size:16px;font-weight:600;color:#111;}
#authentication #login-form .js-input-column{width:100%;max-width:100%;padding:0;position:relative;}
#authentication #login-form .form-control-comment{display:none;}
#authentication #login-form .form-control{height:52px;border:1px solid #d5dce6!important;background:#f4f6fa;border-radius:6px!important;padding:10px 48px;font-size:16px;}
#authentication .js-input-column:has(#field-email):before,#authentication .js-input-column:has(#field-password):before{font-family:FontAwesome;position:absolute;left:18px;top:14px;z-index:5;color:#697483;font-size:21px;pointer-events:none;}
#authentication .js-input-column:has(#field-email):before{content:'\f003';}
#authentication .js-input-column:has(#field-password):before{content:'\f023';}
#authentication .input-group-append{position:absolute;right:6px;top:6px;z-index:6;}
#authentication .input-group-append .btn{height:40px;width:42px;background:#fff!important;border:1px solid #dde3eb!important;border-radius:5px!important;color:#4d5868;}
#authentication .forgot-password{text-align:right;margin:0 0 22px;font-size:14px;}
#authentication .forgot-password a{color:#0753a4;text-decoration:underline;}
#authentication .form-footer{margin:0!important;}
#authentication #submit-login{width:100%;height:54px;font-size:18px;font-weight:600;background:#ffcc00!important;color:#080808;border-radius:5px!important;}
#authentication #submit-login:before{content:'\f090';font-family:FontAwesome;margin-right:12px;}
#authentication .no-account{text-align:center;font-size:15px;padding:10px 0;}
#authentication .no-account a{color:#0753a4;}
#authentication #content>hr{margin:26px 0 15px;}
#authentication .bottom-login-banner{margin-top:26px!important;text-align:center!important;}
#authentication .bottom-login-banner img{max-width:595px!important;}
@media(min-width:992px){body:has(.lp-guest-sidebar){--lp-guest-width:clamp(280px,27vw,430px);}body:has(.lp-guest-sidebar) #header{width:var(--lp-guest-width)!important;}body:has(.lp-guest-sidebar) #desktop-header-container{width:100%!important;max-width:100%!important;padding:0 24px!important;}body:has(.lp-guest-sidebar) .top-menu{left:var(--lp-guest-width)!important;width:calc(100% - var(--lp-guest-width))!important;}body:has(.lp-guest-sidebar) #inner-wrapper{margin-left:var(--lp-guest-width)!important;width:calc(100% - var(--lp-guest-width))!important;}#authentication #inner-wrapper{padding-left:34px!important;padding-right:34px!important;}}
@media(max-width:991px){#authentication #main{padding:26px 22px!important;}#authentication #inner-wrapper{margin-left:0!important;padding:86px 15px 25px!important;width:100%!important;}.lp-login-title{font-size:25px;}.lp-login-sidebar-copy{display:none;}}

body:has(.lp-guest-sidebar) #main-page-content > br{display:none!important;}
#authentication #inner-wrapper{padding-top:38px!important;}
@media(min-width:992px){body:has(.lp-guest-sidebar) #main-page-content{padding-left:var(--lp-guest-width)!important;}body:has(.lp-guest-sidebar) #inner-wrapper{margin-left:0!important;margin-right:0!important;width:100%!important;}}

#authentication .forgot-password{float:none!important;width:100%!important;text-align:right!important;font-size:14px!important;}
#authentication .forgot-password a{font-size:14px!important;}
#authentication #login-form .form-control{border-color:#d5dce6!important;background-color:#f4f6fa!important;}
#authentication .bottom-login-banner{margin-top:28px!important;}

#authentication .page-header,#authentication .page-header h1{position:static!important;top:auto!important;box-shadow:none!important;}

#authentication .page-header:before{content:'PORTAL B2B LISPARTS';display:block;font-size:11px;font-weight:600;letter-spacing:4px;color:#5c6573;white-space:nowrap;width:90px;padding-bottom:14px;border-bottom:3px solid #ffca00;margin-bottom:18px;}
#authentication .page-header h1{font-size:30px!important;font-weight:700;color:#111;line-height:1.2!important;}
@media(max-width:991px){#authentication .page-header h1{font-size:25px!important;}}

/* Staging login reference: one shared sidebar boundary before and after login. */
@media(min-width:992px){
 body{--lp-sidebar-width:clamp(280px,33.333vw,560px)}
 #header,body:has(.lp-guest-sidebar) #header{width:var(--lp-sidebar-width)!important}
 #main-page-content,body:has(.lp-guest-sidebar) #main-page-content{padding-left:var(--lp-sidebar-width)!important}
 .top-menu,body:has(.lp-guest-sidebar) .top-menu{left:var(--lp-sidebar-width)!important;width:calc(100% - var(--lp-sidebar-width))!important}
 #desktop-header-container{width:100%!important;max-width:100%!important}
 #authentication #inner-wrapper{padding:40px 28px!important}
 .lp-login-sidebar-copy{max-width:340px;margin:30px auto 0!important}
 .lp-login-sidebar-copy h2{font-size:32px!important}
 .lp-login-sidebar-copy li{padding:14px 0!important;border-bottom:1px solid rgba(255,255,255,.13)}
}
#authentication #main{background:transparent!important;box-shadow:none!important;border:0!important;padding:0!important;max-width:none!important;width:100%!important}
#authentication #content{background:transparent!important;padding:0!important}
#authentication .lp-login-card{max-width:600px;margin:0 auto;background:#fff;border:1px solid #edf0f3;border-radius:14px;padding:32px 40px;box-shadow:0 12px 35px rgba(30,45,65,.06)}
#authentication .lp-login-brand{text-align:center;letter-spacing:4px;font-size:12px;color:#677080;font-weight:600;margin-bottom:22px}
#authentication .lp-login-brand:after{content:'';display:block;width:70px;height:3px;background:#ffc400;margin:14px auto 0}
#authentication .lp-login-card h1{position:static!important;font-size:32px!important;text-align:center;margin:0 0 12px!important;padding:0!important;border:0!important;box-shadow:none!important}
#authentication .lp-login-intro{text-align:center;font-size:16px!important;line-height:1.5;margin-bottom:26px!important}
#authentication .bottom-login-banner{margin:30px auto 0!important;max-width:600px;padding:0!important;background:transparent!important}
#authentication #login-form .form-group{margin-bottom:18px!important}
#authentication .no-account{text-align:center!important;margin:16px 0 0!important}
@media(max-width:991px){#authentication .lp-login-card{padding:26px 22px}#authentication .lp-login-card h1{font-size:28px!important}}

@media(min-width:992px){
 .lp-login-sidebar-copy{padding:0 10px!important;margin-top:38px!important}
 .lp-login-sidebar-copy h2{line-height:1.25!important;margin-bottom:28px!important}
 .lp-login-sidebar-copy li{font-size:16px!important;line-height:1.5!important;margin:0!important;padding:16px 0!important}
 .lp-login-sidebar-copy li:last-child{border-bottom:0}
 .lp-sidebar-kicker:after{display:none!important}
 .lp-sidebar-kicker:before{content:'';display:block;width:54px;height:4px;background:#ffc400;margin-bottom:28px}
}
#authentication .no-account{font-size:15px!important}
#authentication .no-account a{font-size:15px!important;text-decoration:underline!important;color:#0755a3!important}

@media(min-width:992px){.lp-login-sidebar-copy ul{gap:0!important}.lp-login-sidebar-copy li{padding:12px 0!important}}

/* Preserve original menu width and fit guest login within desktop viewport. */
@media(min-width:992px){
 body{--lp-sidebar-width:280px!important}
 #authentication #inner-wrapper{padding:20px 24px!important}
 #authentication .lp-login-card{max-width:500px;padding:22px 30px}
 #authentication .lp-login-brand{font-size:10px;letter-spacing:3px;margin-bottom:14px}
 #authentication .lp-login-brand:after{margin-top:10px;width:54px}
 #authentication .lp-login-card h1{font-size:26px!important;margin-bottom:8px!important}
 #authentication .lp-login-intro{font-size:13px!important;line-height:1.45;margin-bottom:18px!important}
 #authentication #login-form .form-group{margin-bottom:12px!important}
 #authentication #login-form label{font-size:13px!important;margin-bottom:5px!important}
 #authentication #login-form input.form-control{height:40px!important;font-size:13px!important}
 #authentication #login-form .input-group{min-height:40px!important}
 #authentication #login-form .input-group-append button{height:32px!important;min-height:0!important}
 #authentication .forgot-password{font-size:12px!important;margin:8px 0 14px!important}
 #authentication #submit-login{height:42px!important;min-height:0!important;font-size:15px!important}
 #authentication .no-account,#authentication .no-account a{font-size:12px!important;margin-top:10px!important}
 #authentication .lp-login-card hr{margin:16px 0!important}
 #authentication .bottom-login-banner{max-width:490px;margin-top:22px!important}
 #authentication .bottom-login-banner img{max-width:490px!important}
 .lp-login-sidebar-copy{padding:0!important;margin-top:24px!important;max-width:232px}
 .lp-login-sidebar-copy h2{font-size:25px!important;margin-bottom:18px!important}
 .lp-sidebar-kicker{font-size:10px!important;letter-spacing:3px!important}
 .lp-sidebar-kicker:before{margin-bottom:20px;width:40px}
 .lp-login-sidebar-copy li{font-size:13px!important;line-height:1.45!important;padding:10px 0!important;gap:10px!important}
 .lp-login-sidebar-copy li i{font-size:25px!important;width:30px!important;min-width:30px!important}
}
@media(min-width:992px) and (max-height:650px){
 #authentication #inner-wrapper{padding-top:12px!important;padding-bottom:12px!important}
 #authentication .lp-login-card{padding-top:16px;padding-bottom:16px}
 #authentication .lp-login-brand{margin-bottom:10px}
 #authentication .lp-login-intro{margin-bottom:12px!important}
 #authentication .bottom-login-banner{margin-top:14px!important;max-width:420px}
 #authentication .bottom-login-banner img{max-width:420px!important}
}

@media(min-width:992px){#authentication #inner-wrapper{min-height:calc(100vh - 64px)!important}#authentication #content{margin-bottom:0!important}}

/* Compact central login and funding banner; preserve the 280px sidebar. */
@media(min-width:992px){
 #authentication #inner-wrapper{padding:14px 24px!important}
 #authentication .lp-login-card{max-width:450px;padding:18px 26px}
 #authentication .lp-login-brand{font-size:9px;letter-spacing:2.7px;margin-bottom:11px}
 #authentication .lp-login-brand:after{margin-top:8px;width:48px}
 #authentication .lp-login-card h1{font-size:23px!important;margin-bottom:7px!important}
 #authentication .lp-login-intro{font-size:12px!important;margin-bottom:14px!important}
 #authentication #login-form .form-group{margin-bottom:10px!important}
 #authentication #login-form label{font-size:12px!important;margin-bottom:4px!important}
 #authentication #login-form input.form-control{height:36px!important;font-size:12px!important}
 #authentication #login-form .input-group{min-height:36px!important}
 #authentication #login-form .input-group-append button{height:29px!important}
 #authentication .forgot-password,#authentication .forgot-password a{font-size:11px!important;margin:7px 0 11px!important}
 #authentication #submit-login{height:38px!important;font-size:14px!important}
 #authentication .no-account,#authentication .no-account a{font-size:11px!important;margin-top:8px!important}
 #authentication .lp-login-card hr{margin:13px 0!important}
 #authentication .bottom-login-banner{max-width:440px;margin-top:18px!important}
 #authentication .bottom-login-banner img{max-width:440px!important}
}
@media(min-width:992px) and (max-height:620px){
 #authentication #inner-wrapper{padding-top:8px!important;padding-bottom:8px!important}
 #authentication .lp-login-card{padding-top:13px;padding-bottom:13px}
 #authentication .lp-login-brand{margin-bottom:8px}
 #authentication .lp-login-intro{margin-bottom:10px!important}
 #authentication .bottom-login-banner{max-width:390px;margin-top:12px!important}
 #authentication .bottom-login-banner img{max-width:390px!important}
}

/* New guest sidebar photo, preserving all existing section dimensions. */
#header:has(#desktop-header-container.lp-guest-sidebar){background-image:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18)),url('../img/lisparts-guest-sidebar-v2.png')!important;background-size:cover!important;background-position:65% center!important}
/* Equal black gutters around the desktop sidebar catalogue search. */
@media(min-width:992px){#desktop-header-container #search_widget{width:calc(100% - 36px)!important;max-width:calc(100% - 36px)!important;margin-left:18px!important;margin-right:18px!important;box-sizing:border-box}#desktop-header-container #search_widget form{width:100%!important}}

/* Search aligns with menu text at left and section divider at right. */
@media(min-width:992px){#desktop-header-container #search_widget{width:calc(100% - 54px)!important;max-width:calc(100% - 54px)!important;margin-left:15px!important;margin-right:39px!important}}

/* Shared inset for search, menu text and yellow section divider. */
@media(min-width:992px){
 #desktop-header-container #search_widget{width:calc(100% - 56px)!important;max-width:calc(100% - 56px)!important;margin-left:28px!important;margin-right:28px!important}
 #cbp-hrmenu1 > ul > li > a{padding-left:28px!important;padding-right:28px!important}
 #cbp-hrmenu1 > ul > li.cbp-hrmenu-tab:after{margin-left:28px!important;margin-right:28px!important;width:calc(100% - 56px)!important}
 #desktop_logo{text-align:center!important}
 #desktop_logo > a{display:inline-block!important;margin-left:auto!important;margin-right:auto!important}
}


/* Center login field icons without changing field or panel dimensions. */
#authentication .js-input-column:has(#field-email):before,
#authentication .js-input-column:has(#field-password):before{top:50%!important;transform:translateY(-50%)!important;line-height:1!important;margin:0!important}
#authentication .input-group-append{top:50%!important;transform:translateY(-50%)!important;display:flex!important;align-items:center!important}
#authentication .input-group-append .btn{display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important}
#authentication .input-group-append .btn i{line-height:1!important;margin:0!important}

/* Shared guest sidebar: same position as registration. */
@media(min-width:992px){.lp-login-sidebar-copy{position:fixed!important;left:30px!important;top:160px!important;width:220px!important;max-width:220px!important;margin:0!important;z-index:5003}}
