/* Desktop proportions follow the supplied 1886 × 424 header reference.
   Existing controls, IDs, links and authenticated account content are retained. */
@media(min-width:1101px){
 html:not([data-device=mobile]) #appHeader{container-type:inline-size;display:grid;grid-template-columns:minmax(0,1260fr) 14fr minmax(0,206fr) 22fr minmax(0,370fr);gap:0;align-items:start;padding:0 .7423% 0 0;aspect-ratio:1886/424;background:#278577}
 html:not([data-device=mobile]) #appHeader>a.brand{grid-column:1;grid-row:1;align-self:stretch;display:grid;grid-template-columns:27.4% 72.6%;align-items:center;gap:0;height:100%;padding-bottom:1.59vw;min-width:0;overflow:hidden}
 html:not([data-device=mobile]) #appHeader a.brand .brand-logo{width:100%;height:auto;max-width:none;margin-left:-1.5%;object-fit:contain}
 html:not([data-device=mobile]) #appHeader .brand-copy{width:100%;min-width:0}
 html:not([data-device=mobile]) #appHeader .brand-copy b{position:relative;display:block;aspect-ratio:2048/460;overflow:hidden;line-height:0}
 html:not([data-device=mobile]) #appHeader .brand-copy img.brand-wordmark{position:absolute;left:0;top:50%;width:100%;max-width:100%;height:auto;transform:translateY(-50%)}
 html:not([data-device=mobile]) #appHeader .brand-copy small{display:block;width:100%;margin-top:.63cqw;text-align:center;font:700 clamp(17px,2.54cqw,32px)/1.2 Arial,Helvetica,sans-serif;letter-spacing:0;color:#fff}
 html:not([data-device=mobile]) #appHeader>.site-qr{grid-column:3;grid-row:1;width:100%;margin:0;padding-top:.212cqw;align-self:start;gap:.477cqw}
 html:not([data-device=mobile]) #appHeader .site-qr>img{width:100%;height:auto;aspect-ratio:1;border-radius:.424cqw}
 html:not([data-device=mobile]) #appHeader .site-qr>span:not(.connection-signal){max-width:100%;font-size:clamp(9px,.636cqw,12px);line-height:1.4;white-space:nowrap}
 html:not([data-device=mobile]) #appHeader .site-qr .connection-signal{margin-top:.318cqw;gap:.371cqw}
 html:not([data-device=mobile]) #appHeader .connection-signal i{width:5.09cqw;height:5.09cqw;flex:0 0 5.09cqw;border-width:.265cqw}
 html:not([data-device=mobile]) #appHeader .site-qr #connectionSignalLabel{min-width:0;max-width:100%;font-size:clamp(16px,1.326cqw,25px);padding:.212cqw .689cqw;border-width:.106cqw;white-space:nowrap}
 html:not([data-device=mobile]) #appHeader .site-qr .connection-signal-speed{font-size:clamp(9px,.689cqw,13px)}
 html:not([data-device=mobile]) #appHeader>.header-controls{grid-column:5;grid-row:1;width:100%;max-width:none;margin-top:.954cqw;justify-self:stretch}
 html:not([data-device=mobile]) #appHeader .display-preferences{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.636cqw;padding:.742cqw;border-radius:.636cqw}
 html:not([data-device=mobile]) #appHeader .display-preferences label{min-width:0;gap:.318cqw}
 html:not([data-device=mobile]) #appHeader .display-preferences label>span{font-size:clamp(10px,.742cqw,14px)}
 html:not([data-device=mobile]) #appHeader .display-preferences select{min-height:0;height:2.333cqw;padding:.53cqw .795cqw;font-size:clamp(10px,.636cqw,12px)}
 html:not([data-device=mobile]) #appHeader .mode-help{margin-top:.424cqw;font-size:clamp(8px,.583cqw,11px);line-height:1.5}
 html:not([data-device=mobile]) #appHeader .site-preferences{gap:.53cqw;margin-top:.636cqw;padding:.742cqw;border-radius:.636cqw}
 html:not([data-device=mobile]) #appHeader .site-preferences label{gap:.318cqw;font-size:clamp(10px,.742cqw,14px)}
 html:not([data-device=mobile]) #appHeader .site-preferences select{min-height:0;height:2.333cqw;padding:.53cqw .795cqw;font-size:clamp(10px,.742cqw,14px);font-weight:800}
 html:not([data-device=mobile]) #appHeader .site-preferences button{min-height:0;height:2.333cqw;padding:.53cqw .742cqw;font-size:clamp(8px,.583cqw,11px);white-space:nowrap}
 html:not([data-device=mobile]) #appHeader .header-account{display:grid;grid-template-columns:minmax(0,198fr) minmax(0,110fr) minmax(0,38fr);column-gap:.318cqw;row-gap:0;margin-top:.742cqw;padding-top:0;border-top:1px solid #ffffff30}
 html:not([data-device=mobile]) #appHeader .header-account>small{grid-column:1/-1;grid-row:1;margin:.212cqw 0 0;font-size:clamp(11px,.875cqw,16.5px);line-height:1.2}
 html:not([data-device=mobile]) #appHeader button#sessionLabel{grid-column:1/-1;grid-row:2;justify-self:start;width:calc(100% - 4.88cqw);max-width:none;min-width:0;height:2.65cqw;margin:0;padding:0;position:relative;top:-.265cqw;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(25px,2.651cqw,50px);line-height:1;font-weight:800}
 html:not([data-device=mobile]) #appHeader .header-account-actions{display:contents}
 html:not([data-device=mobile]) #appHeader #privacyPolicyButton{grid-column:1/-1;grid-row:2;justify-self:end;align-self:center;min-height:0;width:4.77cqw;height:2.12cqw;position:relative;top:-.265cqw;padding:.212cqw .159cqw;font-size:clamp(8px,.636cqw,12px)}
 html:not([data-device=mobile]) #appHeader #accountButton{grid-column:1;grid-row:3}
 html:not([data-device=mobile]) #appHeader #logoutButton{grid-column:2;grid-row:3}
 html:not([data-device=mobile]) #appHeader #termsButton{grid-column:3;grid-row:3;align-self:center;min-height:0;height:2.333cqw;padding:.212cqw .159cqw;font-size:clamp(8px,.636cqw,12px)}
 html:not([data-device=mobile]) #appHeader .header-account-actions #accountButton,html:not([data-device=mobile]) #appHeader .header-account-actions #logoutButton{width:100%;min-height:0;height:2.969cqw;margin-top:.742cqw;padding:.53cqw .318cqw;font-size:clamp(11px,1.007cqw,19px);font-weight:900;white-space:nowrap}
 html:not([data-device=mobile]) #appHeader #termsButton{margin-top:.742cqw}
}

/* Keep the entire artwork within its own column on compact layouts too. */
#appHeader .brand-copy{min-width:0;max-width:100%}
#appHeader .brand-copy img.brand-wordmark{object-fit:contain;clip-path:none}

/* Account controls retain their geometry in every language. Legal labels are fixed English. */
#appHeader .header-account-actions #accountButton,
#appHeader .header-account-actions #logoutButton{min-width:0;box-sizing:border-box;white-space:nowrap;overflow:hidden;flex-shrink:0;cursor:pointer}
#appHeader #privacyPolicyButton,#appHeader #termsButton{box-sizing:border-box;white-space:nowrap;flex-shrink:0}
@media(max-width:1100px){
 #appHeader .header-account-actions{display:grid;grid-template-columns:minmax(0,198fr) minmax(0,110fr) 38px;gap:5px;position:relative;padding-top:0}
 #appHeader #accountButton{grid-column:1;height:56px;min-height:56px;width:100%}
 #appHeader #logoutButton{grid-column:2;height:56px;min-height:56px;width:100%}
 #appHeader #termsButton{grid-column:3;height:44px;width:38px}
 #appHeader #privacyPolicyButton{position:absolute;right:0;top:-62px;width:90px;height:40px}
 #appHeader #sessionLabel{padding-right:100px;min-height:40px}
}

html[data-device=mobile] #appHeader .header-account-actions{display:grid;grid-template-columns:minmax(0,198fr) minmax(0,110fr) 38px;gap:5px;position:relative}
html[data-device=mobile] #appHeader #accountButton{grid-column:1;height:56px;min-height:56px;width:100%}
html[data-device=mobile] #appHeader #logoutButton{grid-column:2;height:56px;min-height:56px;width:100%}
html[data-device=mobile] #appHeader #termsButton{grid-column:3;height:44px;width:38px}
html[data-device=mobile] #appHeader #privacyPolicyButton{position:absolute;right:0;top:-62px;width:90px;height:40px}
html[data-device=mobile] #appHeader #sessionLabel{padding-right:100px;min-height:40px}

/* Exact supplied Parts artwork, composed with the retained Store artwork. */
#appHeader .brand-copy .exact-wordmark{display:flex;width:100%;align-items:flex-end;gap:0;line-height:0;background:none;-webkit-text-stroke:0;text-shadow:none}
#appHeader .exact-wordmark .store-word-art{display:block;position:relative;width:55%;flex:0 0 55%;aspect-ratio:1075/520;overflow:hidden}
#appHeader .exact-wordmark .store-word-art img{position:absolute;width:190.51%;max-width:none;height:auto;left:0;top:-27.3%}
#appHeader .exact-wordmark .parts-word-art{display:block;width:45%;max-width:45%;height:auto;flex:0 0 45%;object-fit:contain}
@media(min-width:1101px){html:not([data-device=mobile]) #appHeader .brand-copy b{aspect-ratio:auto;overflow:visible}}

/* One SVG canvas aligns visible letter baselines, independent of image margins. */
#appHeader .brand-copy img.aligned-wordmark{position:static;display:block;width:100%;max-width:100%;height:auto;transform:none;object-fit:contain}
@media(min-width:1101px){html:not([data-device=mobile]) #appHeader .brand-copy img.aligned-wordmark{position:static;top:auto;left:auto;transform:none}}