/* Pep Boys RX account, checkout, and staff workspace. */
.header-account{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 13px;border:1px solid #78594b;color:var(--cream);font:800 11px var(--body);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.header-account:hover,.header-account:focus-visible{border-color:var(--gold);background:#2b1b17;color:var(--gold)}
.commerce-page{min-height:65vh;padding:70px 0 100px}
.commerce-heading{margin-bottom:32px}
.commerce-heading h1{margin:11px 0 0;font:800 clamp(50px,6vw,84px)/.9 var(--display);letter-spacing:-.02em;text-transform:uppercase;overflow-wrap:anywhere}
.commerce-page h2{margin:0 0 12px;font:800 clamp(27px,2.5vw,38px)/1 var(--display);text-transform:uppercase}
.commerce-page h3{margin:10px 0 14px;font:800 clamp(28px,3vw,45px)/1 var(--display);text-transform:uppercase}
.commerce-page p{color:#d0c2b8;line-height:1.7}
.commerce-page a:not(.btn):hover{color:var(--gold)}
.commerce-card{min-width:0;padding:clamp(22px,3vw,36px);border:1px solid #67483c;background:radial-gradient(circle at 100% 0,#291716,transparent 55%),#191312;box-shadow:0 18px 42px #0005}
.commerce-card .eyebrow{display:block;margin-bottom:18px}
.commerce-card>.btn{margin-top:13px}
.commerce-auth{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(250px,.8fr);gap:20px}
.commerce-auth>div,.commerce-auth>aside{min-width:0;padding:clamp(25px,3.5vw,46px);border:1px solid #69483b;background:#191210}
.commerce-auth>aside{display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 85% 18%,#5d1b1e,transparent 58%),#211412}
.commerce-auth>aside p{max-width:390px}
.commerce-auth form{display:grid;gap:15px;max-width:520px;margin-top:25px}
.commerce-auth form[hidden]{display:none}
.commerce-auth form+form{padding-top:20px;border-top:1px solid #573b33}
.commerce-field{display:grid;gap:7px;min-width:0;color:#e8cfaa;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.commerce-field input,.commerce-field select,.commerce-field textarea{display:block;width:100%;min-width:0;min-height:46px;padding:11px 13px;border:1px solid #866452;border-radius:0;background:#0c0909;color:var(--cream);font:500 15px var(--body);letter-spacing:normal;text-transform:none}
.commerce-field input[type=file]{height:auto;min-height:48px}
.commerce-field input:focus-visible,.commerce-field select:focus-visible,.commerce-field textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.commerce-status{min-height:21px;margin:14px 0 0!important;color:#e4c38d!important;font-size:12px}
.commerce-status.is-error{color:#ff9a9f!important}
.commerce-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin-top:20px}
.commerce-form-grid>.btn{align-self:end;min-height:46px}
.commerce-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.commerce-tabs a,.commerce-tabs button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 17px;border:1px solid #755343;background:#201715;color:var(--cream);font:800 11px var(--body);letter-spacing:.06em;text-transform:uppercase}
.commerce-tabs a:hover,.commerce-tabs button:hover,.commerce-tabs .active{border-color:var(--red);background:#4b1518;color:#fff}
.commerce-account-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);gap:20px;margin-bottom:20px}
.commerce-account-grid aside h2{font-size:clamp(22px,2vw,31px);overflow-wrap:anywhere;text-transform:none}
.commerce-stat{display:grid;gap:2px;padding:23px 0;margin:24px 0;border-block:1px solid #64463a}
.commerce-stat strong{font:800 55px/.9 var(--display);color:var(--gold)}
.commerce-stat span{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.commerce-orders{margin-top:20px}
.commerce-order{border-top:1px solid #63473d}
.commerce-order:last-child{border-bottom:1px solid #63473d}
.commerce-order summary{display:grid;grid-template-columns:minmax(165px,1.4fr) minmax(80px,.7fr) minmax(80px,.7fr) minmax(150px,1fr);gap:14px;align-items:center;padding:16px 5px;cursor:pointer;list-style-position:inside}
.commerce-order summary strong{overflow-wrap:anywhere}
.commerce-order summary span:nth-child(2){color:var(--gold);font-size:11px;font-weight:800;text-transform:uppercase}
.commerce-order summary small{color:#af9d90}
.commerce-order>div{padding:3px 19px 18px;background:#120e0d}
.commerce-order>div p{margin:10px 0}
.commerce-checkout-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:20px;align-items:start}
.commerce-checkout-grid>form>.eyebrow:not(:first-child){margin-top:33px}
.commerce-checkout-grid form>p a{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.commerce-options{display:grid;gap:9px;margin:18px 0 26px}
.commerce-options label{display:flex;align-items:center;gap:15px;min-height:65px;padding:14px 16px;border:1px solid #684a3d;background:#120e0d;cursor:pointer}
.commerce-options label:has(input:checked){border-color:var(--gold);background:#302017;box-shadow:inset 3px 0 0 var(--red)}
.commerce-options input{width:18px;height:18px;flex:none;accent-color:var(--red)}
.commerce-options label span{display:grid;gap:2px;flex:1}
.commerce-options label strong{font-size:14px}
.commerce-options label small{color:#baa99d;font-size:11px}
.commerce-options label b{white-space:nowrap;color:var(--cream)}
.commerce-checkout-grid form>.btn{width:100%;margin-top:4px}
.commerce-summary{position:sticky;top:110px}
.commerce-summary>div{display:flex;justify-content:space-between;gap:15px;padding:11px 0;border-bottom:1px solid #50392f;font-size:12px}
.commerce-summary>div span{min-width:0}
.commerce-summary>div strong{white-space:nowrap}
.commerce-summary .commerce-grand{align-items:center;margin-top:7px;border:0;color:#fff;font-size:15px;font-weight:800}
.commerce-summary .commerce-grand strong{font:800 32px var(--display);color:var(--gold)}
.commerce-summary>p{margin:16px 0 0;font-size:11px}
.commerce-admin-tabs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;padding-bottom:9px;scrollbar-color:#775543 #1a1210}
.commerce-admin-tabs>*{flex:none}
.commerce-dashboard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:20px}
.commerce-dashboard article{display:grid;gap:14px;min-height:145px;padding:25px;border:1px solid #65483b;border-top:3px solid var(--red);background:#1a1311}
.commerce-dashboard article span{color:#d5bd9c;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.commerce-dashboard article strong{align-self:end;font:800 clamp(32px,3.3vw,50px)/1 var(--display);overflow-wrap:anywhere}
.commerce-table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;margin:20px 0;scrollbar-color:#946d53 #140f0d}
.commerce-table-wrap table{width:100%;min-width:760px;border-collapse:collapse;text-align:left}
.commerce-table-wrap th{padding:12px 14px;border-bottom:2px solid #9c7152;color:var(--gold);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.commerce-table-wrap td{padding:13px 14px;border-bottom:1px solid #49362f;vertical-align:top;color:#e1d4c8;font-size:12px}
.commerce-table-wrap td small{display:block;margin-top:4px;color:#aa998c}
.commerce-table-wrap td strong{overflow-wrap:anywhere}
.commerce-page .commerce-card button:not(.btn){padding:8px 12px;border:1px solid #9b765c;background:#251815;color:var(--cream);font-size:11px;font-weight:800;cursor:pointer}
.commerce-page .commerce-card button:not(.btn):hover{border-color:var(--gold);background:#3a211c}
.commerce-price{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px;white-space:nowrap}
.commerce-price input{width:90px;padding:6px 7px;border:1px solid #866452;background:#0c0909;color:var(--cream)}
.commerce-document{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 0;border-top:1px solid #50392f;font-size:12px;overflow-wrap:anywhere}
.commerce-document span{min-width:0}
.document-list{display:grid;gap:13px;min-width:0}
.document-report{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:22px;border:1px solid #72513e;background:#1b1311}
.document-report h3{margin:8px 0;font:800 27px/1 var(--display);text-transform:uppercase;overflow-wrap:anywhere}
.document-report p{margin:0;color:#c7b4a6;font-size:12px;line-height:1.6}
.document-report .btn{flex:none}
@media(max-width:650px){.document-report{display:grid}.document-report .btn{justify-self:start}}
#commerce-order-editor,#commerce-member-editor{margin-top:20px}
#commerce-order-editor .commerce-card,#commerce-member-editor .commerce-card{max-width:760px}
#commerce-order-editor form,#commerce-member-editor form,#admin-report-form,#admin-invite-form{display:grid;gap:16px;margin-top:18px}
#commerce-member-editor form+form{padding-top:20px;border-top:1px solid #50392f}
.commerce-page input[type=checkbox]{accent-color:var(--red)}
@media(max-width:1000px){
  .commerce-account-grid,.commerce-checkout-grid{grid-template-columns:minmax(0,1fr) minmax(250px,.75fr)}
  .commerce-dashboard{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:850px){
  .site-header{gap:clamp(5px,2vw,16px)}
  .header-account{min-height:35px;padding:0 9px;font-size:10px}
}
@media(max-width:760px){
  .commerce-page{padding:45px 0 75px}
  .commerce-auth,.commerce-account-grid,.commerce-checkout-grid{grid-template-columns:1fr}
  .commerce-summary{position:static}
  .commerce-order summary{grid-template-columns:1fr auto;gap:6px 12px}
  .commerce-order summary small{grid-column:1/-1}
  .commerce-admin-tabs{margin-inline:-4%;padding-inline:4%}
}
@media(max-width:520px){
  .header-account{padding:0 6px;font-size:9px;letter-spacing:0}
  .commerce-heading h1{font-size:clamp(43px,12vw,60px)}
  .commerce-card,.commerce-auth>div,.commerce-auth>aside{padding:21px}
  .commerce-form-grid{grid-template-columns:1fr}
  .commerce-tabs{gap:6px}
  .commerce-tabs a,.commerce-tabs button{padding:9px 11px;font-size:10px}
  .commerce-dashboard{gap:8px}
  .commerce-dashboard article{min-height:113px;padding:16px}
  .commerce-dashboard article strong{font-size:clamp(29px,8vw,42px)}
  .commerce-options label{padding:12px;gap:10px}
  .commerce-options label small{font-size:10px}
  .commerce-document{align-items:flex-start;flex-direction:column}
}