/* ux-hdr: compact, non-sticky site header on phones (<= 480 px), same layout as the catalogue header. Wider screens are untouched. */
@media(max-width:480px){
 /* app.js sets --hdr to the header height for anchor jumps; with a header that scrolls away, 16 px is enough */
 html{scroll-padding-top:16px}
 header.site:not(.ux-chrome){position:relative;top:auto}
 header.site:not(.ux-chrome) .hwrap{gap:8px 10px;padding:10px 14px}
 /* row 1: logo, spacer, Get quote. Row 2: search + language menu. Row 3: the nav, one scrolling row */
 header.site:not(.ux-chrome) .logo .wm span{display:none}
 header.site:not(.ux-chrome) .spacer{flex:1 1 0;min-width:0}
 header.site:not(.ux-chrome) .qbtn{flex:none;margin:0}
 header.site:not(.ux-chrome) .hsearch{order:5;flex:1 1 50%;min-width:0;max-width:none}
 header.site:not(.ux-chrome) .hsearch input{font-size:16px}
 header.site:not(.ux-chrome) select.langsel{order:5;flex:none;max-width:45%;padding:9px 8px}
 header.site:not(.ux-chrome) nav.main{order:6;flex:0 0 100%;min-width:0;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 header.site:not(.ux-chrome) nav.main::-webkit-scrollbar{display:none}
 header.site:not(.ux-chrome) nav.main a{flex:none;padding:10px 12px;white-space:nowrap}
 /* the scrolling nav clips anything drawn outside a link, so the keyboard focus ring goes inside it */
 header.site:not(.ux-chrome) nav.main a:focus-visible{outline-offset:-3px}
}
@media(max-width:340px){header.site:not(.ux-chrome) .logo .wm b{font-size:13px}header.site:not(.ux-chrome) .qbtn{padding:10px 11px}}