/* Shared dimensions for storefront, checkout and order confirmation headers. */
:root{--ws-header-height:74px;--ws-header-logo-width:120px;--ws-header-padding:4.5%}
body>header,html.checkout-layout body>header,body.order-confirmation>.brandbar{
 box-sizing:border-box;height:var(--ws-header-height);min-height:var(--ws-header-height);
 padding:14px var(--ws-header-padding);flex-wrap:nowrap;align-items:center;
}
body>header>.brand,html.checkout-layout body>header>.brand,body.order-confirmation>.brandbar>.receipt-brand{
 width:var(--ws-header-logo-width);flex:none;
}
body>header .site-logo,html.checkout-layout body>header .site-logo,body.order-confirmation>.brandbar img{
 display:block;width:var(--ws-header-logo-width);max-width:none;height:auto;object-fit:contain;
}
body.order-confirmation>.brandbar .secure{white-space:nowrap;line-height:1.4}
@media(max-width:620px){
 :root{--ws-header-height:76px;--ws-header-logo-width:clamp(100px,33vw,140px);--ws-header-padding:4%}
}

/* Current section, shared by desktop and mobile navigation. */
#navigation a[aria-current="page"]{background:#8735c4;color:#fff;padding:4px 8px;margin:0 -8px;border:0;border-radius:8px;box-shadow:none}
#mobile-navigation .mobile-nav-links a[aria-current="page"]{background:#8735c4;color:#fff;padding-left:14px;padding-right:14px}
#mobile-navigation .mobile-nav-links a[aria-current="page"] small{color:#fff}
#mobile-navigation .mobile-nav-links a[aria-current="page"] i{background:#ffffff26;color:#fff}

/* Match the checkout form and receipt content gutters, independently of storefront navigation. */
html.checkout-layout body>header{padding-inline:max(4.5%,calc((100% - 1120px)/2))}
body.order-confirmation>.brandbar{padding-inline:max(32px,calc((100% - 1160px)/2))}
@media(max-width:750px){body.order-confirmation>.brandbar{padding-inline:20px}}

/* Use the same centered 91% / content-max width as the homepage hero. */
@media(min-width:621px){
 html:not(.checkout-layout) body:not(.order-confirmation)>header{padding-inline:max(4.5%,calc((100% - var(--content-max,1400px))/2))}
}
