/* Phones: the logo and account controls share one row, and the links fill a
   second row, instead of the controls and links each wrapping onto rows of
   their own. Where the links don't all fit they scroll sideways, with a fade on
   the edge that has more. Loaded last so it settles the earlier mobile rules. */
@media(max-width:640px){
 .header .header-inner{min-height:0;padding:10px 12px 0;flex-wrap:wrap;align-items:center;gap:4px 8px}
 .header .header-inner>.brand{flex:none}
 .header .header-inner .header-actions{flex:1 1 auto;width:auto;min-width:0;max-width:none;margin-left:auto;flex-wrap:nowrap;justify-content:flex-end;gap:6px}
 /* Signed in, Wallet, Orders and Offers are in the account menu. */
 .header .header-inner .header-actions:has(.avatar-trigger)>:is(.header-wallet-link,a[data-route=orders],a[data-route=offers]){display:none}
 .header .header-inner .main-nav{order:3;width:100%;height:42px;min-height:42px;gap:16px;justify-content:space-between;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
 .header .header-inner .main-nav::-webkit-scrollbar{display:none}
 .header .header-inner .main-nav a{flex:none;font-size:12.5px;white-space:nowrap}
 .header .header-inner .main-nav a :is(.warranty-icon,.icon){display:none}
 .header .header-inner .main-nav.has-more-end{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent)}
 .header .header-inner .main-nav.has-more-start{-webkit-mask-image:linear-gradient(to right,transparent,#000 30px);mask-image:linear-gradient(to right,transparent,#000 30px)}
 .header .header-inner .main-nav.has-more-start.has-more-end{-webkit-mask-image:linear-gradient(to right,transparent,#000 30px,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(to right,transparent,#000 30px,#000 calc(100% - 30px),transparent)}
}
/* Small phones: slimmer icons, the theme switch gives way when signed in, and
   the links get a little tighter. */
@media(max-width:360px){
 .header .header-inner{padding-inline:8px}
 .header .header-inner .header-actions{gap:4px}
 html[data-theme] .header .header-inner .header-actions :is(.header-icon,.theme-control),.header .header-inner .header-actions :is(.header-icon,.theme-control){width:29px;min-width:0;flex:0 0 29px}
 .header .header-inner .header-actions .sign-in:not(.avatar-trigger){padding-inline:9px}
 .header .header-inner .header-actions:has(.avatar-trigger)>.theme-control{display:none}
 .header .header-inner .main-nav{gap:13px}
 .header .header-inner .main-nav a{font-size:11.5px}
}